@font-face {
  font-display: swap;
  font-family: Overpass;
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/overpass-v19-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Overpass;
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/overpass-v19-latin-600.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Overpass;
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/overpass-v19-latin-800.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: Castoro;
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/castoro-v20-latin-regular.woff2") format("woff2");
}

*, :after, :before {
  box-sizing: border-box;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

::-moz-focus-inner {
  border: 0;
}

body, h1, h2, h3, h4, h5, h6, blockquote, p, pre, dl, dd, ol, ul, figure, hr, fieldset, legend {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

button {
  font: inherit;
}

button:hover {
  cursor: pointer;
}

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

svg {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

:root {
  --flow-space: 2em;
  --spacing--section-24: clamp(1em,.78vw + .8em,1.5em);
  --spacing--section-32: clamp(1em,1.56vw + .6em,2em);
  --spacing--section-48: clamp(1.88em,1.75vw + 1.42em,3em);
  --spacing--section-60: clamp(3em,1.17vw + 2.7em,3.75em);
  --spacing--section-80: clamp(3.75em,1.95vw + 3.25em,5em);
  --spacing--section-120: clamp(5em,3.9vw + 3.99em,7.5em);
  --font-size--1: clamp(.9375rem, .9119rem + .1136vw, 1rem);
  --font-size-0: clamp(1.125rem, 1.0739rem + .2273vw, 1.25rem);
  --font-size-1: clamp(1.35rem, 1.2631rem + .3864vw, 1.5625rem);
  --font-size-2: clamp(1.62rem, 1.4837rem + .6057vw, 1.9531rem);
  --font-size-3: clamp(1.944rem, 1.7405rem + .9044vw, 2.4414rem);
  --font-size-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --font-size-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --color-beige: #fef8ec;
  --color-purple: #551266;
  --color-blue: #0400ff;
  --color-red: #b60000;
  --color-orange: #de3000;
  --color-yellow: #f78c00;
  --color-green: #00a491;
  --color-white: #fff;
  --color-black: #000;
  --color-gray-dark: #94918f;
  --color-gray-light: #f2f1f4;
  --color-text: var(--color-black);
  --color-link: var(--color-blue);
  --color-accent: var(--color-purple);
  --color-conform: #cff0dc;
  --color-issue: #f7e4e4;
  --color-untagged: #bc1414;
  --color-section-colored: var(--color-gray-light);
}

.flow > * + * {
  margin-block-start: var(--flow-space);
}

.flow-1 {
  --flow-space: 1em;
}

.page {
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  display: grid;
}

.page--reduced {
  grid-template-rows: 1fr auto;
}

.content-grid {
  --padding-inline: 1rem;
  --content-max-width: 41rem;
  --breakout-max-width: 85rem;
  --breakout-size: calc(var(--breakout-max-width) - var(--content-max-width));
  grid-template-columns: /* keep outer padding */
    [full-width-start] minmax(var(--padding-inline), 1fr)
    /* start breakout and content */
    [breakout-start] 0
    /* size of content */
    [content-start] min(100% - (var(--padding-inline) * 2),
        var(--content-max-width))
    [content-end]
    /* size of breakout */
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
  display: grid;
}

.content-grid > :not(.breakout, .full-width), .full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.content-grid > .breakout, .full-width > .breakout {
  grid-column: breakout;
}

.content-grid > .full-width, .full-width > .full-width {
  grid-column: full-width;
  grid-template-columns: inherit;
  display: grid;
}

.column-grid {
  --col-grid-column-max: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--column-min-width), 100%), var(--col-grid-column-max)));
  gap: var(--flow-space);
  display: grid;
}

.column-grid.column-grid--center {
  justify-content: center;
}

.grid-two-col {
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  align-items: baseline;
  gap: 4px 16px;
  display: grid;
}

.flex-spaced {
  justify-content: space-between;
  align-items: baseline;
  gap: 32px;
  display: flex;
}

