/* === CSS: a-reset.css [root] === */
@font-face {
  font-family: "Varvetica";
  src: url("/fonts/Helvetica-Now-Var.ttf");
}
@font-face {
  font-family: "Lato";
  src: url("/fonts/Lato-Bold.ttf");
}
@font-face {
  font-family: "Chalkduster";
  src: url("/fonts/Chalkduster.ttf");
}

/* css clean up */

* {
  font-family: "Varvetica", sans-serif;
  font-weight: inherit;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;

  /* user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  -webkit-user-drag: none; */

  word-wrap: break-word;

  letter-spacing: 5%;

}

/* html, body { overflow-anchor: none; } */

.debug-spacer {
  height: 30rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  cursor: default;
}

.inpextra {
  position: fixed;
  left: -500vw;
  right: -500vw;
  opacity: 0;
  pointer-events: none;
}

a * {
  cursor: pointer;
}
a {
  text-decoration: unset;
  color: black;
}

.for-inner {
  position: relative;
  z-index: 0;
}
.for-inner * {
  z-index: 1;
  position: relative;
}
/* === CSS: c-sizing.css [root] === */
:root {
  --size-25: 0.25rem;
  --size-50: 0.50rem;
  --size-75: 0.75rem;
  --size-100: 1.00rem;
  --size-125: 1.25rem;
  --size-150: 1.50rem;
  --size-175: 1.75rem;
  --size-200: 2.00rem;
  --size-225: 2.25rem;
  --size-250: 2.50rem;
  --size-275: 2.75rem;
  --size-300: 3.00rem;
  --size-325: 3.25rem;
  --size-350: 3.50rem;
  --size-375: 3.75rem;
  --size-400: 4.00rem;
  --size-425: 4.25rem;
  --size-450: 4.50rem;
  --size-475: 4.75rem;
  --size-500: 5.00rem;
  --size-525: 5.25rem;
  --size-550: 5.50rem;
  --size-575: 5.75rem;
  --size-600: 6.00rem;
  --size-625: 6.25rem;
  --size-650: 6.50rem;
  --size-675: 6.75rem;
  --size-700: 7.00rem;
  --size-725: 7.25rem;
  --size-750: 7.50rem;
  --size-775: 7.75rem;
  --size-800: 8.00rem;
  --size-825: 8.25rem;
  --size-850: 8.50rem;
  --size-875: 8.75rem;
  --size-900: 9.00rem;
  --size-925: 9.25rem;
  --size-950: 9.50rem;
  --size-975: 9.75rem;
  --size-1000: 10.00rem;
}

