:root {
   --ground:#15403F;
   --surface-dark:#0E2B2A;
   --surface-mid:#1A4D4C;
   --surface-light:#225C5B;
   --surface-elevated:#286968;
   --text-primary:#F3EFE6;
   --text-muted:#B8D3CF;
   --text-dim:#A8C8C3;
   --accent:#E0B55E;
   --accent-light:#F0CF8C;
   --accent-dim:#A88133;
   --accent-glow:rgba(212, 168, 83, 0.15);
   --line:rgba(243, 239, 230, 0.18);
   --line-strong:rgba(243, 239, 230, 0.32);
   --line-soft:rgba(243, 239, 230, 0.10);


   --roki-bc5:'Cinzel', Georgia, serif;
   --roki-0e8:'Crimson Pro', Garamond, 'Times New Roman', serif;
   --roki-f7a:'JetBrains Mono', Consolas, Menlo, monospace;


   --step--1:clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);
   --roki-1d0:clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
   --roki-e8b:clamp(1.25rem, 1.15rem + 0.5vw, 1.5625rem);
   --roki-8e4:clamp(1.5rem, 1.35rem + 0.75vw, 1.953rem);
   --roki-824:clamp(1.875rem, 1.65rem + 1.13vw, 2.441rem);
   --roki-fdd:clamp(2.25rem, 1.95rem + 1.5vw, 3.052rem);
   --roki-983:clamp(2.75rem, 2.3rem + 2.25vw, 4.066rem);
   --step-hero:clamp(2.625rem, 2.1rem + 3.8vw, 5.75rem);


   --space-2xs:clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
   --space-xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
   --space-s:clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
   --space-m:clamp(1.125rem, 1rem + 0.63vw, 1.5rem);
   --space-l:clamp(1.5rem, 1.35rem + 0.75vw, 2.125rem);
   --space-xl:clamp(2.25rem, 1.95rem + 1.5vw, 3.25rem);
   --space-2xl:clamp(3.25rem, 2.8rem + 2.25vw, 4.75rem);
   --space-3xl:clamp(4.5rem, 3.8rem + 3.5vw, 7rem);


   --radius-xs:2px;
   --radius-s:4px;
   --radius-m:6px;
   --radius-seal:9999px;


   --dur-instant:120ms;
   --dur-fast:180ms;
   --dur-medium:260ms;
   --dur-slow:420ms;
   --ease-standard:cubic-bezier(0.2, 0, 0, 1);
   --ease-sharp:cubic-bezier(0.3, 0, 0.8, 0.15);
   --ease-out:cubic-bezier(0, 0, 0.2, 1);


   --shadow-subtle:0 4px 18px rgba(10, 28, 27, 0.35);
   --shadow-deep:0 16px 42px rgba(8, 22, 21, 0.55);
   --shadow-accent:0 6px 24px rgba(212, 168, 83, 0.22);


   --content-max:76rem;
   --content-narrow:52rem;
   --content-compact:40rem;
   --header-height:4.75rem;
}


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


html {
   background-color:var(--ground);
   color:var(--text-primary);
   font-family:var(--roki-0e8);
   font-size:100%;
   line-height:1.6;
   text-rendering:optimizeLegibility;
   -webkit-text-size-adjust:100%;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-behavior:smooth;
   scroll-padding-top:calc(var(--header-height) + 1.5rem);
}


body {
   min-height:100vh;
   background-color:var(--ground);
   color:var(--text-primary);
   font-family:var(--roki-0e8);
   font-size:var(--roki-1d0);
   line-height:1.65;
   display:flex;
   flex-direction:column;
   overflow-x:hidden;
   position:relative;

}


main {
   flex:1 0 auto;
   position:relative;
   width:100%;
   z-index:1;
}


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


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


h1, h2, h3, h4, h5, h6 {
   font-family:var(--roki-bc5);
   font-weight:500;
   color:var(--text-primary);
   line-height:1.2;
   text-wrap:balance;
   letter-spacing:0.02em;
}


h1 {
   font-size:var(--roki-983);
   line-height:1.1;

   letter-spacing:0.03em;
}


h2 {
   font-size:var(--roki-fdd);
   line-height:1.15;
}


h3 {
   font-size:var(--roki-824);
   line-height:1.25;
}


h4 {
   font-size:var(--roki-8e4);
   line-height:1.3;
}


h5 { font-size:var(--roki-e8b); }


h6 {
   font-size:var(--roki-1d0);
   font-family:var(--roki-f7a);
   letter-spacing:0.06em;
   text-transform:uppercase;
}


