:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

#nav-main > ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  font-size: 120%;
  font-variant: small-caps;
  font-weight: bold; }
  #nav-main > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0.5em;
    border-bottom: solid 3px rgba(0, 0, 0, 0);
    border-radius: 3px; }
    #nav-main > ul > li:first-of-type {
      border-left: none; }
    #nav-main > ul > li:last-of-type {
      border-right: none; }
    #nav-main > ul > li.current, #nav-main > ul > li:hover {
      border-bottom-color: var(--color-accent); }
    #nav-main > ul > li a {
      text-decoration: none;
      color: white; }

:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

#nav-sub {
  align-self: start;
  margin: 1em 0 0 0;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  font-size: 90%; }
  #nav-sub > ul {
    margin: 0;
    padding: 0; }
    #nav-sub > ul ul {
      margin: 0;
      padding: 0 0 0 1em; }
  #nav-sub ul {
    list-style-type: none; }
    #nav-sub ul > li {
      margin: 0;
      padding: 0; }
      #nav-sub ul > li a {
        display: block;
        padding: .35rem .55rem;
        text-decoration: none;
        color: var(--color-text-primary);
        border-radius: 8px; }
        #nav-sub ul > li a:hover {
          color: var(--color-accent-dark);
          background: var(--color-accent-soft); }
      #nav-sub ul > li.active > a {
        color: var(--color-accent-dark);
        background: var(--color-accent-soft); }
      #nav-sub ul > li.current > a {
        font-weight: bold;
        color: var(--color-accent-dark);
        background: var(--color-accent-soft);
        border-right: 3px solid var(--color-accent); }

:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

#nav-breadcrumbs > ul {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0 0.5em; }
  #nav-breadcrumbs > ul > li {
    display: inline-block;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0; }
  #nav-breadcrumbs > ul > li::before {
    display: inline-block;
    content: "\226B";
    margin: 0;
    padding: 0 0.5em 0 0; }
  #nav-breadcrumbs > ul a {
    text-decoration: none; }
    #nav-breadcrumbs > ul a:hover {
      text-decoration: underline; }

:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

#nav-quick-links > ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  #nav-quick-links > ul > li {
    margin: 0;
    padding: 0;
    line-height: 1.5; }
  #nav-quick-links > ul a {
    text-decoration: none;
    color: inherit; }
    #nav-quick-links > ul a:hover {
      text-decoration: underline; }

:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

#nav-social > ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  #nav-social > ul > li {
    margin: 0;
    padding: 0;
    line-height: 1.5; }
  #nav-social > ul a {
    text-decoration: none;
    color: inherit; }
    #nav-social > ul a:hover {
      text-decoration: underline; }

:root {
  --color-gradient-1: #131313;
  --color-gradient-2: #4c4c4c;
  --color-black: #202020;
  --color-grey: #8B8885;
  --color-background: #F8F8F7;
  --color-surface: #FFFFFF;
  --color-border: #D9D7D5;
  --color-accent-dark: #B45309;
  --color-accent: #D97706;
  --color-accent-light: #F59E0B;
  --color-accent-soft: #FFF7ED;
  --color-text-primary: #202020;
  --color-text-secondary: #4c4c4c;
  --color-text-inverse: #FFFFFF;
  --shadow-card: 0 4px 16px rgba( 0, 0, 0, 0.10 ); }

body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text-primary);
  background: var(--color-background);
  line-height: 1.55; }

#page-header {
  background: linear-gradient(90deg, var(--color-gradient-1), var(--color-gradient-2));
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-card);
  overflow: hidden; }
  #page-header > * {
    max-width: 80em;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: space-between; }
  #page-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--color-accent);
    text-decoration: none; }

#page-body {
  max-width: 80em;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-column-gap: 1rem;
  grid-row-gap: 0; }
  #page-body a.section-marker {
    font-size: 60%;
    color: var(--color-text-secondary);
    text-decoration: none; }
  #page-body h1 {
    margin-top: 0; }
  #page-body h1::after,
  #page-body h2::after,
  #page-body h3::after,
  #page-body h4::after {
    content: "";
    display: block;
    height: .2rem;
    margin-top: .4rem;
    background: var(--color-accent); }
  #page-body h1::after {
    width: 4rem; }
  #page-body h2::after {
    width: 3rem; }
  #page-body h3::after {
    width: 2rem; }
  #page-body h4::after {
    width: 1rem; }
  #page-body p.last-modification {
    color: var(--color-text-secondary); }

#page-body > #nav-breadcrumbs {
  grid-row: 1;
  grid-column: 1 / span 2; }

#page-body.page-body-normal > article {
  grid-row: 2;
  grid-column: 1 / span 2; }

#page-body.page-body-normal > p.last-modification {
  grid-row: 3;
  grid-column: 1 / span 2; }

#page-body.page-body-menu > #nav-sub {
  grid-row: 2;
  grid-column: 1; }

#page-body.page-body-menu > article {
  grid-row: 2;
  grid-column: 2; }

#page-body.page-body-menu > p.last-modification {
  grid-row: 3;
  grid-column: 2; }

#page-footer {
  margin: 0;
  padding: 0.5em 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--color-gradient-1), var(--color-gradient-2));
  color: var(--color-text-inverse); }
  #page-footer > * {
    max-width: 80em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    padding: 0;
    overflow: hidden; }
  #page-footer h1, #page-footer h2, #page-footer p {
    margin: 0; }
  #page-footer a {
    text-decoration: none;
    color: inherit; }
  #page-footer a:hover {
    text-decoration: underline; }

.skip-link {
  display: none; }

.grid-container-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr); }

.grid-container-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); }

.box-normal,
.box-info,
.box-notice {
  margin: 0.5em;
  padding: 1em;
  border-radius: 14px;
  box-shadow: var(--shadow-card); }
  .box-normal h1, .box-normal h2, .box-normal h3, .box-normal h4, .box-normal h5, .box-normal h6,
  .box-info h1,
  .box-info h2,
  .box-info h3,
  .box-info h4,
  .box-info h5,
  .box-info h6,
  .box-notice h1,
  .box-notice h2,
  .box-notice h3,
  .box-notice h4,
  .box-notice h5,
  .box-notice h6 {
    margin: 0; }

.box-normal {
  border: 1px solid var(--color-border);
  background: var(--color-surface); }

.box-info {
  border-top: 6px solid var(--color-accent);
  background: var(--color-surface); }

.box-notice {
  border-left: 6px solid var(--color-accent);
  background: linear-gradient(135deg, var(--color-accent-soft), #fff); }