.marg-25 { margin: var(--size-25); }
.marg-top-25 { margin-top: var(--size-25); }
.marg-bottom-25 { margin-bottom: var(--size-25); }
.marg-left-25 { margin-left: var(--size-25); }
.marg-right-25 { margin-right: var(--size-25); }
.marg-x-25 { margin-left: var(--size-25); margin-right: var(--size-25); }
.marg-y-25 { margin-top: var(--size-25); margin-bottom: var(--size-25); }
.marg-50 { margin: var(--size-50); }
.marg-top-50 { margin-top: var(--size-50); }
.marg-bottom-50 { margin-bottom: var(--size-50); }
.marg-left-50 { margin-left: var(--size-50); }
.marg-right-50 { margin-right: var(--size-50); }
.marg-x-50 { margin-left: var(--size-50); margin-right: var(--size-50); }
.marg-y-50 { margin-top: var(--size-50); margin-bottom: var(--size-50); }
.marg-75 { margin: var(--size-75); }
.marg-top-75 { margin-top: var(--size-75); }
.marg-bottom-75 { margin-bottom: var(--size-75); }
.marg-left-75 { margin-left: var(--size-75); }
.marg-right-75 { margin-right: var(--size-75); }
.marg-x-75 { margin-left: var(--size-75); margin-right: var(--size-75); }
.marg-y-75 { margin-top: var(--size-75); margin-bottom: var(--size-75); }
.marg-100 { margin: var(--size-100); }
.marg-top-100 { margin-top: var(--size-100); }
.marg-bottom-100 { margin-bottom: var(--size-100); }
.marg-left-100 { margin-left: var(--size-100); }
.marg-right-100 { margin-right: var(--size-100); }
.marg-x-100 { margin-left: var(--size-100); margin-right: var(--size-100); }
.marg-y-100 { margin-top: var(--size-100); margin-bottom: var(--size-100); }
.marg-125 { margin: var(--size-125); }
.marg-top-125 { margin-top: var(--size-125); }
.marg-bottom-125 { margin-bottom: var(--size-125); }
.marg-left-125 { margin-left: var(--size-125); }
.marg-right-125 { margin-right: var(--size-125); }
.marg-x-125 { margin-left: var(--size-125); margin-right: var(--size-125); }
.marg-y-125 { margin-top: var(--size-125); margin-bottom: var(--size-125); }
.marg-150 { margin: var(--size-150); }
.marg-top-150 { margin-top: var(--size-150); }
.marg-bottom-150 { margin-bottom: var(--size-150); }
.marg-left-150 { margin-left: var(--size-150); }
.marg-right-150 { margin-right: var(--size-150); }
.marg-x-150 { margin-left: var(--size-150); margin-right: var(--size-150); }
.marg-y-150 { margin-top: var(--size-150); margin-bottom: var(--size-150); }
.marg-175 { margin: var(--size-175); }
.marg-top-175 { margin-top: var(--size-175); }
.marg-bottom-175 { margin-bottom: var(--size-175); }
.marg-left-175 { margin-left: var(--size-175); }
.marg-right-175 { margin-right: var(--size-175); }
.marg-x-175 { margin-left: var(--size-175); margin-right: var(--size-175); }
.marg-y-175 { margin-top: var(--size-175); margin-bottom: var(--size-175); }
.marg-200 { margin: var(--size-200); }
.marg-top-200 { margin-top: var(--size-200); }
.marg-bottom-200 { margin-bottom: var(--size-200); }
.marg-left-200 { margin-left: var(--size-200); }
.marg-right-200 { margin-right: var(--size-200); }
.marg-x-200 { margin-left: var(--size-200); margin-right: var(--size-200); }
.marg-y-200 { margin-top: var(--size-200); margin-bottom: var(--size-200); }
.marg-225 { margin: var(--size-225); }
.marg-top-225 { margin-top: var(--size-225); }
.marg-bottom-225 { margin-bottom: var(--size-225); }
.marg-left-225 { margin-left: var(--size-225); }
.marg-right-225 { margin-right: var(--size-225); }
.marg-x-225 { margin-left: var(--size-225); margin-right: var(--size-225); }
.marg-y-225 { margin-top: var(--size-225); margin-bottom: var(--size-225); }
.marg-250 { margin: var(--size-250); }
.marg-top-250 { margin-top: var(--size-250); }
.marg-bottom-250 { margin-bottom: var(--size-250); }
.marg-left-250 { margin-left: var(--size-250); }
.marg-right-250 { margin-right: var(--size-250); }
.marg-x-250 { margin-left: var(--size-250); margin-right: var(--size-250); }
.marg-y-250 { margin-top: var(--size-250); margin-bottom: var(--size-250); }
.marg-275 { margin: var(--size-275); }
.marg-top-275 { margin-top: var(--size-275); }
.marg-bottom-275 { margin-bottom: var(--size-275); }
.marg-left-275 { margin-left: var(--size-275); }
.marg-right-275 { margin-right: var(--size-275); }
.marg-x-275 { margin-left: var(--size-275); margin-right: var(--size-275); }
.marg-y-275 { margin-top: var(--size-275); margin-bottom: var(--size-275); }
.marg-300 { margin: var(--size-300); }
.marg-top-300 { margin-top: var(--size-300); }
.marg-bottom-300 { margin-bottom: var(--size-300); }
.marg-left-300 { margin-left: var(--size-300); }
.marg-right-300 { margin-right: var(--size-300); }
.marg-x-300 { margin-left: var(--size-300); margin-right: var(--size-300); }
.marg-y-300 { margin-top: var(--size-300); margin-bottom: var(--size-300); }
.marg-325 { margin: var(--size-325); }
.marg-top-325 { margin-top: var(--size-325); }
.marg-bottom-325 { margin-bottom: var(--size-325); }
.marg-left-325 { margin-left: var(--size-325); }
.marg-right-325 { margin-right: var(--size-325); }
.marg-x-325 { margin-left: var(--size-325); margin-right: var(--size-325); }
.marg-y-325 { margin-top: var(--size-325); margin-bottom: var(--size-325); }
.marg-350 { margin: var(--size-350); }
.marg-top-350 { margin-top: var(--size-350); }
.marg-bottom-350 { margin-bottom: var(--size-350); }
.marg-left-350 { margin-left: var(--size-350); }
.marg-right-350 { margin-right: var(--size-350); }
.marg-x-350 { margin-left: var(--size-350); margin-right: var(--size-350); }
.marg-y-350 { margin-top: var(--size-350); margin-bottom: var(--size-350); }
.marg-375 { margin: var(--size-375); }
.marg-top-375 { margin-top: var(--size-375); }
.marg-bottom-375 { margin-bottom: var(--size-375); }
.marg-left-375 { margin-left: var(--size-375); }
.marg-right-375 { margin-right: var(--size-375); }
.marg-x-375 { margin-left: var(--size-375); margin-right: var(--size-375); }
.marg-y-375 { margin-top: var(--size-375); margin-bottom: var(--size-375); }
.marg-400 { margin: var(--size-400); }
.marg-top-400 { margin-top: var(--size-400); }
.marg-bottom-400 { margin-bottom: var(--size-400); }
.marg-left-400 { margin-left: var(--size-400); }
.marg-right-400 { margin-right: var(--size-400); }
.marg-x-400 { margin-left: var(--size-400); margin-right: var(--size-400); }
.marg-y-400 { margin-top: var(--size-400); margin-bottom: var(--size-400); }
.marg-425 { margin: var(--size-425); }
.marg-top-425 { margin-top: var(--size-425); }
.marg-bottom-425 { margin-bottom: var(--size-425); }
.marg-left-425 { margin-left: var(--size-425); }
.marg-right-425 { margin-right: var(--size-425); }
.marg-x-425 { margin-left: var(--size-425); margin-right: var(--size-425); }
.marg-y-425 { margin-top: var(--size-425); margin-bottom: var(--size-425); }
.marg-450 { margin: var(--size-450); }
.marg-top-450 { margin-top: var(--size-450); }
.marg-bottom-450 { margin-bottom: var(--size-450); }
.marg-left-450 { margin-left: var(--size-450); }
.marg-right-450 { margin-right: var(--size-450); }
.marg-x-450 { margin-left: var(--size-450); margin-right: var(--size-450); }
.marg-y-450 { margin-top: var(--size-450); margin-bottom: var(--size-450); }
.marg-475 { margin: var(--size-475); }
.marg-top-475 { margin-top: var(--size-475); }
.marg-bottom-475 { margin-bottom: var(--size-475); }
.marg-left-475 { margin-left: var(--size-475); }
.marg-right-475 { margin-right: var(--size-475); }
.marg-x-475 { margin-left: var(--size-475); margin-right: var(--size-475); }
.marg-y-475 { margin-top: var(--size-475); margin-bottom: var(--size-475); }
.marg-500 { margin: var(--size-500); }
.marg-top-500 { margin-top: var(--size-500); }
.marg-bottom-500 { margin-bottom: var(--size-500); }
.marg-left-500 { margin-left: var(--size-500); }
.marg-right-500 { margin-right: var(--size-500); }
.marg-x-500 { margin-left: var(--size-500); margin-right: var(--size-500); }
.marg-y-500 { margin-top: var(--size-500); margin-bottom: var(--size-500); }
.marg-525 { margin: var(--size-525); }
.marg-top-525 { margin-top: var(--size-525); }
.marg-bottom-525 { margin-bottom: var(--size-525); }
.marg-left-525 { margin-left: var(--size-525); }
.marg-right-525 { margin-right: var(--size-525); }
.marg-x-525 { margin-left: var(--size-525); margin-right: var(--size-525); }
.marg-y-525 { margin-top: var(--size-525); margin-bottom: var(--size-525); }
.marg-550 { margin: var(--size-550); }
.marg-top-550 { margin-top: var(--size-550); }
.marg-bottom-550 { margin-bottom: var(--size-550); }
.marg-left-550 { margin-left: var(--size-550); }
.marg-right-550 { margin-right: var(--size-550); }
.marg-x-550 { margin-left: var(--size-550); margin-right: var(--size-550); }
.marg-y-550 { margin-top: var(--size-550); margin-bottom: var(--size-550); }
.marg-575 { margin: var(--size-575); }
.marg-top-575 { margin-top: var(--size-575); }
.marg-bottom-575 { margin-bottom: var(--size-575); }
.marg-left-575 { margin-left: var(--size-575); }
.marg-right-575 { margin-right: var(--size-575); }
.marg-x-575 { margin-left: var(--size-575); margin-right: var(--size-575); }
.marg-y-575 { margin-top: var(--size-575); margin-bottom: var(--size-575); }
.marg-600 { margin: var(--size-600); }
.marg-top-600 { margin-top: var(--size-600); }
.marg-bottom-600 { margin-bottom: var(--size-600); }
.marg-left-600 { margin-left: var(--size-600); }
.marg-right-600 { margin-right: var(--size-600); }
.marg-x-600 { margin-left: var(--size-600); margin-right: var(--size-600); }
.marg-y-600 { margin-top: var(--size-600); margin-bottom: var(--size-600); }
.marg-625 { margin: var(--size-625); }
.marg-top-625 { margin-top: var(--size-625); }
.marg-bottom-625 { margin-bottom: var(--size-625); }
.marg-left-625 { margin-left: var(--size-625); }
.marg-right-625 { margin-right: var(--size-625); }
.marg-x-625 { margin-left: var(--size-625); margin-right: var(--size-625); }
.marg-y-625 { margin-top: var(--size-625); margin-bottom: var(--size-625); }
.marg-650 { margin: var(--size-650); }
.marg-top-650 { margin-top: var(--size-650); }
.marg-bottom-650 { margin-bottom: var(--size-650); }
.marg-left-650 { margin-left: var(--size-650); }
.marg-right-650 { margin-right: var(--size-650); }
.marg-x-650 { margin-left: var(--size-650); margin-right: var(--size-650); }
.marg-y-650 { margin-top: var(--size-650); margin-bottom: var(--size-650); }
.marg-675 { margin: var(--size-675); }
.marg-top-675 { margin-top: var(--size-675); }
.marg-bottom-675 { margin-bottom: var(--size-675); }
.marg-left-675 { margin-left: var(--size-675); }
.marg-right-675 { margin-right: var(--size-675); }
.marg-x-675 { margin-left: var(--size-675); margin-right: var(--size-675); }
.marg-y-675 { margin-top: var(--size-675); margin-bottom: var(--size-675); }
.marg-700 { margin: var(--size-700); }
.marg-top-700 { margin-top: var(--size-700); }
.marg-bottom-700 { margin-bottom: var(--size-700); }
.marg-left-700 { margin-left: var(--size-700); }
.marg-right-700 { margin-right: var(--size-700); }
.marg-x-700 { margin-left: var(--size-700); margin-right: var(--size-700); }
.marg-y-700 { margin-top: var(--size-700); margin-bottom: var(--size-700); }
.marg-725 { margin: var(--size-725); }
.marg-top-725 { margin-top: var(--size-725); }
.marg-bottom-725 { margin-bottom: var(--size-725); }
.marg-left-725 { margin-left: var(--size-725); }
.marg-right-725 { margin-right: var(--size-725); }
.marg-x-725 { margin-left: var(--size-725); margin-right: var(--size-725); }
.marg-y-725 { margin-top: var(--size-725); margin-bottom: var(--size-725); }
.marg-750 { margin: var(--size-750); }
.marg-top-750 { margin-top: var(--size-750); }
.marg-bottom-750 { margin-bottom: var(--size-750); }
.marg-left-750 { margin-left: var(--size-750); }
.marg-right-750 { margin-right: var(--size-750); }
.marg-x-750 { margin-left: var(--size-750); margin-right: var(--size-750); }
.marg-y-750 { margin-top: var(--size-750); margin-bottom: var(--size-750); }
.marg-775 { margin: var(--size-775); }
.marg-top-775 { margin-top: var(--size-775); }
.marg-bottom-775 { margin-bottom: var(--size-775); }
.marg-left-775 { margin-left: var(--size-775); }
.marg-right-775 { margin-right: var(--size-775); }
.marg-x-775 { margin-left: var(--size-775); margin-right: var(--size-775); }
.marg-y-775 { margin-top: var(--size-775); margin-bottom: var(--size-775); }
.marg-800 { margin: var(--size-800); }
.marg-top-800 { margin-top: var(--size-800); }
.marg-bottom-800 { margin-bottom: var(--size-800); }
.marg-left-800 { margin-left: var(--size-800); }
.marg-right-800 { margin-right: var(--size-800); }
.marg-x-800 { margin-left: var(--size-800); margin-right: var(--size-800); }
.marg-y-800 { margin-top: var(--size-800); margin-bottom: var(--size-800); }
.marg-825 { margin: var(--size-825); }
.marg-top-825 { margin-top: var(--size-825); }
.marg-bottom-825 { margin-bottom: var(--size-825); }
.marg-left-825 { margin-left: var(--size-825); }
.marg-right-825 { margin-right: var(--size-825); }
.marg-x-825 { margin-left: var(--size-825); margin-right: var(--size-825); }
.marg-y-825 { margin-top: var(--size-825); margin-bottom: var(--size-825); }
.marg-850 { margin: var(--size-850); }
.marg-top-850 { margin-top: var(--size-850); }
.marg-bottom-850 { margin-bottom: var(--size-850); }
.marg-left-850 { margin-left: var(--size-850); }
.marg-right-850 { margin-right: var(--size-850); }
.marg-x-850 { margin-left: var(--size-850); margin-right: var(--size-850); }
.marg-y-850 { margin-top: var(--size-850); margin-bottom: var(--size-850); }
.marg-875 { margin: var(--size-875); }
.marg-top-875 { margin-top: var(--size-875); }
.marg-bottom-875 { margin-bottom: var(--size-875); }
.marg-left-875 { margin-left: var(--size-875); }
.marg-right-875 { margin-right: var(--size-875); }
.marg-x-875 { margin-left: var(--size-875); margin-right: var(--size-875); }
.marg-y-875 { margin-top: var(--size-875); margin-bottom: var(--size-875); }
.marg-900 { margin: var(--size-900); }
.marg-top-900 { margin-top: var(--size-900); }
.marg-bottom-900 { margin-bottom: var(--size-900); }
.marg-left-900 { margin-left: var(--size-900); }
.marg-right-900 { margin-right: var(--size-900); }
.marg-x-900 { margin-left: var(--size-900); margin-right: var(--size-900); }
.marg-y-900 { margin-top: var(--size-900); margin-bottom: var(--size-900); }
.marg-925 { margin: var(--size-925); }
.marg-top-925 { margin-top: var(--size-925); }
.marg-bottom-925 { margin-bottom: var(--size-925); }
.marg-left-925 { margin-left: var(--size-925); }
.marg-right-925 { margin-right: var(--size-925); }
.marg-x-925 { margin-left: var(--size-925); margin-right: var(--size-925); }
.marg-y-925 { margin-top: var(--size-925); margin-bottom: var(--size-925); }
.marg-950 { margin: var(--size-950); }
.marg-top-950 { margin-top: var(--size-950); }
.marg-bottom-950 { margin-bottom: var(--size-950); }
.marg-left-950 { margin-left: var(--size-950); }
.marg-right-950 { margin-right: var(--size-950); }
.marg-x-950 { margin-left: var(--size-950); margin-right: var(--size-950); }
.marg-y-950 { margin-top: var(--size-950); margin-bottom: var(--size-950); }
.marg-975 { margin: var(--size-975); }
.marg-top-975 { margin-top: var(--size-975); }
.marg-bottom-975 { margin-bottom: var(--size-975); }
.marg-left-975 { margin-left: var(--size-975); }
.marg-right-975 { margin-right: var(--size-975); }
.marg-x-975 { margin-left: var(--size-975); margin-right: var(--size-975); }
.marg-y-975 { margin-top: var(--size-975); margin-bottom: var(--size-975); }
.marg-1000 { margin: var(--size-1000); }
.marg-top-1000 { margin-top: var(--size-1000); }
.marg-bottom-1000 { margin-bottom: var(--size-1000); }
.marg-left-1000 { margin-left: var(--size-1000); }
.marg-right-1000 { margin-right: var(--size-1000); }
.marg-x-1000 { margin-left: var(--size-1000); margin-right: var(--size-1000); }
.marg-y-1000 { margin-top: var(--size-1000); margin-bottom: var(--size-1000); }
.pad-25 { padding: var(--size-25); }
.pad-top-25 { padding-top: var(--size-25); }
.pad-bottom-25 { padding-bottom: var(--size-25); }
.pad-left-25 { padding-left: var(--size-25); }
.pad-right-25 { padding-right: var(--size-25); }
.pad-x-25 { padding-left: var(--size-25); padding-right: var(--size-25); }
.pad-y-25 { padding-top: var(--size-25); padding-bottom: var(--size-25); }
.pad-50 { padding: var(--size-50); }
.pad-top-50 { padding-top: var(--size-50); }
.pad-bottom-50 { padding-bottom: var(--size-50); }
.pad-left-50 { padding-left: var(--size-50); }
.pad-right-50 { padding-right: var(--size-50); }
.pad-x-50 { padding-left: var(--size-50); padding-right: var(--size-50); }
.pad-y-50 { padding-top: var(--size-50); padding-bottom: var(--size-50); }
.pad-75 { padding: var(--size-75); }
.pad-top-75 { padding-top: var(--size-75); }
.pad-bottom-75 { padding-bottom: var(--size-75); }
.pad-left-75 { padding-left: var(--size-75); }
.pad-right-75 { padding-right: var(--size-75); }
.pad-x-75 { padding-left: var(--size-75); padding-right: var(--size-75); }
.pad-y-75 { padding-top: var(--size-75); padding-bottom: var(--size-75); }
.pad-100 { padding: var(--size-100); }
.pad-top-100 { padding-top: var(--size-100); }
.pad-bottom-100 { padding-bottom: var(--size-100); }
.pad-left-100 { padding-left: var(--size-100); }
.pad-right-100 { padding-right: var(--size-100); }
.pad-x-100 { padding-left: var(--size-100); padding-right: var(--size-100); }
.pad-y-100 { padding-top: var(--size-100); padding-bottom: var(--size-100); }
.pad-125 { padding: var(--size-125); }
.pad-top-125 { padding-top: var(--size-125); }
.pad-bottom-125 { padding-bottom: var(--size-125); }
.pad-left-125 { padding-left: var(--size-125); }
.pad-right-125 { padding-right: var(--size-125); }
.pad-x-125 { padding-left: var(--size-125); padding-right: var(--size-125); }
.pad-y-125 { padding-top: var(--size-125); padding-bottom: var(--size-125); }
.pad-150 { padding: var(--size-150); }
.pad-top-150 { padding-top: var(--size-150); }
.pad-bottom-150 { padding-bottom: var(--size-150); }
.pad-left-150 { padding-left: var(--size-150); }
.pad-right-150 { padding-right: var(--size-150); }
.pad-x-150 { padding-left: var(--size-150); padding-right: var(--size-150); }
.pad-y-150 { padding-top: var(--size-150); padding-bottom: var(--size-150); }
.pad-175 { padding: var(--size-175); }
.pad-top-175 { padding-top: var(--size-175); }
.pad-bottom-175 { padding-bottom: var(--size-175); }
.pad-left-175 { padding-left: var(--size-175); }
.pad-right-175 { padding-right: var(--size-175); }
.pad-x-175 { padding-left: var(--size-175); padding-right: var(--size-175); }
.pad-y-175 { padding-top: var(--size-175); padding-bottom: var(--size-175); }
.pad-200 { padding: var(--size-200); }
.pad-top-200 { padding-top: var(--size-200); }
.pad-bottom-200 { padding-bottom: var(--size-200); }
.pad-left-200 { padding-left: var(--size-200); }
.pad-right-200 { padding-right: var(--size-200); }
.pad-x-200 { padding-left: var(--size-200); padding-right: var(--size-200); }
.pad-y-200 { padding-top: var(--size-200); padding-bottom: var(--size-200); }
.pad-225 { padding: var(--size-225); }
.pad-top-225 { padding-top: var(--size-225); }
.pad-bottom-225 { padding-bottom: var(--size-225); }
.pad-left-225 { padding-left: var(--size-225); }
.pad-right-225 { padding-right: var(--size-225); }
.pad-x-225 { padding-left: var(--size-225); padding-right: var(--size-225); }
.pad-y-225 { padding-top: var(--size-225); padding-bottom: var(--size-225); }
.pad-250 { padding: var(--size-250); }
.pad-top-250 { padding-top: var(--size-250); }
.pad-bottom-250 { padding-bottom: var(--size-250); }
.pad-left-250 { padding-left: var(--size-250); }
.pad-right-250 { padding-right: var(--size-250); }
.pad-x-250 { padding-left: var(--size-250); padding-right: var(--size-250); }
.pad-y-250 { padding-top: var(--size-250); padding-bottom: var(--size-250); }
.pad-275 { padding: var(--size-275); }
.pad-top-275 { padding-top: var(--size-275); }
.pad-bottom-275 { padding-bottom: var(--size-275); }
.pad-left-275 { padding-left: var(--size-275); }
.pad-right-275 { padding-right: var(--size-275); }
.pad-x-275 { padding-left: var(--size-275); padding-right: var(--size-275); }
.pad-y-275 { padding-top: var(--size-275); padding-bottom: var(--size-275); }
.pad-300 { padding: var(--size-300); }
.pad-top-300 { padding-top: var(--size-300); }
.pad-bottom-300 { padding-bottom: var(--size-300); }
.pad-left-300 { padding-left: var(--size-300); }
.pad-right-300 { padding-right: var(--size-300); }
.pad-x-300 { padding-left: var(--size-300); padding-right: var(--size-300); }
.pad-y-300 { padding-top: var(--size-300); padding-bottom: var(--size-300); }
.pad-325 { padding: var(--size-325); }
.pad-top-325 { padding-top: var(--size-325); }
.pad-bottom-325 { padding-bottom: var(--size-325); }
.pad-left-325 { padding-left: var(--size-325); }
.pad-right-325 { padding-right: var(--size-325); }
.pad-x-325 { padding-left: var(--size-325); padding-right: var(--size-325); }
.pad-y-325 { padding-top: var(--size-325); padding-bottom: var(--size-325); }
.pad-350 { padding: var(--size-350); }
.pad-top-350 { padding-top: var(--size-350); }
.pad-bottom-350 { padding-bottom: var(--size-350); }
.pad-left-350 { padding-left: var(--size-350); }
.pad-right-350 { padding-right: var(--size-350); }
.pad-x-350 { padding-left: var(--size-350); padding-right: var(--size-350); }
.pad-y-350 { padding-top: var(--size-350); padding-bottom: var(--size-350); }
.pad-375 { padding: var(--size-375); }
.pad-top-375 { padding-top: var(--size-375); }
.pad-bottom-375 { padding-bottom: var(--size-375); }
.pad-left-375 { padding-left: var(--size-375); }
.pad-right-375 { padding-right: var(--size-375); }
.pad-x-375 { padding-left: var(--size-375); padding-right: var(--size-375); }
.pad-y-375 { padding-top: var(--size-375); padding-bottom: var(--size-375); }
.pad-400 { padding: var(--size-400); }
.pad-top-400 { padding-top: var(--size-400); }
.pad-bottom-400 { padding-bottom: var(--size-400); }
.pad-left-400 { padding-left: var(--size-400); }
.pad-right-400 { padding-right: var(--size-400); }
.pad-x-400 { padding-left: var(--size-400); padding-right: var(--size-400); }
.pad-y-400 { padding-top: var(--size-400); padding-bottom: var(--size-400); }
.pad-425 { padding: var(--size-425); }
.pad-top-425 { padding-top: var(--size-425); }
.pad-bottom-425 { padding-bottom: var(--size-425); }
.pad-left-425 { padding-left: var(--size-425); }
.pad-right-425 { padding-right: var(--size-425); }
.pad-x-425 { padding-left: var(--size-425); padding-right: var(--size-425); }
.pad-y-425 { padding-top: var(--size-425); padding-bottom: var(--size-425); }
.pad-450 { padding: var(--size-450); }
.pad-top-450 { padding-top: var(--size-450); }
.pad-bottom-450 { padding-bottom: var(--size-450); }
.pad-left-450 { padding-left: var(--size-450); }
.pad-right-450 { padding-right: var(--size-450); }
.pad-x-450 { padding-left: var(--size-450); padding-right: var(--size-450); }
.pad-y-450 { padding-top: var(--size-450); padding-bottom: var(--size-450); }
.pad-475 { padding: var(--size-475); }
.pad-top-475 { padding-top: var(--size-475); }
.pad-bottom-475 { padding-bottom: var(--size-475); }
.pad-left-475 { padding-left: var(--size-475); }
.pad-right-475 { padding-right: var(--size-475); }
.pad-x-475 { padding-left: var(--size-475); padding-right: var(--size-475); }
.pad-y-475 { padding-top: var(--size-475); padding-bottom: var(--size-475); }
.pad-500 { padding: var(--size-500); }
.pad-top-500 { padding-top: var(--size-500); }
.pad-bottom-500 { padding-bottom: var(--size-500); }
.pad-left-500 { padding-left: var(--size-500); }
.pad-right-500 { padding-right: var(--size-500); }
.pad-x-500 { padding-left: var(--size-500); padding-right: var(--size-500); }
.pad-y-500 { padding-top: var(--size-500); padding-bottom: var(--size-500); }
.pad-525 { padding: var(--size-525); }
.pad-top-525 { padding-top: var(--size-525); }
.pad-bottom-525 { padding-bottom: var(--size-525); }
.pad-left-525 { padding-left: var(--size-525); }
.pad-right-525 { padding-right: var(--size-525); }
.pad-x-525 { padding-left: var(--size-525); padding-right: var(--size-525); }
.pad-y-525 { padding-top: var(--size-525); padding-bottom: var(--size-525); }
.pad-550 { padding: var(--size-550); }
.pad-top-550 { padding-top: var(--size-550); }
.pad-bottom-550 { padding-bottom: var(--size-550); }
.pad-left-550 { padding-left: var(--size-550); }
.pad-right-550 { padding-right: var(--size-550); }
.pad-x-550 { padding-left: var(--size-550); padding-right: var(--size-550); }
.pad-y-550 { padding-top: var(--size-550); padding-bottom: var(--size-550); }
.pad-575 { padding: var(--size-575); }
.pad-top-575 { padding-top: var(--size-575); }
.pad-bottom-575 { padding-bottom: var(--size-575); }
.pad-left-575 { padding-left: var(--size-575); }
.pad-right-575 { padding-right: var(--size-575); }
.pad-x-575 { padding-left: var(--size-575); padding-right: var(--size-575); }
.pad-y-575 { padding-top: var(--size-575); padding-bottom: var(--size-575); }
.pad-600 { padding: var(--size-600); }
.pad-top-600 { padding-top: var(--size-600); }
.pad-bottom-600 { padding-bottom: var(--size-600); }
.pad-left-600 { padding-left: var(--size-600); }
.pad-right-600 { padding-right: var(--size-600); }
.pad-x-600 { padding-left: var(--size-600); padding-right: var(--size-600); }
.pad-y-600 { padding-top: var(--size-600); padding-bottom: var(--size-600); }
.pad-625 { padding: var(--size-625); }
.pad-top-625 { padding-top: var(--size-625); }
.pad-bottom-625 { padding-bottom: var(--size-625); }
.pad-left-625 { padding-left: var(--size-625); }
.pad-right-625 { padding-right: var(--size-625); }
.pad-x-625 { padding-left: var(--size-625); padding-right: var(--size-625); }
.pad-y-625 { padding-top: var(--size-625); padding-bottom: var(--size-625); }
.pad-650 { padding: var(--size-650); }
.pad-top-650 { padding-top: var(--size-650); }
.pad-bottom-650 { padding-bottom: var(--size-650); }
.pad-left-650 { padding-left: var(--size-650); }
.pad-right-650 { padding-right: var(--size-650); }
.pad-x-650 { padding-left: var(--size-650); padding-right: var(--size-650); }
.pad-y-650 { padding-top: var(--size-650); padding-bottom: var(--size-650); }
.pad-675 { padding: var(--size-675); }
.pad-top-675 { padding-top: var(--size-675); }
.pad-bottom-675 { padding-bottom: var(--size-675); }
.pad-left-675 { padding-left: var(--size-675); }
.pad-right-675 { padding-right: var(--size-675); }
.pad-x-675 { padding-left: var(--size-675); padding-right: var(--size-675); }
.pad-y-675 { padding-top: var(--size-675); padding-bottom: var(--size-675); }
.pad-700 { padding: var(--size-700); }
.pad-top-700 { padding-top: var(--size-700); }
.pad-bottom-700 { padding-bottom: var(--size-700); }
.pad-left-700 { padding-left: var(--size-700); }
.pad-right-700 { padding-right: var(--size-700); }
.pad-x-700 { padding-left: var(--size-700); padding-right: var(--size-700); }
.pad-y-700 { padding-top: var(--size-700); padding-bottom: var(--size-700); }
.pad-725 { padding: var(--size-725); }
.pad-top-725 { padding-top: var(--size-725); }
.pad-bottom-725 { padding-bottom: var(--size-725); }
.pad-left-725 { padding-left: var(--size-725); }
.pad-right-725 { padding-right: var(--size-725); }
.pad-x-725 { padding-left: var(--size-725); padding-right: var(--size-725); }
.pad-y-725 { padding-top: var(--size-725); padding-bottom: var(--size-725); }
.pad-750 { padding: var(--size-750); }
.pad-top-750 { padding-top: var(--size-750); }
.pad-bottom-750 { padding-bottom: var(--size-750); }
.pad-left-750 { padding-left: var(--size-750); }
.pad-right-750 { padding-right: var(--size-750); }
.pad-x-750 { padding-left: var(--size-750); padding-right: var(--size-750); }
.pad-y-750 { padding-top: var(--size-750); padding-bottom: var(--size-750); }
.pad-775 { padding: var(--size-775); }
.pad-top-775 { padding-top: var(--size-775); }
.pad-bottom-775 { padding-bottom: var(--size-775); }
.pad-left-775 { padding-left: var(--size-775); }
.pad-right-775 { padding-right: var(--size-775); }
.pad-x-775 { padding-left: var(--size-775); padding-right: var(--size-775); }
.pad-y-775 { padding-top: var(--size-775); padding-bottom: var(--size-775); }
.pad-800 { padding: var(--size-800); }
.pad-top-800 { padding-top: var(--size-800); }
.pad-bottom-800 { padding-bottom: var(--size-800); }
.pad-left-800 { padding-left: var(--size-800); }
.pad-right-800 { padding-right: var(--size-800); }
.pad-x-800 { padding-left: var(--size-800); padding-right: var(--size-800); }
.pad-y-800 { padding-top: var(--size-800); padding-bottom: var(--size-800); }
.pad-825 { padding: var(--size-825); }
.pad-top-825 { padding-top: var(--size-825); }
.pad-bottom-825 { padding-bottom: var(--size-825); }
.pad-left-825 { padding-left: var(--size-825); }
.pad-right-825 { padding-right: var(--size-825); }
.pad-x-825 { padding-left: var(--size-825); padding-right: var(--size-825); }
.pad-y-825 { padding-top: var(--size-825); padding-bottom: var(--size-825); }
.pad-850 { padding: var(--size-850); }
.pad-top-850 { padding-top: var(--size-850); }
.pad-bottom-850 { padding-bottom: var(--size-850); }
.pad-left-850 { padding-left: var(--size-850); }
.pad-right-850 { padding-right: var(--size-850); }
.pad-x-850 { padding-left: var(--size-850); padding-right: var(--size-850); }
.pad-y-850 { padding-top: var(--size-850); padding-bottom: var(--size-850); }
.pad-875 { padding: var(--size-875); }
.pad-top-875 { padding-top: var(--size-875); }
.pad-bottom-875 { padding-bottom: var(--size-875); }
.pad-left-875 { padding-left: var(--size-875); }
.pad-right-875 { padding-right: var(--size-875); }
.pad-x-875 { padding-left: var(--size-875); padding-right: var(--size-875); }
.pad-y-875 { padding-top: var(--size-875); padding-bottom: var(--size-875); }
.pad-900 { padding: var(--size-900); }
.pad-top-900 { padding-top: var(--size-900); }
.pad-bottom-900 { padding-bottom: var(--size-900); }
.pad-left-900 { padding-left: var(--size-900); }
.pad-right-900 { padding-right: var(--size-900); }
.pad-x-900 { padding-left: var(--size-900); padding-right: var(--size-900); }
.pad-y-900 { padding-top: var(--size-900); padding-bottom: var(--size-900); }
.pad-925 { padding: var(--size-925); }
.pad-top-925 { padding-top: var(--size-925); }
.pad-bottom-925 { padding-bottom: var(--size-925); }
.pad-left-925 { padding-left: var(--size-925); }
.pad-right-925 { padding-right: var(--size-925); }
.pad-x-925 { padding-left: var(--size-925); padding-right: var(--size-925); }
.pad-y-925 { padding-top: var(--size-925); padding-bottom: var(--size-925); }
.pad-950 { padding: var(--size-950); }
.pad-top-950 { padding-top: var(--size-950); }
.pad-bottom-950 { padding-bottom: var(--size-950); }
.pad-left-950 { padding-left: var(--size-950); }
.pad-right-950 { padding-right: var(--size-950); }
.pad-x-950 { padding-left: var(--size-950); padding-right: var(--size-950); }
.pad-y-950 { padding-top: var(--size-950); padding-bottom: var(--size-950); }
.pad-975 { padding: var(--size-975); }
.pad-top-975 { padding-top: var(--size-975); }
.pad-bottom-975 { padding-bottom: var(--size-975); }
.pad-left-975 { padding-left: var(--size-975); }
.pad-right-975 { padding-right: var(--size-975); }
.pad-x-975 { padding-left: var(--size-975); padding-right: var(--size-975); }
.pad-y-975 { padding-top: var(--size-975); padding-bottom: var(--size-975); }
.pad-1000 { padding: var(--size-1000); }
.pad-top-1000 { padding-top: var(--size-1000); }
.pad-bottom-1000 { padding-bottom: var(--size-1000); }
.pad-left-1000 { padding-left: var(--size-1000); }
.pad-right-1000 { padding-right: var(--size-1000); }
.pad-x-1000 { padding-left: var(--size-1000); padding-right: var(--size-1000); }
.pad-y-1000 { padding-top: var(--size-1000); padding-bottom: var(--size-1000); }



