
:root {
   --bg-ground:#4a1f22;
   --bg-ground-dark:#371417;
   --bg-ground-deep:#280d10;
   --bg-surface:#58262a;
   --bg-surface-soft:#632c31;

   --ink-cream:#f6efe6;
   --ink-muted:#e6dad2;
   --ink-dim:#cfc2ba;

   --accent-gold:#c99b4a;
   --accent-gold-hover:#ddb05c;
   --accent-gold-soft:rgba(201, 155, 74, 0.15);
   --accent-gold-glow:rgba(201, 155, 74, 0.35);

   --line-ledger:rgba(201, 155, 74, 0.28);
   --line-border:rgba(246, 239, 230, 0.14);

   --line-border-strong:rgba(246, 239, 230, 0.24);

   --status-err:#e06d60;
   --status-ok:#5fa878;

   --wigu-441:'Zilla Slab', Georgia, 'Times New Roman', serif;
   --wigu-2ad:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --wigu-256:'JetBrains Mono', Consolas, 'Liberation Mono', Menlo, monospace;

   --fs-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
   --fs-sm:clamp(0.8438rem, 0.81rem + 0.2vw, 0.9375rem);
   --fs-base:clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
   --fs-md:clamp(1.15rem, 1.08rem + 0.35vw, 1.3125rem);
   --fs-lg:clamp(1.35rem, 1.25rem + 0.6vw, 1.625rem);
   --fs-xl:clamp(1.65rem, 1.5rem + 1vw, 2.15rem);
   --fs-2xl:clamp(2rem, 1.75rem + 1.6vw, 2.85rem);
   --fs-display:clamp(2.35rem, 1.95rem + 2.5vw, 3.85rem);

   --lh-tight:1.15;
   --lh-snug:1.28;
   --lh-normal:1.55;
   --lh-relaxed:1.68;

   --tracking-tight:-0.025em;
   --tracking-normal:0em;
   --tracking-wide:0.04em;
   --tracking-widest:0.08em;

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

   --space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
   --space-xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.6875rem);
   --space-sm:clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
   --space-md:clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
   --space-lg:clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
   --space-xl:clamp(2.5rem, 2.1rem + 1.8vw, 3.5rem);
   --space-2xl:clamp(3.5rem, 3rem + 2.5vw, 5rem);

   --site-max-width:1280px;
   --site-frame-pad:clamp(12px, 10px + 1vw, 24px);

   --dur-fast:140ms;
   --dur-mid:240ms;
   --dur-slow:400ms;
   --ease-standard:cubic-bezier(0.2, 0, 0, 1);
   --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);

   --shadow-subtle:0 4px 18px rgba(20, 5, 7, 0.35);
   --shadow-raised:0 10px 32px rgba(15, 3, 5, 0.48);
   --shadow-dock:0 -4px 20px rgba(15, 3, 5, 0.4);
}

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

html {
   font-size:16px;
   background-color:var(--bg-ground-deep);
   color:var(--ink-cream);
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-behavior:smooth;
}

body {
   font-family:var(--wigu-2ad);
   font-size:var(--fs-base);
   line-height:var(--lh-normal);
   color:var(--ink-cream);
   background-color:var(--bg-ground);
   min-height:100vh;
   display:flex;
   flex-direction:column;
   position:relative;
   overflow-x:hidden;
}

body::before {
   content:"";
   position:fixed;
   inset:0;
   pointer-events:none;
   background-image:
      linear-gradient(to right, var(--line-ledger) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line-ledger) 1px, transparent 1px);
   background-size:80px 80px;
   opacity:0.22;
   z-index:0;
}

.site-boxed-wrapper {
   position:relative;
   z-index:1;
   width:100%;
   max-width:var(--site-max-width);
   margin-inline:auto;
   min-height:100vh;
   display:flex;
   flex-direction:column;
   background-color:var(--bg-ground);
   border-inline:1px solid var(--line-border-strong);
   box-shadow:0 0 40px rgba(15, 4, 6, 0.6);
   overflow:clip;
}

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

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

a {
   color:var(--accent-gold);
   text-decoration:underline;
   text-underline-offset:3px;
   transition:color var(--dur-fast) var(--ease-standard);
}

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

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
   outline:2px solid var(--accent-gold);
   outline-offset:3px;
}

h1, h2, h3, h4, h5, h6 {
   font-family:var(--wigu-441);
   font-weight:700;
   line-height:var(--lh-tight);
   color:var(--ink-cream);
   letter-spacing:var(--tracking-tight);
   text-wrap:balance;
}

h1 {

   font-size:var(--fs-display);
}

h2 {
   font-size:var(--fs-2xl);
}

h3 {
   font-size:var(--fs-xl);
}

h4 {
   font-size:var(--fs-lg);
}

p, li, dd {
   font-size:var(--fs-base);
   color:var(--ink-muted);
   line-height:var(--lh-normal);
}

p + p {
   margin-top:1em;
}

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

em, i {
   font-style:italic;
}

code, kbd, samp, pre {
   font-family:var(--wigu-256);
   font-size:0.9em;
}

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

ul li + li, ol li + li {
   margin-top:0.4em;
}

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

.skip-link {
   position:absolute;
   top:-100px;
   left:16px;
   z-index:1000;
   background-color:var(--accent-gold);
   color:var(--bg-ground-deep);
   font-family:var(--wigu-256);
   font-weight:600;
   font-size:var(--fs-sm);
   padding:10px 18px;
   border-radius:var(--radius-xs);
   text-decoration:none;
   box-shadow:var(--shadow-raised);
   transition:top var(--dur-fast) var(--ease-snappy);
}

.skip-link:focus {
   top:16px;
}

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

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

.container {
   width:100%;
   max-width:var(--site-max-width);
   margin-inline:auto;
   padding-inline:var(--site-frame-pad);
}

.prose {
   max-width:68ch;
   line-height:var(--lh-relaxed);
}

.prose p {
   margin-bottom:1.2em;
}

.prose h2, .prose h3 {
   margin-top:1.8em;
   margin-bottom:0.6em;
}

.ledger-rule {
   border:0;
   height:1px;
   background:var(--line-ledger);
   position:relative;
   margin-block:var(--space-md);
}

.ledger-rule::after {
   content:"";
   position:absolute;
   right:0;
   top:-2px;
   width:5px;
   height:5px;
   background:var(--accent-gold);
}

.plate-section {
   position:relative;
   padding-block:var(--space-xl);
   border-bottom:1px solid var(--line-ledger);
}

.plate-figure {
   width:100%;
   margin:0 0 var(--space-md) 0;
   overflow:hidden;
   background-color:var(--bg-ground-dark);
   border:1px solid var(--line-border);
   position:relative;
}

.plate-figure img {
   width:100%;
   height:auto;
   display:block;
   object-fit:cover;
}

.plate-caption {
   max-width:48ch;
   padding-top:var(--space-xs);
   border-top:1px solid var(--line-ledger);
}

.plate-lead {
   font-family:var(--wigu-441);
   font-size:var(--fs-md);
   font-weight:700;
   color:var(--ink-cream);
   line-height:var(--lh-snug);
   display:block;
   margin-bottom:var(--space-2xs);
}

.plate-text {
   font-size:var(--fs-base);
   color:var(--ink-muted);
   line-height:var(--lh-normal);
}

@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;
   }
   .marquee-track {
      animation:none !important;
   }
}