.flex-column {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.twocolumn {
  column-count: 1;
  column-gap: var(--flow-space);
}

@media (width >= 660px) {
  .twocolumn {
    column-count: 2;
  }
}

body {
  font-family: Overpass, sans-serif;
  font-weight: 400;
  font-size: var(--font-size-0);
  color: #323130;
  background-color: #fff;
  line-height: 1.4;
}

h1, h2 {
  font-family: Castoro, serif;
  line-height: 1.1;
}

h3, h4, h5 {
  font-family: Overpass, sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

h1 {
  font-size: var(--font-size-5);
}

.copy-h2, h2 {
  font-size: var(--font-size-4);
}

.copy-h3, h3 {
  font-size: var(--font-size-2);
}

.copy-h4, h4 {
  font-size: var(--font-size-1);
}

.copy-h5, h5 {
  font-size: var(--font-size-0);
}

strong {
  font-family: Overpass, sans-serif;
  font-weight: 600;
}

.copy-list, .copy ul {
  margin-left: 1.25rem;
}

pre, code {
  white-space: nowrap;
}

pre {
  background-color: var(--color-section-colored);
  padding: 12px;
  font-size: 95%;
}

@media (width <= 550px) {
  h1, h2, h3, h4 {
    hyphens: auto;
  }
}

a {
  --color-link: var(--color-text);
  color: var(--color-link);
  transition: color .225s ease-in, background-color .225s ease-in, outline .225s linear;
}

a:hover, a:focus-visible {
  outline-offset: 2px;
  outline: 1px solid;
}

button {
  transition: color .225s ease-in, background-color .225s ease-in, outline .225s ease-in;
}

.button {
  background-color: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  border-radius: 16px;
  padding: 12px 24px 10px;
  text-decoration: none;
  display: inline-block;
}

.button:hover, .button:focus-visible {
  outline-color: var(--color-accent);
  outline-width: 2px;
}

.found-total .found-total__list, .found-total .found-total__range-heading {
  margin-top: 24px;
}

.found-total__list {
  grid-template-columns: 1fr min-content;
  column-gap: 32px;
  display: grid;
}

.found-total__pair {
  grid-column: 1 / 3;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--color-accent);
  font-size: var(--font-size--1);
  padding: 12px 4px;
  display: grid;
}

.found-total__pair:last-child {
  border-bottom: 1px solid var(--color-accent);
}

.found-total__pair dd {
  justify-self: end;
}

.hero {
  padding-block: var(--spacing--section-60);
  background-color: var(--color-beige);
}

.hero__byline {
  font-size: var(--font-size-4);
  color: var(--color-accent);
  margin-top: 32px;
  line-height: 1.2;
}

.hero__img {
  object-fit: cover;
  max-height: 530px;
  margin-left: auto;
}

.hero__credit {
  border-bottom: 1px solid var(--color-black);
  margin-top: 36px;
  margin-bottom: 24px;
  padding-bottom: 16px;
}

.card {
  background-color: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  padding: 32px;
}

@media (width <= 370px) {
  .card {
    padding: 24px;
  }
}

.card--accent {
  background-color: var(--color-accent);
  color: #fff;
}

.table-container {
  --table-bg-parent: #fff;
  background: linear-gradient(to right, var(--table-bg-parent) 30%, #fff0),
        linear-gradient(to right, #fff0, var(--table-bg-parent) 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%,
        #0003,
        #0000),
        radial-gradient(farthest-side at 100% 50%,
            #0003,
            #0000)
        0 100%;
  background-repeat: no-repeat;
  background-color: var(--table-bg-parent);
  background-position: 0 0, 100%, 0 0, 100%;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  overflow: auto;
}

table {
  width: 100%;
  min-width: var(--table-min-width);
  border-collapse: collapse;
  font-size: var(--font-size--1);
  text-align: right;
  margin-bottom: .5rem;
}

th, td {
  padding: 16px 8px;
}

thead th {
  vertical-align: bottom;
}

th[scope="row"] {
  font-weight: 600;
}

tr {
  border-bottom: 1px solid var(--color-gray-dark);
}

@media (width <= 700px) {
  tbody th {
    max-width: var(--table-1st-col-max-width);
  }
}

.cell-left {
  text-align: left;
}

.cell-center {
  text-align: center;
}

.table--sticky thead th:first-child, .table--sticky th[scope="row"] {
  background-color: var(--color-white);
  position: sticky;
  top: 0;
  left: 0;
}

@media (width <= 900px) {
  .table--producer th[scope="col"]:has(span) {
    width: 170px;
  }
}

.table-total__label {
  background-color: var(--table-total-bg);
  white-space: nowrap;
  border-radius: 4px;
  padding: 5px 8px 4px;
  line-height: 1;
  display: inline-block;
}

th[scope] span {
  background-color: var(--table-total-bg);
  white-space: nowrap;
  background-color: var(--highlight);
  color: var(--highlightColor);
  border-radius: 4px;
  line-height: 1;
  display: inline-block;
}

.table-total__label--conform {
  --table-total-bg: var(--color-conform);
}

.table-total__label--issue {
  --table-total-bg: var(--color-issue);
}

.table-total__label--untagged {
  --table-total-bg: var(--color-untagged);
  color: #fff;
}

.table-total {
  white-space: nowrap;
}

.table-total__total-number {
  font-size: var(--font-size-2);
  font-weight: 800;
}

.table-total__total-unit {
  font-size: var(--font-size-0);
  font-weight: 600;
}

.request .request__note {
  font-weight: 400;
  display: block;
}

.result-type {
  padding: 5px 8px 4px;
}

.toc[aria-expanded="false"] {
  width: 0 !important;
}

.toc[aria-expanded="false"] .toc__list {
  display: none;
}

.page {
  --toc-width: 440px;
}

@media screen and (width >= 1900px) {
  .page {
    --toc-width: 520px;
  }
}

.page-wrapper {
  position: relative;
}

@media screen and (width >= 1024px) {
  .page-wrapper:has(.toc[aria-expanded="true"]) main, .page-wrapper:has(.toc[aria-expanded="true"]) + footer {
    margin-left: var(--toc-width);
  }
}

.toc__button-toggle {
  z-index: 101;
  cursor: pointer;
  border: 1px solid var(--color-accent);
  background-color: var(--color-white);
  outline: 1px solid var(--color-white);
  align-items: center;
  gap: 8px;
  padding: 8px 12px 3px;
  line-height: 1;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.toc__button-toggle:hover, .toc__button-toggle:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: -3px;
}

.toc__button-toggle[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
}

.toc__button-toggle[aria-pressed="true"]:hover, .toc__button-toggle[aria-pressed="true"]:focus-visible {
  outline-color: #fff;
}

.toc__button-toggle * {
  pointer-events: none;
}

.toc__button-toggle-icon svg {
  width: 20px;
  height: 20px;
}

@media screen and (width <= 1023px) {
  .toc__button-toggle-label {
    clip-path: inset(50%);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
}

.toc {
  z-index: 100;
  width: 100%;
  max-width: var(--toc-width);
  background: var(--color-white);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.toc:after {
  content: "";
  background: var(--color-accent);
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 1px 3px 1px #3c404333;
}

@media screen and (width <= 1023px) {
  .toc:before {
    content: "";
    pointer-events: none;
    width: 0;
    position: fixed;
    top: 0;
    left: 0;
  }

  .toc[aria-expanded="true"]:before {
    pointer-events: auto;
    background-color: #0009;
    width: 100%;
    height: 100%;
  }
}

.toc__canvas {
  width: inherit;
  max-width: inherit;
  background: var(--color-gray-light);
  padding-block: 4rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.toc__list-wrapper {
  background-color: #0000;
  background-image: linear-gradient(#0000000d 30%, #fff0), linear-gradient(#fff0, #0000000d 70%), radial-gradient(farthest-side at 25% 0, #0003, #0000), radial-gradient(farthest-side at 20% 100%, #0003, #0000);
  background-position: top, bottom, top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 10px, 100% 10px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
  background-origin: padding-box, padding-box, padding-box, padding-box;
  background-clip: border-box, border-box, border-box, border-box;
  padding-block: 16px;
}

.toc__list, .toc__list ul {
  padding-left: 1.25rem;
  list-style: none;
}

.toc__list {
  --flow-space: 1em;
  height: calc(100vh - 7rem);
  padding-right: .75rem;
  overflow: auto;
}

.toc__sublist {
  --flow-space: .25em;
  font-size: var(--font-size--1);
}

.toc__item {
  padding: 4px 0 3px;
  text-decoration: none;
  display: inline-block;
}

.toc__item[aria-current] {
  text-decoration: underline;
}

.bg-gray-light {
  background-color: var(--color-gray-light);
}

.visually-hidden {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.text-center {
  text-align: center;
}