.height-300 {
  height: 3rem;
}
.height-500 {
  height: 5rem;
}
/* === CSS: h-site.css [root] === */
:root {
  --bg: #090909;
  --panel: rgba(7, 7, 7, 0.88);
  --panel-soft: rgba(17, 17, 17, 0.84);
  --panel-strong: rgba(10, 10, 10, 0.94);
  --line: rgba(245, 229, 179, 0.26);
  --line-strong: rgba(245, 229, 179, 0.5);
  --gold: #e6c56b;
  --gold-soft: #f4e5b3;
  --gold-deep: #9f7730;
  --red: #7f0606;
  --red-deep: #4b0101;
  --text: #f7f1df;
  --muted: #c1b596;
  --shadow: 0 22px 80px rgba(0, 0, 0, 0.45);
  --radius: 22px;
  --radius-small: 14px;
  --single-radius: 14px;
  --container: min(1180px, calc(100vw - 2rem));
  --header-container: min(1200px, calc(100vw - 0.75rem));
}

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

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(132, 19, 19, 0.2), transparent 32%),
    linear-gradient(180deg, #080808 0%, #050505 35%, #000 100%);
  color: var(--text);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

img {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.page-shell {
  min-height: 100vh;
}

.site-header {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 40;
}

.header-stack {
  position: relative;
  top: 0.55rem;
  width: var(--header-container);
  margin: 0 auto;
  transition: top 180ms ease;
}

.site-header.is-scrolled .header-stack {
  top: 0;
}

.header-bar {
  padding: 0.4rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(255, 214, 113, 0.3);
  background:
    linear-gradient(180deg, rgba(173, 15, 15, 0.8), rgba(120, 6, 6, 0.72)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 153, 0.35),
    var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  min-width: 0;
}

.brand__mark {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.28));
}