p {
   max-width:66ch;
   color:var(--text-primary);
}


p.lead {
   font-size:var(--roki-e8b);
   line-height:1.55;
   color:var(--text-primary);
}


p.muted { color:var(--text-muted); }


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


a {
   color:var(--accent);
   text-decoration:underline;
   text-decoration-thickness:1px;
   text-underline-offset:3px;
   transition:color var(--dur-instant) var(--ease-standard),
                     text-decoration-color var(--dur-instant) var(--ease-standard);
}


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


a:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:4px;
}


ul, ol { padding-left:1.4em; }


li { margin-bottom:0.4em; }


blockquote {
   border-left:2px solid var(--accent);
   padding:var(--space-s) var(--space-l);
   margin:var(--space-l) 0;
   background-color:var(--surface-dark);
   font-style:italic;
   color:var(--text-primary);
}


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


.mono-num {
   font-family:var(--roki-f7a);
   font-variant-numeric:tabular-nums;
   letter-spacing:-0.01em;
   white-space:normal;
   display:inline-block;
}


.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:fixed;
   top:var(--space-s);
   left:var(--space-s);
   z-index:1000;
   background:var(--accent);
   color:var(--surface-dark);
   padding:var(--space-xs) var(--space-m);
   font-family:var(--roki-f7a);
   font-size:var(--step--1);
   font-weight:500;
   text-decoration:none;
   border-radius:var(--radius-s);
   transform:translateY(-160%);
   transition:transform var(--dur-fast) var(--ease-standard);
   box-shadow:var(--shadow-deep);
}


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


.container {
   width:100%;
   max-width:var(--content-max);
   margin-left:auto;
   margin-right:auto;
   padding-left:var(--space-m);
   padding-right:var(--space-m);
   box-sizing:border-box;
}


.site-header-inner.container {
   max-width:var(--content-max);
   padding-left:var(--space-m);
   padding-right:var(--space-m);
}


.container-narrow { max-width:var(--content-narrow); }


.container-compact { max-width:var(--content-compact); }


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


.flex {
   display:flex;
   gap:var(--space-m);
}


.flow > * + * { margin-top:var(--space-m); }


.flow-l > * + * { margin-top:var(--space-l); }


.flow-xl > * + * { margin-top:var(--space-xl); }


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


.seal-mark {
   display:inline-flex;
   align-items:center;
   justify-content:center;
   position:relative;
   border-radius:var(--radius-seal);
   border:1px solid var(--accent);
   background:radial-gradient(circle at center, var(--surface-mid) 0%, var(--surface-dark) 100%);

   color:var(--accent);
   padding:var(--space-xs);
   box-shadow:0 0 0 3px var(--surface-dark), 0 0 0 4px var(--accent-dim), var(--shadow-accent);
   user-select:none;
   flex-shrink:0;
}


.seal-mark-inner {
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   text-align:center;
   border:1px dashed rgba(212, 168, 83, 0.45);
   border-radius:var(--radius-seal);
   width:100%;
   height:100%;
   padding:0.5rem;
}


.seal-mark-brand {
   font-family:var(--roki-bc5);
   font-size:0.625rem;
   font-weight:700;
   letter-spacing:0.14em;
   text-transform:uppercase;
   color:#F8DA93;
   line-height:1.1;
}


.seal-mark-sub {
   font-family:var(--roki-f7a);
   font-size:0.5rem;
   letter-spacing:0.1em;
   text-transform:uppercase;
   color:var(--text-muted);
   margin-top:2px;
}


.seal-mark-date {
   font-family:var(--roki-f7a);
   font-size:0.5625rem;
   color:var(--accent-light);
   margin-top:2px;
   font-weight:500;
}


@media (prefers-reduced-motion: no-preference) {
   @view-transition { navigation:auto; }


   ::view-transition-old(root) { animation:240ms cubic-bezier(0.3, 0, 0.8, 0.15) both vt-fade-out; }


   ::view-transition-new(root) { animation:280ms cubic-bezier(0, 0, 0.2, 1) 40ms both vt-fade-in; }


   @keyframes vt-fade-out {
      from { opacity: 1; transform: scale(1); }
      to { opacity: 0; transform: scale(0.99); }
   }


   @keyframes vt-fade-in {
      from { opacity: 0; transform: scale(1.01); }
      to { opacity: 1; transform: scale(1); }
   }


   .site-header { view-transition-name:site-header; }


   .brand { view-transition-name:site-brand; }
}


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