
:root {
  --ground:#fff;
  --surface:#f0f0f0;
  --surface-2:#dedede;
  --line:#bababa;
  --ink-soft:#4d4d4d;
  --ink:#292929;
  --accent:#3a5a8c;
  --accent-ink:#fff;

  /* Additional utility tokens strictly on the same hue */
  --surface-translucent:rgba(255, 255, 255, 0.94);
  --surface-dim:rgba(240, 240, 240, 0.85);
  --line-light:rgba(186, 186, 186, 0.45);

  --focus-ring:#3a5a8c;

  /* Typography Stacks */
  --togi-1f5:'Fraunces', "Fraunces Fallback", Georgia, serif;
  --togi-13c:'Zilla Slab', 'Zilla Slab Fallback', Georgia, serif;
  --togi-41f:"JetBrains Mono", "JetBrains Mono Fallback", Consolas, monospace;

  /* Fluid Display Scale */
  --step--1:clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);

  --togi-f8b:clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --togi-e63:clamp(1.1875rem, 1.12rem + 0.36vw, 1.375rem);
  --togi-10f:clamp(1.4375rem, 1.32rem + 0.6vw, 1.75rem);
  --togi-7ed:clamp(1.8125rem, 1.62rem + 1.0vw, 2.375rem);
  --togi-d63:clamp(2.25rem, 1.95rem + 1.6vw, 3.125rem);
  --togi-5a5:clamp(2.75rem, 2.3rem + 2.4vw, 4.25rem);
  --togi-721:clamp(3.25rem, 2.6rem + 3.4vw, 5.5rem);

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

  /* Measure & Layout Constrains */
  --measure-prose:65ch;
  --measure-short:42ch;
  --max-content:1240px;
  --max-reading:880px;
  --rail-width:76px;
  --dock-height:64px;

  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:4px;

  /* Motion & Transition Tokens */
  --ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --ease-out:cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:140ms;
  --duration-medium:220ms;
  --duration-slow:400ms;

  /* Elevation Shadows strictly restrained */
  --shadow-subtle:0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-card:0 2px 8px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.04);
}

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

* {
  margin:0;
  padding:0;
}

html {
  -webkit-text-size-adjust:100%;
  tab-size:4;
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-xl);
  background-color:var(--ground);
  color:var(--ink);
}

body {
  font-family:var(--togi-13c);
  font-size:var(--togi-f8b);
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  background-color:var(--ground);
  min-height:100vh;
  min-height:100svh;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  body {
    padding-bottom:0;
    padding-left:var(--rail-width);
  }
  .site-shell {
    padding-left:0;
  }
  .container,
  .reading-container,
  .legal-margin-layout,
  .legal-doc-card-layout,
  .legal-statute-layout {
    box-sizing:border-box;
  }
}

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

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

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

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

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

ul,
ol {
  list-style:none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--togi-1f5);
  font-weight:700;
  line-height:1.15;
  color:var(--ink);
  letter-spacing:-0.018em;
  text-wrap:balance;
  overflow-wrap:break-word;
}

h1 {
  font-size:var(--togi-5a5);
  font-weight:800;

  line-height:1.05;
  letter-spacing:-0.025em;
  max-width:18ch;
}

h2 {
  font-size:var(--togi-7ed);
  line-height:1.18;
  letter-spacing:-0.02em;
  max-width:26ch;
}

h3 {
  font-size:var(--togi-10f);
  line-height:1.25;
  letter-spacing:-0.015em;
}

h4 {
  font-size:var(--togi-e63);
  line-height:1.35;
}

p {
  max-width:var(--measure-prose);
  color:var(--ink);
}

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

.lede {
  font-size:var(--togi-e63);
  line-height:1.5;
  color:var(--ink);
  max-width:var(--measure-prose);
}

.caption {
  font-size:var(--step--1);
  line-height:1.45;
  color:var(--ink-soft);
  max-width:var(--measure-short);
}

.meta-num,
.tabular {
  font-family:var(--togi-41f);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.code-inline {
  font-family:var(--togi-41f);
  font-size:0.9em;
  padding:0.15em 0.35em;
  background-color:var(--surface);
  border:1px solid var(--line-light);
  border-radius:var(--radius-xs);
}

blockquote {
  border-left:2px solid var(--accent);
  padding-left:var(--space-lg);
  margin:var(--space-xl) 0;
  font-style:italic;
  color:var(--ink);
}

:focus-visible {
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}

.skip-link {
  position:absolute;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:9999;
  background-color:var(--ink);
  color:var(--ground);
  padding:var(--space-xs) var(--space-md);
  font-family:var(--togi-41f);
  font-size:var(--step--1);
  border-radius:var(--radius-xs);
  transform:translateY(-160%);
  transition:transform var(--duration-fast) var(--ease-out);
  text-decoration:none;
}

.skip-link:focus {
  transform:translateY(0);
}

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

.site-shell {
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.site-main {
  flex:1 0 auto;
}

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

@media (min-width: 768px) {
  .container {
    padding-left:var(--space-xl);
    padding-right:var(--space-xl);
  }
}

@media (min-width: 1200px) {
  .container {
    padding-left:var(--space-2xl);
    padding-right:var(--space-2xl);
  }
}

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

/* Screen Reader Only Utility */
.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;
}

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

  [data-speed],
  [data-lag],
  [data-depth] {
    transform:none !important;
  }
}