.brand__hanzi {
  font-family: "Baskerville", "Songti SC", serif;
  font-size: clamp(1.55rem, 2.8vw, 1.65rem);
  line-height: 0.9;
  color: #f3c552;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45);
}

.brand__latin {
  font-family: "Snell Roundhand", "Apple Chancery", "Baskerville", serif;
  font-size: clamp(1.55rem, 2.7vw, 1.9rem);
  font-weight: 400;
  line-height: 0.92;
  color: var(--gold);
  letter-spacing: 0.02em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.language-switcher__link {
  padding: 0.34rem 0.66rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: rgba(255, 240, 214, 0.82);
  font-size: 0.84rem;
  transition: 180ms ease;
}

.language-switcher__link:hover,
.language-switcher__link.is-active {
  color: var(--gold-soft);
  border-color: rgba(255, 225, 155, 0.32);
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 233, 173, 0.18);
}

.menu-toggle {
  display: none;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 225, 155, 0.3);
  border-radius: var(--single-radius);
  background: rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px auto;
  background: var(--gold-soft);
}

.menu-toggle:hover {
  background: rgba(255, 225, 155, 0.12);
  border-color: rgba(255, 225, 155, 0.42);
}

.site-nav {
  width: 100%;
  margin: -1px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem 0.38rem;
  border-radius: 0 0 3px 3px;
  background: rgba(10, 7, 7, 0.56);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 225, 155, 0.14);
  border-top-color: rgba(255, 225, 155, 0.06);
}

.site-nav a {
  padding: 0.38rem 0.78rem;
  border-radius: var(--single-radius);
  color: var(--muted);
  font-size: 0.9rem;
  border: 1px solid transparent;
  transition: 180ms ease;
}

.site-nav a:hover {
  color: var(--gold-soft);
  background: rgba(255, 225, 155, 0.14);
  border-color: rgba(255, 225, 155, 0.2);
  transform: translateY(-1px);
}

.site-nav__languages {
  display: none;
}

.hero-section {
  position: relative;
  min-height: 100vh;
  padding: 12.2rem 0 14rem;
  display: flex;
  overflow: clip;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 6, 5, 0.22), rgba(6, 6, 6, 0.58) 52%, rgba(6, 6, 6, 0.9)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.72)),
    url("../images/restaurant-hero.jpg") center 58%/cover no-repeat;
  transform: scale(1.03);
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 6, 0.98));
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 2rem;
  align-items: end;
  padding-top: 1.3rem;
}

.hero-copy {
  align-self: center;
}

.hero-copy h1,
.section-heading h2 {
  margin: 0;
  font-family: "Baskerville", "Palatino Linotype", serif;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.02em;
}

.hero-copy h1 {
  max-width: 11.5ch;
  font-size: 3.25rem;
  text-wrap: balance;
}

.hero-intro,
.section-intro,
.story-copy p,
.frame-card p,
.contact-card p,
.legal-card p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--muted);
}

.hero-intro {
  max-width: 56ch;
  margin-top: 1.1rem;
}

.hero-cta,
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 225, 155, 0.24);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button--gold {
  color: #200d03;
  background: linear-gradient(180deg, #f4e3a8, #d8ab4c);
  border-color: rgba(255, 240, 198, 0.38);
  box-shadow: 0 10px 30px rgba(216, 171, 76, 0.18);
}

.button--ghost {
  color: var(--gold-soft);
  background: rgba(9, 9, 9, 0.42);
}

.button:hover {
  transform: translateY(-2px);
}

.button--gold:hover {
  box-shadow: 0 16px 42px rgba(216, 171, 76, 0.28);
}

.button--ghost:hover {
  background: rgba(255, 225, 155, 0.12);
  border-color: rgba(255, 225, 155, 0.32);
}

.hero-panel,
.hero-quickcards {
  display: grid;
  gap: 1rem;
}

.hero-panel {
  align-self: end;
  margin-top: 3.2rem;
}

.hero-quickcards {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 225, 155, 0.08);
}

.frame-card,
.stat-card,
.feature-card,
.menu-browser,
.banquet-card,
.gallery-card,
.hours-card,
.hours-sidecard,
.contact-card,
.legal-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  --card-radius: var(--radius);
  --frame-gap: 8px;
  border-radius: var(--card-radius);
}

.frame-card::before,
.menu-browser::before,
.banquet-card::before,
.hours-card::before,
.hours-sidecard::before,
.contact-card::before,
.legal-card::before {
  content: "";
  position: absolute;
  inset: var(--frame-gap);
  border: 1px solid rgba(245, 229, 179, 0.16);
  border-radius: calc(var(--card-radius) - var(--frame-gap));
  pointer-events: none;
}

.frame-card {
  padding: 1.4rem 1.5rem;
  background: linear-gradient(180deg, rgba(9, 9, 9, 0.9), rgba(5, 5, 5, 0.96));
}

.frame-card--hero {
  display: grid;
  gap: 1.2rem;
  padding: 1.15rem 1.2rem 1.15rem;
}

.frame-card--small,
.frame-card--large {
  --card-radius: var(--radius-small);
}

.frame-card h2,
.frame-card h3,
.feature-card h3,
.menu-panel__header h3,
.banquet-card h4,
.hours-sidecard h3,
.legal-card h3 {
  margin: 0 0 0.75rem;
  font-family: "Baskerville", "Palatino Linotype", serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--gold-soft);
}

.frame-card__title {
  margin: 0 0 1rem;
  color: var(--text);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-panel__main {
  padding: 0.15rem 0 1rem;
  border-bottom: 1px solid rgba(255, 225, 155, 0.08);
}

.hero-panel__main p:last-child {
  margin: 0;
}

.hero-quickcard h2 {
  margin: 0;
  font-family: "Baskerville", "Palatino Linotype", serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--gold-soft);
}

.hero-quickcard p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--muted);
}

.hero-quickcard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 225, 155, 0.08);
}

.hero-quickcard:last-child {
  border-bottom: 0;
  padding-bottom: 0.15rem;
}

.section {
  position: relative;
  padding: 6rem 0;
  scroll-margin-top: 8.6rem;
}

.section--story,
.section--gallery,
.section--contact {
  background:
    linear-gradient(180deg, rgba(12, 11, 10, 0.98), rgba(7, 7, 7, 0.96)),
    radial-gradient(circle at 10% 20%, rgba(145, 18, 18, 0.1), transparent 28%);
}

.section--menu,
.section--hours,
.section--legal {
  background:
    linear-gradient(180deg, rgba(5, 5, 5, 0.98), rgba(10, 8, 8, 0.98)),
    radial-gradient(circle at 85% 15%, rgba(145, 18, 18, 0.08), transparent 30%);
}

.section--gallery {
  padding: 3.2rem 0 3.4rem;
}

.section--gallery .container {
  width: var(--container);
}

.section-heading {
  max-width: 72rem;
  margin-bottom: 2rem;
}

.section-heading h1,
.section-heading h2 {
  font-size: clamp(1.95rem, 3vw, 3.15rem);
  max-width: 22ch;
  line-height: 1.06;
  text-wrap: balance;
}

.section--dsgvo {
  min-height: calc(100vh - 13rem);
  padding-top: 10rem;
}

.legal-page__content {
  min-height: 12rem;
}

.section-heading--compact h2,
.section-heading--compact h3 {
  max-width: none;
}

.story-layout {
  display: grid;
  gap: 1.35rem;
}

.story-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 58rem;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  min-height: 6.25rem;
  padding: 0.95rem 1rem 0.9rem;
  --card-radius: var(--single-radius);
  background: linear-gradient(180deg, rgba(21, 17, 13, 0.78), rgba(8, 8, 8, 0.94));
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.stat-card__value {
  display: block;
  font-family: "Baskerville", "Palatino Linotype", serif;
  color: var(--gold-soft);
  font-size: 1.7rem;
  line-height: 0.96;
}

.stat-card__label {
  color: var(--gold);
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0.9;
}

.story-copy {
  max-width: 64rem;
}

.story-copy p {
  max-width: 60rem;
}

.featured-grid,
.banquet-grid,
.gallery-grid,
.legal-grid {
  display: grid;
  gap: 1.2rem;
}

.featured-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 2rem;
}

.feature-card,
.gallery-card {
  overflow: hidden;
  border-radius: var(--single-radius);
}

.feature-card {
  background: var(--panel-strong);
}

.feature-card__media {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 225, 155, 0.08);
  border-radius: var(--single-radius) var(--single-radius) 0 0;
}

.feature-card__media img {
  aspect-ratio: 1.36;
  object-fit: cover;
  transition: transform 220ms ease;
}

.gallery-card__media img {
  object-fit: cover;
  transition: transform 220ms ease;
}

.feature-card__body {
  padding: 1.2rem 1.25rem 1.45rem;
}

.feature-card:nth-child(1) img {
  --photo-tilt: -14deg;
}

.feature-card:nth-child(2) img {
  --photo-tilt: -14deg;
}

.feature-card:nth-child(3) img {
  --photo-tilt: -14deg;
}

.feature-card__media img {
  transform: rotate(var(--photo-tilt)) scale(1.38);
}

.menu-browser {
  padding: 1.4rem;
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.96), rgba(14, 11, 10, 0.96));
}

.menu-browser__toolbar {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.3rem;
}

.menu-browser__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.4rem;
}

.section-heading--menu {
  text-align: center;
}

.section-heading--menu h2,
.section-heading--menu .section-intro {
  margin-left: auto;
  margin-right: auto;
}

.menu-filter-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  flex: 1 1 auto;
}

.menu-filter-group {
  padding: 0;
}

.menu-filter-group__title {
  margin: 0 0 0.55rem;
  color: var(--gold);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.menu-legend {
  flex: 0 0 auto;
  min-width: 12rem;
  padding-top: 0.1rem;
}

.menu-legend__title {
  margin: 0 0 0.55rem;
  color: rgba(244, 229, 179, 0.72);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}

.menu-legend__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem 0.75rem;
}

.menu-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1;
}

.menu-legend__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.08rem;
  height: 1.08rem;
  color: var(--gold);
  flex: 0 0 auto;
}

.menu-legend__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.menu-legend__icon.is-vegetarian,
.menu-item__marker.is-vegetarian,
.menu-filter[data-target="vegetarian"] .menu-filter__icon {
  color: #88c66a;
}

.menu-legend__icon.is-vegan,
.menu-item__marker.is-vegan,
.menu-filter[data-target="vegan"] .menu-filter__icon {
  color: #4fa85a;
}

.menu-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.58rem 0.8rem;
  border-radius: var(--single-radius);
  border: 1px solid rgba(255, 225, 155, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  transition: 160ms ease;
  font-size: 0.9rem;
}

.menu-filter__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  min-width: 0.95rem;
  color: var(--gold);
  line-height: 1;
  opacity: 0.9;
  flex: 0 0 auto;
}

.menu-filter__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.menu-filter[data-target="vegetarian"] .menu-filter__icon,
.menu-filter[data-target="vegan"] .menu-filter__icon {
  width: 1.05rem;
  height: 1.05rem;
  min-width: 1.05rem;
}

.menu-filter__label {
  display: inline-block;
  line-height: 1.1;
}

.menu-filter:hover,
.menu-filter.is-active {
  color: #160801;
  background: linear-gradient(180deg, #f6e9bb, #daaf55);
  border-color: rgba(255, 244, 214, 0.2);
  box-shadow: 0 8px 24px rgba(216, 171, 76, 0.15);
}

.menu-filter:hover .menu-filter__icon,
.menu-filter.is-active .menu-filter__icon {
  color: #3a1b05;
  opacity: 1;
}

.menu-panel {
  display: none;
}

.menu-panel.is-active {
  display: block;
}

.menu-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.menu-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title price"
    "media media"
    "meta meta";
  gap: 0.6rem 0.7rem;
  align-items: start;
  padding: 0.78rem 0.86rem 0.8rem;
  border-radius: var(--single-radius);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 225, 155, 0.08);
}

.menu-item:not(.has-image) {
  grid-template-areas:
    "meta meta"
    "title price";
  gap: 0.5rem 0.7rem;
}

.menu-item__media {
  grid-area: media;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--single-radius);
  background: rgba(255, 255, 255, 0.03);
}

.menu-item__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.menu-item__head {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  align-self: start;
}

.menu-item__code {
  margin: 0;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.menu-item__copy {
  grid-area: title;
}

.menu-item h4 {
  margin: 0;
  font-family: "Baskerville", "Palatino Linotype", serif;
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.25;
  padding-right: 0.2rem;
}

.menu-item__price {
  grid-area: price;
  margin: 0;
  color: var(--gold-soft);
  font-size: 0.9rem;
  white-space: nowrap;
  align-self: start;
}

.menu-item__markers {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  flex: 0 0 auto;
}

.menu-item__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.08rem;
  height: 1.08rem;
  color: var(--gold);
  opacity: 0.95;
}

.menu-item__marker svg {
  width: 100%;
  height: 100%;
  display: block;
}

.banquet-block {
  margin-top: 2rem;
}

.banquet-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.banquet-card {
  padding: 1.35rem 1.35rem 1.25rem;
}

.banquet-card__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.banquet-card__top p,
.banquet-card__minimum {
  margin: 0;
  color: var(--muted);
}

.banquet-card ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.gallery-card {
  flex: 1 0 20rem;
  flex-wrap: wrap;
  min-width: 0;
  height: clamp(14rem, 19vw, 16rem);
  border-radius: var(--single-radius);
  background: rgba(255, 255, 255, 0.02);
}

.gallery-card__media {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.gallery-card__media:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -3px;
}

.gallery-card__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gallery-card__media:hover img {
  transform: scale(1.025);
}

.hours-grid,
.contact-grid {
  display: grid;
  gap: 1.4rem;
}

.hours-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
  align-items: stretch;
}

.hours-card,
.hours-sidecard,
.contact-card,
.legal-card {
  padding: 1.35rem;
}

.hours-card,
.hours-sidecard {
  height: 100%;
}

.hours-sidecard {
  display: flex;
  flex-direction: column;
}

.hours-row,
.origin-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 225, 155, 0.1);
}

.hours-row:last-child,
.origin-row:last-child {
  border-bottom: 0;
}

.hours-row span,
.origin-row span {
  color: var(--muted);
}

.hours-row__label span {
  display: block;
  font-size: 0.96rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hours-row__value {
  display: grid;
  gap: 0.2rem;
  font-family: "Baskerville", "Palatino Linotype", serif;
  font-size: 1.6rem;
  color: var(--gold-soft);
  text-align: right;
}

.hours-row__value span {
  display: block;
}

.hours-sidecard ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.8;
}

.contact-grid {
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.9fr);
}

.contact-copy,
.contact-actions {
  display: grid;
  gap: 1rem;
}

.contact-card__label {
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.legal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legal-card--wide {
  grid-column: span 2;
}

.origins-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.2rem;
}

.allergy-note {
  margin-top: 1rem;
}

.site-footer {
  padding: 3rem 0 4rem;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(22, 10, 10, 0.98), rgba(8, 8, 8, 0.99) 18%, rgba(4, 4, 4, 0.995)),
    radial-gradient(circle at top left, rgba(122, 11, 11, 0.16), transparent 30%),
    radial-gradient(circle at top right, rgba(156, 115, 48, 0.08), transparent 28%);
  border-top: 1px solid rgba(255, 225, 155, 0.1);
}

.site-footer::before,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-footer::before {
  inset: 0 0 auto;
  height: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 225, 155, 0.38) 0,
      rgba(255, 225, 155, 0.38) 1px,
      transparent 1px,
      transparent 6px,
      rgba(255, 225, 155, 0.16) 6px,
      rgba(255, 225, 155, 0.16) 7px,
      transparent 7px
    );
}

.site-footer::after {
  opacity: 0.18;
  background:
    radial-gradient(circle at 18px 18px, rgba(245, 229, 179, 0.09) 0 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(45deg, transparent 46%, rgba(159, 119, 48, 0.08) 47%, rgba(159, 119, 48, 0.08) 53%, transparent 54%) 0 0 / 44px 44px;
}

.footer-grid {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.15fr) minmax(0, 0.72fr);
  gap: 1.7rem;
  color: var(--muted);
  align-items: start;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 0.8rem;
  line-height: 1.42;
}

.footer-column p {
  margin: 0;
}

.footer-column--brand,
.footer-column--meta {
  padding-top: 0.35rem;
}

.footer-column--meta {
  justify-items: start;
}

.footer-brand {
  margin: 0;
  font-family: "Baskerville", "Palatino Linotype", serif;
  color: var(--gold-soft);
  font-size: 1.55rem;
  line-height: 1.02;
}

.footer-tagline {
  max-width: 20rem;
}

.footer-kicker {
  color: var(--gold);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-address,
.footer-phone a,
.footer-copyright {
  color: var(--text);
}

.footer-credits {
  max-width: 18rem;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: var(--gold-soft);
}

.footer-legal a {
  transition: color 160ms ease, opacity 160ms ease;
}

.footer-map {
  margin-top: 0.15rem;
  min-height: 220px;
  overflow: hidden;
  border-radius: var(--single-radius);
  border: 1px solid rgba(255, 225, 155, 0.14);
  background:
    linear-gradient(180deg, rgba(26, 16, 12, 0.74), rgba(8, 8, 8, 0.74)),
    rgba(255, 255, 255, 0.03);
  box-shadow:
    inset 0 0 0 1px rgba(255, 225, 155, 0.06),
    0 16px 42px rgba(0, 0, 0, 0.28);
}

.footer-map iframe {
  width: 100%;
  height: 220px;
  display: block;
  border: 0;
}

.footer-legal a:hover {
  color: var(--gold-soft);
  opacity: 1;
}

@media (max-width: 980px) {
  .hero-content,
  .hours-grid,
  .contact-grid,
  .featured-grid,
  .legal-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-map,
  .footer-map iframe {
    height: 240px;
    min-height: 240px;
  }

  .footer-column--brand,
  .footer-column--meta {
    padding-top: 0;
  }

  .hero-quickcards,
  .banquet-grid {
    grid-template-columns: 1fr;
  }

  .menu-list {
    grid-template-columns: 1fr;
  }

  .menu-browser__top {
    flex-direction: column;
    gap: 1rem;
  }

  .menu-legend {
    min-width: 0;
  }

  .menu-legend__title,
  .menu-legend__items {
    text-align: left;
    justify-content: flex-start;
  }

  .gallery-card,
  .gallery-card:nth-child(n) {
    flex-basis: calc((100% - 0.35rem) / 2);
    min-width: 0;
    height: 13rem;
  }

  .story-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .legal-card--wide {
    grid-column: auto;
  }

  .origins-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy h1,
  .section-heading h2 {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .header-bar {
    padding: 0.48rem 0.7rem;
  }

  .brand {
    gap: 0.7rem;
  }

  .brand__mark {
    width: 2.05rem;
    height: 2.05rem;
  }

  .brand__hanzi {
    font-size: 1.9rem;
  }

  .brand__latin {
    font-size: 2rem;
  }

  .language-switcher {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    align-items: stretch;
    justify-content: stretch;
    border-radius: 0 0 3px 3px;
  }

  .site-nav.is-open {
    display: grid;
  }

  .site-nav a {
    width: 100%;
    text-align: center;
  }

  .site-nav__languages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.2rem 0.2rem 0;
    margin-top: 0.35rem;
    border-top: 1px solid rgba(255, 225, 155, 0.14);
  }

  .site-nav__languages .language-switcher__link {
    min-width: 5.2rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.18);
  }

  .hero-section {
    padding-top: 9.6rem;
  }

  .hero-copy h1 {
    font-size: 2rem;
  }

  .section {
    padding: 4.5rem 0;
  }

  .section-heading h2 {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .menu-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "price";
    gap: 0.38rem;
  }
}

@media (max-width: 560px) {
  :root {
    --container: min(100vw - 1rem, 100vw - 1rem);
    --header-container: 100vw;
  }

  .header-bar {
    border-radius: 0 0 3px 3px;
    background: linear-gradient(180deg, #a20d0d, #720505);
  }

  .header-stack.is-menu-open .header-bar {
    border-radius: 0;
  }

  .hero-section {
    min-height: auto;
    padding-bottom: 4rem;
  }

  .frame-card,
  .menu-browser,
  .banquet-card,
  .hours-card,
  .hours-sidecard,
  .contact-card,
  .legal-card {
    border-radius: 20px;
  }

  .feature-card,
  .gallery-card {
    border-radius: var(--single-radius);
  }

  .frame-card,
  .menu-browser,
  .banquet-card,
  .hours-card,
  .hours-sidecard,
  .contact-card,
  .legal-card {
    padding: 1rem;
  }

  .menu-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-filter {
    width: 100%;
    justify-content: center;
  }

  .section--gallery .container {
    width: min(100vw - 1rem, 100vw - 1rem);
  }

  .story-facts {
    grid-template-columns: 1fr;
  }

  .gallery-card,
  .gallery-card:nth-child(n) {
    flex-basis: 100%;
    min-width: 0;
    height: 13rem;
  }

  .gallery-grid .gallery-card:nth-child(n + 4) {
    display: none;
  }

  .frame-card--hero {
    padding: 0.75rem;
  }

  .hero-quickcard {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .hours-row {
    align-items: start;
    flex-direction: column;
  }

  .hours-row__value {
    text-align: left;
  }
}

/* === CSS: z-htmx-confirm.css [core] === */
.confirm-modal[hidden]{ display:none; }
  .confirm-modal{ position:fixed; inset:0; z-index:9999; }
  .confirm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  .confirm-modal__panel{
    position:relative; margin:auto; top:30vh; max-width:520px; width:calc(100% - 2rem);
    background:#111; color:#fff; border-radius:12px;
  corner-shape: superellipse(1.5); padding:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.4);
  }
  .confirm-modal__title{ margin:0 0 .5rem; font-size:1.125rem; }
.confirm-modal__text{ margin:0 0 1rem; opacity:.9; white-space:pre-wrap; }
  .confirm-modal__actions{ display:flex; gap:.5rem; justify-content:flex-end; }
  .btn{ padding:.6rem .9rem; border-radius:.6rem;
  corner-shape: superellipse(1.5); border:0; cursor:pointer; }
  .btn--ghost{ background:transparent; color:#fff; outline:1px solid rgba(255,255,255,.25); }
  .btn--danger{ background:#e5484d; color:#fff; }

/* === CSS: z-nsb-box.css [core] === */
#nsbbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(10, 8, 12, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#nsbbox.open {
  display: flex;
}

#nsbbox .nsb-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 1280px);
  max-width: 100%;
  max-height: calc(100vh - 8rem);
}

#nsbbox img,
#nsbbox iframe {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  border: 0;
  border-radius: 1rem;
  corner-shape: superellipse(1.5);
  background: #0b0b0d;
  box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, 0.45);
}

#nsbbox img {
  width: auto;
  height: auto;
  object-fit: contain;
}

#nsbbox iframe {
  width: min(92vw, 1280px);
  height: min(80vh, 820px);
}

#nsbbox .nsb-caption {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  max-width: min(90vw, 900px);
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  corner-shape: superellipse(1.5);
  background: rgba(9, 9, 12, 0.72);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}

#nsbbox .nsb-close,
#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.82);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  text-align: center;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

#nsbbox .nsb-close:hover,
#nsbbox .nsb-prev:hover,
#nsbbox .nsb-next:hover {
  transform: scale(1.06);
  background: rgba(24, 24, 30, 0.96);
  border-color: rgba(255, 255, 255, 0.36);
}

#nsbbox .nsb-close {
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.6rem;
  padding-top: 2px;
}

#nsbbox .nsb-prev,
#nsbbox .nsb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  padding-bottom: 5px;
}

#nsbbox .nsb-prev:hover,
#nsbbox .nsb-next:hover {
  transform: translateY(-50%) scale(1.06);
}

#nsbbox .nsb-prev {
  left: 1.5rem;
  padding-right: 2px;
}

#nsbbox .nsb-next {
  right: 1.5rem;
  padding-left: 4px;
}

#nsbbox.nsbbox--iframe .nsb-prev,
#nsbbox.nsbbox--iframe .nsb-next {
  display: none;
}

#nsbbox.fade-out .nsb-media > * {
  opacity: 0;
  transform: translateX(var(--dir, 0));
}

#nsbbox .nsb-media > * {
  transition: opacity 280ms ease, transform 280ms ease;
}

@media (max-width: 900px) {
  #nsbbox {
    padding: 1rem;
  }

  #nsbbox .nsb-media,
  #nsbbox img,
  #nsbbox iframe {
    max-height: calc(100vh - 6.5rem);
  }

  #nsbbox .nsb-prev,
  #nsbbox .nsb-next {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
  }

  #nsbbox .nsb-prev {
    left: 0.75rem;
  }

  #nsbbox .nsb-next {
    right: 0.75rem;
  }

  #nsbbox .nsb-close {
    top: 0.75rem;
    right: 0.75rem;
  }

  #nsbbox .nsb-caption {
    bottom: 0.85rem;
    font-size: 0.88rem;
    padding: 0.6rem 0.85rem;
  }
}

/* === CSS: zz-anim-preview.css [core] === */
#slow-anim * {
  transition-duration: 2.5s !important;
}

/* === CSS: zzz-loader.css [root] === */
.htmx-indicator {
  display: none;
}
.htmx-request {
  display: block;
}
#loader.htmx-indicator {
  display: none;
}
#loader.htmx-request {
  display: block;
  animation: load 12s cubic-bezier(0.45, 0, 0.25, 1) 1;
}
#loader {
  pointer-events: none;
  display: block;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;
  margin: 0;
  width: 100%;
  background: var(--loader);
  height: 3px;
  /* opacity: 1;
  animation: load 8s linear 1; */
}
@keyframes load {
  0% {
    width: 0;
  }
  5% {
    width: 0;
  }
  6% {
    width: 10%;
  }
  100% {
    width: 100%;
  }
}