@font-face {
  font-family: Literata;
  src: url("fonts/literata-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url("fonts/literata-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url("fonts/literata-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url("fonts/literata-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Literata;
  src: url("fonts/literata-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/* Georgia scaled to Literata's average glyph width and vertical metrics, so the swap from the fallback to the web
   font keeps line breaks and line boxes (CLS 0). Regenerate the numbers whenever the Literata files change. */
@font-face {
  font-family: "Literata fallback";
  src: local("Georgia");
  font-weight: 400;
  size-adjust: 106.78%;
  ascent-override: 110.23%;
  descent-override: 28.85%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-weight: 400;
  font-style: italic;
  size-adjust: 98.86%;
  ascent-override: 119.06%;
  descent-override: 31.16%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 600;
  size-adjust: 95.59%;
  ascent-override: 123.14%;
  descent-override: 32.22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata fallback";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 700;
  size-adjust: 97.63%;
  ascent-override: 120.56%;
  descent-override: 31.55%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Literata fallback";
  src: local("Georgia Bold Italic"), local("Georgia-BoldItalic");
  font-weight: 600 700;
  font-style: italic;
  size-adjust: 89.98%;
  ascent-override: 130.81%;
  descent-override: 34.23%;
  line-gap-override: 0%;
}
* {
  box-sizing: border-box;
}
/* Layout-sized images (site/components/Picture.astro): the <img> is styled and laid out as if it had no wrapper. */
picture {
  display: contents;
}
picture > source {
  display: none;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}
body {
  margin: 0;
  background: var(--ze-color-surface) image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) repeat;
  background-size: 600px;
  color: var(--ze-color-text);
  font:
    400 1rem/1.7 var(--ze-font-body);
  accent-color: var(--ze-oxblood);
  text-rendering: optimizeLegibility;
}
::selection {
  color: var(--ze-vellum);
  background: var(--ze-oxblood);
}
:focus-visible {
  outline: 3px solid var(--ze-color-focus);
  outline-offset: 5px;
}
a {
  color: var(--ze-color-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration: underline;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
summary,
label,
a,
input {
  touch-action: manipulation;
}
button,
summary {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
button {
  color: inherit;
}
/* Icons without their own size are 24px; sized SVGs (Leaflet's vector layer, drawings) keep theirs. */
:where(svg:not([width]):not([height])) {
  width: 24px;
  height: 24px;
}
svg {
  flex: none;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ze-icon-fill {
  fill: currentColor;
  stroke: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3,
h4,
.ze-display {
  font-family: var(--ze-font-display);
  color: var(--ze-color-heading);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.7rem, 4.8vw, 4.75rem);
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
h2 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  margin: 0 0 1.2rem;
}
h3 {
  font-size: 1.65rem;
  margin: 0 0 0.6rem;
}
h4 {
  font-size: 1.35rem;
  margin: 0 0 0.5rem;
}
p {
  margin: 0 0 1.1rem;
}
p:last-child {
  margin-bottom: 0;
}
.ze-lede {
  font-family: var(--ze-font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.3;
}
.ze-label {
  font:
    600 0.75rem/1.4 var(--ze-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ze-muted,
figcaption {
  color: var(--ze-color-text-muted);
}
.ze-small,
figcaption {
  font-size: 0.82rem;
  line-height: 1.6;
}
.ze-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;
}
.ze-skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  background: var(--ze-vellum);
  padding: 8px 20px;
  transform: translateY(-150%);
}
.ze-skip:focus {
  transform: none;
}
/* NAV8: a bound leather cover, a stitched inset, and an oxblood page lip. */
.ze-header {
  position: relative;
  z-index: 20;
  padding: 9px 18px 15px;
  background: var(--ze-oxblood-deep);
  border-bottom: 2px solid var(--ze-brass);
  box-shadow: 0 3px 7px #1a241d4d;
  color: var(--ze-vellum);
}
.ze-header::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  border-bottom: 1px dashed #cdab7160;
  pointer-events: none;
}
.ze-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  max-width: 1760px;
  min-height: 75px;
  margin: auto;
  padding: 14px 30px;
  border: 1px solid var(--ze-brass-light);
  border-radius: 4px 4px 12px 12px;
  background:
    linear-gradient(#174638c9, #0c3028d4),
    image-set(url("https://assets.zeldaelements.net/assets/ze/leather-768.deae12d8a6af.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/leather-768.dcd2f010e546.webp") 1x type("image/webp")) repeat;
  background-size: auto, 384px;
  box-shadow:
    inset 0 2px 3px #decb963b,
    inset 0 -4px 7px #001e1abd,
    0 2px 0 #322917;
}
.ze-header-inner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed #c6bb8857;
  border-radius: 3px 3px 7px 7px;
  pointer-events: none;
}
.ze-logo {
  width: clamp(230px, 23vw, 335px);
  flex: none;
  line-height: 0;
}
.ze-logo img {
  width: 100%;
  height: auto;
}
.ze-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
  font-family: var(--ze-font-display);
  font-size: 1.25rem;
}
.ze-nav > a,
.ze-nav > details > summary {
  padding: 10px 17px;
  color: var(--ze-vellum);
  text-decoration: none;
  text-shadow: 0 -1px 1px #000;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  gap: 8px;
  align-items: center;
  list-style: none;
}
.ze-nav summary::-webkit-details-marker {
  display: none;
}
.ze-nav summary svg {
  width: 15px;
  height: 15px;
}
.ze-nav > a:hover,
.ze-nav > details > summary:hover {
  box-shadow: inset 0 0 16px #d5b77429;
}
.ze-nav [aria-current="page"],
.ze-nav > details[open] > summary {
  background: linear-gradient(#783743, #54232c);
  box-shadow:
    inset 0 1px 0 #e3bc8066,
    inset 0 -2px 5px #3a121f;
  border-radius: 2px;
}
.ze-header :focus-visible {
  outline-color: var(--ze-brass-light);
}
.ze-menu-button {
  display: none;
  background: none;
  border: 0;
  color: var(--ze-vellum);
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.ze-mega {
  position: absolute;
  top: calc(100% - 5px);
  right: 16px;
  width: min(850px, calc(100vw - 40px));
  padding: 28px;
  background: var(--ze-green-deep) image-set(url("https://assets.zeldaelements.net/assets/ze/leather-768.deae12d8a6af.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/leather-768.dcd2f010e546.webp") 1x type("image/webp")) center/600px;
  border: 1px solid var(--ze-brass);
  box-shadow: 0 12px 25px #1117;
  color: var(--ze-vellum);
  z-index: 25;
  max-height: 70vh;
  overflow: auto;
}
.ze-mega h3 {
  color: var(--ze-vellum);
}
.ze-mega a {
  color: var(--ze-vellum);
  display: block;
  padding: 10px 0;
  font-size: 1.15rem;
}
.ze-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.ze-mega .ze-small {
  font-family: var(--ze-font-body);
  color: var(--ze-brass-light);
}
.ze-search {
  width: min(420px, calc(100vw - 40px));
}
.ze-search input {
  width: 100%;
  padding: 10px 12px;
  background: var(--ze-vellum);
  color: var(--ze-ink);
  border: 1px solid var(--ze-brass);
  font-size: 1rem;
}
.ze-search-results {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ze-search-results a {
  padding: 7px 0;
}
.ze-brand-link {
  font-size: 1rem;
  border-left: 1px solid #baa17477;
  margin-left: 10px;
}
.ze-shell {
  display: grid;
  grid-template-columns: var(--ze-rail) minmax(0, 1fr);
  max-width: 1760px;
  margin: auto;
  min-height: 90vh;
}
.ze-sidebar {
  border-right: 1px solid var(--ze-border, var(--ze-rule));
  background: linear-gradient(90deg, #c5a87912, transparent 85%);
  padding: 40px 22px 60px;
  position: relative;
}
.ze-sidebar-inner {
  position: sticky;
  top: 30px;
}
.ze-sidebar h2 {
  font-size: 1.7rem;
  padding: 0 12px;
}
.ze-sidebar ul {
  padding: 0;
  list-style: none;
  margin: 20px 0;
}
.ze-sidebar li {
  margin: 2px 0;
}
.ze-sidebar a {
  display: block;
  padding: 10px 14px;
  min-height: 44px;
  color: var(--ze-ink);
  text-decoration: none;
  position: relative;
  line-height: 1.4;
  font-size: 0.92rem;
}
.ze-sidebar a:hover {
  background: #b39b6020;
}
.ze-sidebar a[aria-current] {
  color: var(--ze-vellum);
  background: var(--ze-oxblood);
  box-shadow:
    inset 0 1px #bd9a6266,
    inset 0 -1px #411627;
}
.ze-sidebar a[aria-current]::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 17px;
  background: var(--ze-oxblood);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ze-sidebar .ze-sidebar-note {
  border-top: 1px solid var(--ze-rule);
  padding: 20px 12px 0;
  margin-top: 26px;
  font-size: 0.77rem;
  color: var(--ze-muted);
}
.ze-main {
  min-width: 0;
}
.ze-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.ze-breadcrumb svg {
  height: 15px;
  width: 15px;
}
.ze-breadcrumb a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
}
.ze-brand-hero {
  min-height: 425px;
  position: relative;
  isolation: isolate;
  padding: 40px var(--ze-gutter) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ze-brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp")) right center/cover no-repeat;
  mask-image: linear-gradient(#000 70%, transparent);
}
.ze-brand-hero .ze-breadcrumb {
  margin-bottom: 36px;
}
.ze-brand-hero h1 {
  max-width: 6.5em;
}
.ze-brand-hero p {
  max-width: 29em;
}
.ze-brand-hero .ze-lede {
  max-width: 22em;
}
.ze-brand-hero-copy {
  width: 58%;
  text-shadow: 0 1px 7px var(--ze-parchment);
}
.ze-section {
  padding: 48px 0;
  border-top: 1px solid var(--ze-rule);
  scroll-margin-top: 30px;
}
.ze-sections {
  padding: 0 var(--ze-gutter);
  max-width: 1300px;
  margin: 0 auto;
}
.ze-section-intro {
  max-width: var(--ze-read-max);
  margin-bottom: 28px;
}
.ze-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
}
.ze-rule {
  height: 1px;
  background: var(--ze-rule);
  margin: 28px 0;
  position: relative;
}
.ze-rule--triforce {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 28px;
  background: none;
}
/* The rule stops short of the Triforce on both sides, so the ornament needs no backing and the paper shows through. */
.ze-rule--triforce::before,
.ze-rule--triforce::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ze-rule);
}
.ze-rule--triforce svg {
  flex: none;
  width: 30px;
  height: 28px;
  color: var(--ze-brass);
}
.ze-logo-board {
  min-height: 195px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background:
    linear-gradient(#174638ba, #0c3028c9),
    image-set(url("https://assets.zeldaelements.net/assets/ze/leather-768.deae12d8a6af.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/leather-768.dcd2f010e546.webp") 1x type("image/webp")) center/384px;
  border: 1px solid var(--ze-brass);
  position: relative;
}
.ze-logo-board::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px dashed #cdb78566;
}
.ze-logo-board img {
  max-width: 550px;
  width: 100%;
}
.ze-logo-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 12px 0 28px;
  font-size: 0.8rem;
  color: var(--ze-muted);
}
.ze-note-list {
  padding-left: 22px;
  margin: 0;
}
.ze-note-list li {
  padding: 4px 0;
}
.ze-colour-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.ze-swatch {
  padding: 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: 0.9rem;
  min-width: 0;
}
.ze-swatch-sample {
  height: 96px;
  display: block;
  border: 1px solid #7c673b33;
  margin-bottom: 12px;
  background: var(--swatch);
}
.ze-swatch strong,
.ze-swatch code {
  display: block;
}
.ze-swatch code {
  color: var(--ze-muted);
  font-size: 0.78rem;
  margin-top: 3px;
}
.ze-swatch:hover .ze-swatch-sample {
  outline: 1px solid var(--ze-brass);
  outline-offset: 4px;
}
.ze-type-specimen {
  border-top: 1px solid var(--ze-rule);
  padding: 22px 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
}
.ze-type-specimen .ze-small {
  color: var(--ze-muted);
}
.ze-type-specimen h2,
.ze-type-specimen h3,
.ze-type-specimen p {
  margin: 0;
}
.ze-type-display {
  font:
    600 clamp(2.5rem, 4vw, 4rem) / 1.03 var(--ze-font-display);
  letter-spacing: -0.02em;
  color: var(--ze-ink);
}
.ze-type-body {
  max-width: 62ch;
}
.ze-table-scroll {
  max-width: 100%;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.84rem;
}
th,
td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid #baa17488;
  vertical-align: top;
}
th {
  font-weight: 600;
  color: var(--ze-ink);
}
code {
  font-size: 0.83em;
  overflow-wrap: anywhere;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--ze-paper-inset);
  padding: 24px;
  font-size: 0.78rem;
  line-height: 1.6;
}
.ze-plate {
  margin: 0 0 20px;
}
.ze-plate img {
  width: 100%;
  border: 1px solid var(--ze-rule);
}
.ze-plate figcaption {
  margin-top: 10px;
}
/* Buttons are embossed material: a dyed face over the brand leather or paper tile, a gold rim with a dark outer
   edge, a bevel (light top, dark bottom), and a soft drop shadow. Hover lifts and brightens the face; pressing
   sinks it, turning the bevel inside out. Variants only swap the face variables. */
.ze-btn {
  --ze-btn-face: var(--ze-crimson);
  --ze-btn-face-deep: var(--ze-crimson-deep);
  --ze-btn-tile: image-set(url("https://assets.zeldaelements.net/assets/ze/leather-cloud-patina-768.2843deb27b46.webp") 1x type("image/webp")) center / 384px;
  --ze-btn-blend: soft-light;
  --ze-btn-rim: var(--ze-gold);
  --ze-btn-edge: #4a2c14;
  --ze-btn-lit: #ffe2ad66;
  --ze-btn-shade: #2a080d8c;
  --ze-btn-ink: #fff3da;
  --ze-btn-ink-shadow: 0 1px 1px #33080eb3;
  --ze-btn-inlay: #e6c47a4d;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 26px;
  color: var(--ze-btn-ink);
  background-color: var(--ze-btn-face-deep);
  background-image:
    linear-gradient(180deg, #ffffff47 0%, #ffffff14 45%, #0000 55%, #00000047 100%),
    var(--ze-btn-tile),
    linear-gradient(var(--ze-btn-face), var(--ze-btn-face-deep));
  background-blend-mode: normal, var(--ze-btn-blend), normal;
  border: 1px solid var(--ze-btn-rim);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px var(--ze-btn-edge),
    inset 0 0 0 1px #0000004d,
    inset 0 0 0 2px var(--ze-btn-inlay),
    inset 0 2px 0 1px var(--ze-btn-lit),
    inset 0 -3px 0 1px var(--ze-btn-shade),
    0 2px 2px #2b1a0c40,
    0 6px 10px -4px #2b1a0c66;
  font:
    600 1.12rem/1.2 var(--ze-font-display);
  letter-spacing: 0.01em;
  text-decoration: none;
  text-shadow: var(--ze-btn-ink-shadow);
  transition:
    transform 0.14s ease,
    box-shadow 0.14s ease,
    filter 0.14s ease;
}
.ze-btn:hover {
  color: var(--ze-btn-ink);
  text-decoration: none;
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px var(--ze-btn-edge),
    inset 0 0 0 1px #0000004d,
    inset 0 0 0 2px var(--ze-btn-inlay),
    inset 0 2px 0 1px var(--ze-btn-lit),
    inset 0 -3px 0 1px var(--ze-btn-shade),
    0 3px 3px #2b1a0c40,
    0 9px 14px -6px #2b1a0c73;
}
.ze-btn:active {
  filter: brightness(0.96);
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px var(--ze-btn-edge),
    inset 0 0 0 1px #0000004d,
    inset 0 0 0 2px var(--ze-btn-inlay),
    inset 0 3px 5px 1px var(--ze-btn-shade),
    inset 0 -1px 0 1px var(--ze-btn-lit),
    0 1px 1px #2b1a0c40;
}
.ze-btn svg {
  width: 18px;
  height: 18px;
}
.ze-btn--secondary {
  --ze-btn-face: #fffaee;
  --ze-btn-face-deep: #ead8b4;
  --ze-btn-tile: image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) center / 420px;
  --ze-btn-blend: multiply;
  --ze-btn-edge: #7a5f30;
  --ze-btn-lit: #ffffffcc;
  --ze-btn-shade: #8d6f3a59;
  --ze-btn-ink: var(--ze-ink);
  --ze-btn-ink-shadow: 0 1px 0 #fffaf0;
  --ze-btn-inlay: #b8964f40;
}
.ze-btn--secondary:hover {
  color: var(--ze-btn-ink);
  filter: brightness(1.03);
}
.ze-btn--map {
  --ze-btn-face: #28506a;
  --ze-btn-face-deep: var(--ze-navy);
  --ze-btn-shade: #06142080;
  --ze-btn-ink-shadow: 0 1px 1px #061420b3;
}
.ze-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 24px 0;
}
.ze-save-feedback {
  display: inline-block;
  min-height: 1.5em;
  font-size: 0.8rem;
  color: var(--ze-muted);
}
.ze-component-demo {
  padding: 26px 0;
}
.ze-component-demo + .ze-component-demo {
  border-top: 1px solid #baa17466;
}
.ze-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ze-rule);
  flex-wrap: wrap;
}
.ze-tabs a {
  white-space: nowrap;
  display: block;
  padding: 12px 4px;
  color: var(--ze-ink);
  text-decoration: none;
  min-height: 48px;
}
.ze-tabs a[aria-current] {
  border-bottom: 3px solid var(--ze-oxblood);
}
.ze-mini-rail {
  max-width: 270px;
  padding: 18px 24px 18px 0;
  border-right: 1px solid var(--ze-rule);
}
.ze-mini-rail a {
  display: block;
  padding: 8px 20px;
  color: var(--ze-ink);
  text-decoration: none;
  position: relative;
}
.ze-mini-rail a[aria-current] {
  background: var(--ze-oxblood);
  color: var(--ze-vellum);
}
.ze-mini-rail a[aria-current]::after {
  position: absolute;
  content: "";
  left: 100%;
  top: 0;
  bottom: 0;
  width: 16px;
  background: var(--ze-oxblood);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ze-checklist {
  border: 0;
  padding: 0;
  margin: 0;
}
.ze-checklist legend {
  font:
    600 1.7rem var(--ze-font-display);
  margin-bottom: 12px;
}
.ze-checklist label {
  display: flex;
  gap: 12px;
  min-height: 48px;
  align-items: center;
  border-bottom: 1px solid #baa17455;
}
.ze-checklist input {
  width: 19px;
  height: 19px;
  flex: none;
}
.ze-checklist label:has(input:checked) {
  color: var(--ze-complete);
}
progress {
  width: 100%;
  height: 8px;
  accent-color: var(--ze-complete);
  margin-top: 15px;
}
.ze-inline-disclosure {
  border-top: 1px solid var(--ze-rule);
  border-bottom: 1px solid var(--ze-rule);
  margin: 20px 0;
}
.ze-inline-disclosure summary {
  padding: 14px 0;
}
.ze-inline-disclosure > div {
  padding: 0 0 20px;
}
.ze-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.ze-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 70px;
  font-size: 0.7rem;
  color: var(--ze-muted);
}
.ze-icon-item svg {
  color: var(--ze-ink);
}
.ze-layout-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.ze-layout-picker a {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ze-rule);
  text-decoration: none;
  color: var(--ze-ink);
}
.ze-layout-picker a[aria-current] {
  background: var(--ze-oxblood);
  color: var(--ze-vellum);
}
.ze-study {
  margin-bottom: 40px;
}
.ze-study[hidden] {
  display: none;
}
.ze-study img {
  width: 100%;
  border: 1px solid var(--ze-rule);
  margin: 18px 0 12px;
}
.ze-study h3 {
  margin-bottom: 8px;
}
.ze-study .ze-small {
  max-width: 75ch;
}
.ze-pass {
  color: var(--ze-complete);
  font-weight: 600;
}
.ze-footer {
  padding: 36px var(--ze-gutter);
  color: var(--ze-vellum);
  background: var(--ze-green-deep);
  border-top: 2px solid var(--ze-brass);
  display: flex;
  justify-content: space-between;
  gap: 28px;
  font-size: 0.82rem;
}
.ze-footer a {
  color: var(--ze-vellum);
}
.ze-status {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ze-green-deep);
  color: var(--ze-vellum);
  padding: 12px 24px;
  z-index: 70;
  box-shadow: 0 4px 20px #0003;
  font-size: 0.85rem;
  max-width: 90vw;
}
.ze-status:empty {
  display: none;
}
/* Actual template primitives, also used by the brand page. */
.ze-container {
  max-width: var(--ze-site-max);
  padding: 0 var(--ze-gutter);
  margin: auto;
}
.ze-preview-note {
  font-size: 0.76rem;
  background: var(--ze-paper-inset);
  border-bottom: 1px solid var(--ze-rule);
  padding: 8px var(--ze-gutter);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.ze-feature {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  isolation: isolate;
  padding-top: 56px;
  padding-bottom: 56px;
}
.ze-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp")) right center/cover no-repeat;
  mask-image: linear-gradient(#000 80%, transparent);
}
.ze-feature-copy {
  max-width: 470px;
}
.ze-feature-copy p {
  max-width: 36ch;
}
.ze-home-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  padding-bottom: 64px;
}
.ze-section-heading {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--ze-rule);
  border-bottom: 1px solid var(--ze-rule);
  padding: 14px 0;
  margin-bottom: 24px;
}
.ze-section-heading h2 {
  font:
    600 0.8rem/1.4 var(--ze-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.ze-section-heading > a {
  font-size: 0.8rem;
}
.ze-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ze-story {
  color: var(--ze-ink);
  text-decoration: none;
}
.ze-story img {
  aspect-ratio: 3/2;
  object-fit: cover;
  border: 1px solid var(--ze-rule);
  margin-bottom: 18px;
}
.ze-story h3 {
  font-size: 1.8rem;
}
.ze-story p {
  font-size: 0.88rem;
}
.ze-guide-row {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--ze-rule);
  text-decoration: none;
}
.ze-guide-row strong {
  display: block;
  font:
    600 1.5rem/1.2 var(--ze-font-display);
  color: var(--ze-ink);
}
.ze-guide-row span {
  font-size: 0.84rem;
  color: var(--ze-muted);
}
.ze-article-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 44px;
  padding: 8px var(--ze-gutter) 72px;
  max-width: 1170px;
  margin: auto;
}
.ze-local-toc {
  font-size: 0.84rem;
}
.ze-local-toc strong {
  display: block;
  margin-bottom: 14px;
}
.ze-local-toc a {
  display: block;
  padding: 6px 0;
}
.ze-article {
  max-width: var(--ze-read-max);
}
.ze-article h2 {
  margin-top: 32px;
}
.ze-article h2:first-child {
  margin-top: 0;
}
.ze-article figure {
  margin: 28px 0;
}
.ze-article figcaption {
  margin-top: 8px;
}
.ze-ad {
  border: 1px solid #8a795d55;
  background: var(--ze-paper-inset);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ze-muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ze-inline-ad {
  max-width: 728px;
  min-height: 90px;
  margin: 40px auto;
}
.ze-game-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-size: 0.85rem;
  padding: 14px;
  border-bottom: 1px solid var(--ze-rule);
}
@media (min-width: 1600px) {
  .ze-brand-hero {
    min-height: 490px;
  }
  .ze-brand-hero-copy {
    max-width: 600px;
  }
  .ze-sections {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (max-width: 1150px) {
  .ze-header-inner {
    gap: 16px;
    padding: 14px 20px;
  }
  .ze-nav {
    gap: 2px;
    font-size: 1.1rem;
  }
  .ze-nav > a,
  .ze-nav > details > summary {
    padding: 9px 12px;
  }
  .ze-logo {
    width: 260px;
  }
  .ze-brand-link {
    margin-left: 0;
  }
  .ze-shell {
    --ze-rail: 210px;
  }
  .ze-sidebar {
    padding-left: 12px;
    padding-right: 18px;
  }
  .ze-brand-hero-copy {
    width: 65%;
  }
  .ze-colour-grid {
    gap: 16px;
  }
  .ze-article-grid {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 28px;
  }
}
@media (max-width: 900px) {
  .ze-header-inner {
    flex-wrap: wrap;
  }
  .ze-logo {
    width: 250px;
    margin-right: auto;
  }
  .ze-menu-button {
    display: flex;
  }
  .ze-nav {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .js .ze-nav[data-collapsed="true"] {
    display: none;
  }
  .ze-mega {
    left: 10px;
    right: 10px;
    width: auto;
  }
  .ze-header {
    padding: 8px 10px 13px;
  }
  .ze-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .ze-sidebar {
    padding: 15px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--ze-rule);
  }
  .ze-sidebar-inner {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .ze-sidebar h2 {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
  }
  .ze-sidebar ul {
    display: flex;
    gap: 8px;
    margin: 0;
    overflow: auto;
    padding: 0 18px 0 0;
  }
  .ze-sidebar li {
    flex: none;
  }
  .ze-sidebar a {
    padding: 10px;
    font-size: 0.8rem;
  }
  .ze-sidebar a[aria-current]::after {
    display: none;
  }
  .ze-sidebar-note {
    display: none;
  }
  .ze-brand-hero {
    min-height: 380px;
  }
  .ze-brand-hero-copy {
    width: 60%;
  }
  .ze-brand-hero h1 {
    font-size: 3.5rem;
  }
  .ze-sections {
    padding: 0 32px;
  }
  .ze-article-grid {
    grid-template-columns: 145px minmax(0, 1fr);
  }
  .ze-footer {
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 600px) {
  html {
    scroll-padding-top: 20px;
  }
  .ze-logo {
    width: 210px;
  }
  .ze-header-inner {
    padding: 14px 16px;
    gap: 12px;
  }
  .ze-nav {
    justify-content: flex-start;
    gap: 4px;
  }
  .ze-nav > a,
  .ze-nav > details > summary {
    font-size: 1.14rem;
    padding: 10px 12px;
  }
  .ze-brand-link {
    border-left: 0;
  }
  .ze-mega {
    padding: 22px;
  }
  .ze-mega-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ze-sidebar-inner {
    display: block;
  }
  .ze-sidebar h2 {
    display: none;
  }
  .ze-brand-hero {
    padding: 26px 24px 190px;
    min-height: 540px;
    justify-content: flex-start;
  }
  .ze-brand-hero::before {
    background-position: 60% bottom;
    background-size: auto 360px;
    mask-image: linear-gradient(transparent 27%, #000 64%, transparent);
  }
  .ze-brand-hero-copy {
    width: 100%;
    text-shadow: none;
  }
  .ze-brand-hero .ze-breadcrumb {
    margin-bottom: 24px;
  }
  .ze-brand-hero h1 {
    font-size: 3.25rem;
    max-width: 8em;
  }
  .ze-brand-hero p {
    max-width: 31ch;
  }
  .ze-brand-hero .ze-lede {
    font-size: 1.6rem;
    max-width: 24ch;
  }
  .ze-sections {
    padding: 0 24px;
  }
  .ze-section {
    padding: 34px 0;
  }
  .ze-two-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ze-colour-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
  }
  .ze-swatch-sample {
    height: 80px;
  }
  .ze-type-specimen {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ze-logo-board {
    padding: 32px;
    min-height: 145px;
  }
  .ze-logo-caption {
    flex-direction: column;
    gap: 4px;
  }
  .ze-actions {
    gap: 10px;
  }
  .ze-btn {
    padding: 12px 18px;
  }
  .ze-study img {
    margin-top: 12px;
  }
  .ze-tabs {
    gap: 20px;
  }
  .ze-feature {
    min-height: 560px;
    align-items: flex-start;
    padding-top: 36px;
    padding-bottom: 240px;
  }
  .ze-feature::before {
    background-size: auto 380px;
    background-position: 65% bottom;
    mask-image: linear-gradient(transparent 26%, #000 75%, transparent);
  }
  .ze-feature-copy {
    max-width: 100%;
  }
  .ze-feature h1 {
    font-size: 3rem;
    max-width: 11ch;
  }
  .ze-home-grid {
    grid-template-columns: 1fr;
  }
  .ze-story-grid {
    grid-template-columns: 1fr;
  }
  .ze-story img {
    width: 100%;
  }
  .ze-article-grid {
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
    gap: 28px;
  }
  .ze-local-toc {
    border-bottom: 1px solid var(--ze-rule);
    padding-bottom: 20px;
  }
  .ze-local-toc a {
    display: inline-block;
    padding: 5px 16px 5px 0;
  }
  .ze-preview-note {
    display: block;
  }
  .ze-preview-note a {
    display: inline-block;
    margin-left: 10px;
  }
  .ze-section-heading {
    align-items: center;
  }
  .ze-game-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 8px 16px;
  }
  .ze-game-strip a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px;
    white-space: normal;
    text-decoration: none;
  }
  .ze-logo {
    max-width: calc(100% - 82px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media print {
  .ze-header,
  .ze-sidebar,
  .ze-footer,
  .ze-layout-picker,
  .ze-actions,
  .ze-local-toc,
  .ze-preview-note {
    display: none;
  }
  body {
    background: white;
    color: black;
    font-size: 11pt;
  }
  .ze-shell,
  .ze-article-grid {
    display: block;
  }
  .ze-brand-hero {
    min-height: 0;
    padding: 0;
  }
  .ze-brand-hero::before {
    display: none;
  }
  .ze-section {
    break-inside: avoid;
  }
  .ze-study[hidden] {
    display: block;
  }
}

/* Keep the mobile rail's own scroll area from setting the page's minimum width. */
.ze-sidebar,
.ze-sidebar-inner,
.ze-sidebar nav {
  min-width: 0;
}
.ze-endcap {
  width: 54px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #9d996a55;
  border-radius: 3px;
  box-shadow:
    inset 0 2px 3px #b6c79535,
    inset 0 -3px 7px #001710b0;
  color: #061f19;
  background:
    url("engraving.webp") center / auto 65px no-repeat,
    #17463855;
}
.ze-endcap svg {
  width: 27px;
  height: 27px;
  filter: drop-shadow(0 1px 0 #b6c79550);
}
.ze-header-inner {
  gap: 22px;
  background:
    linear-gradient(#17463880, #0c3028ab),
    image-set(url("https://assets.zeldaelements.net/assets/ze/leather-768.deae12d8a6af.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/leather-768.dcd2f010e546.webp") 1x type("image/webp")) repeat;
  background-size: auto, 384px;
}
.ze-nav > a[aria-current] {
  position: relative;
}
.ze-nav > a[aria-current]::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--ze-brass-light);
  transform: rotate(45deg);
  bottom: -4px;
  left: calc(50% - 4px);
}
.ze-brand-hero::before {
  background-image:
    linear-gradient(90deg, #f7ecd580, transparent 65%), image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp"));
}
.ze-feature::before {
  background-image:
    linear-gradient(90deg, #f7ecd5c9, #f7ecd566 30%, transparent 65%),
    image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp"));
}
.ze-logo-board {
  background:
    linear-gradient(#17463880, #0c3028ab),
    image-set(url("https://assets.zeldaelements.net/assets/ze/leather-768.deae12d8a6af.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/leather-768.dcd2f010e546.webp") 1x type("image/webp")) center / 384px;
}
@media (max-width: 1300px) {
  .ze-endcap {
    display: none;
  }
}
@media (max-width: 900px) {
  .ze-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* The chosen parchment: the tile dyed a full, warm buff and clouded with a soft-light patina, so the page reads as
   paper with body rather than a flat pale tint. */
body {
  background:
    image-set(url("https://assets.zeldaelements.net/assets/ze/leather-cloud-patina-768.2843deb27b46.webp") 1x type("image/webp")) 0 0 / 900px repeat,
    image-set(url("https://assets.zeldaelements.net/assets/ze/parchment-600.58ef11e44ab6.webp") 1x type("image/webp"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.8e521d24cc99.avif") 2x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/parchment-1200.466b0bbbfe4d.webp") 2x type("image/webp")) 0 0 / 600px repeat,
    var(--ze-parchment-dye);
  background-blend-mode: soft-light, multiply, normal;
}
.ze-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}
.ze-guide-tile {
  text-decoration: none;
  color: var(--ze-ink);
}
.ze-guide-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ze-rule);
  margin-bottom: 8px;
}
.ze-guide-tile strong {
  display: block;
  font:
    600 1.2rem/1.15 var(--ze-font-display);
}
.ze-story-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1150px) and (min-width: 601px) {
  .ze-home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ze-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .ze-brand-hero {
    min-height: 0;
    padding-bottom: 280px;
  }
  .ze-brand-hero::before {
    top: auto;
    bottom: 0;
    height: 270px;
    background-image: image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp"));
    background-size: auto 320px;
    background-position: 70% center;
    mask-image: linear-gradient(transparent, #000 23%, #000 65%, transparent);
  }
  .ze-feature {
    min-height: 0;
    padding-bottom: 280px;
  }
  .ze-feature::before {
    top: auto;
    bottom: 0;
    height: 270px;
    background-image: image-set(url("https://assets.zeldaelements.net/assets/ze/forest-1600.80779f26b8bf.avif") 1x type("image/avif"), url("https://assets.zeldaelements.net/assets/ze/forest-1600.4168771e42a6.webp") 1x type("image/webp"));
    background-size: auto 320px;
    background-position: 70% center;
    mask-image: linear-gradient(transparent, #000 23%, #000 65%, transparent);
  }
  .ze-story-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Brand index: give its title a distinct lead-in, with evenly spaced link rows. */
.ze-brand-guide .ze-sidebar h2 {
  margin: 0 0 18px;
  padding: 0 14px;
}
.ze-brand-guide .ze-sidebar ul {
  margin: 0;
}
.ze-brand-guide .ze-sidebar li {
  margin: 0;
}
.ze-brand-guide .ze-sidebar a {
  min-height: 44px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
}
@media (max-width: 800px) {
  .ze-brand-guide .ze-sidebar h2 {
    display: none;
  }
  .ze-brand-guide .ze-sidebar-inner {
    padding-top: 8px;
  }
}

/* Splash images ([data-splash]) always run beneath the header: the painting starts at the top of the page and the
   header (z-index 20) sits over it. Each splash keeps its place in the flow and paints --ze-splash-reach above its
   box. On phones the rail's bar sits between the header and the page, so rail layouts reach past it too, and the
   bar stays above the painting. scripts/visual_check.mjs fails any splash that leaves a gap. */
:root {
  --ze-header-height: 104px;
  --ze-splash-reach: var(--ze-header-height);
}
body .ze-brand-hero[data-splash]::before {
  top: calc(-1 * var(--ze-splash-reach));
}
/* The compact header's height (header.css: the toolbar's stamp, twice its inset, and the 3px hem). */
@media (max-width: 800px) {
  :root {
    --ze-header-height: 67px;
  }
}
@media (max-width: 359px) {
  :root {
    --ze-header-height: 59px;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  :root {
    --ze-header-height: 79px;
  }
}
@media (max-width: 800px) {
  .ze-shell {
    --ze-splash-reach: calc(var(--ze-header-height) + 57px);
  }
  .ze-sidebar {
    position: relative;
    z-index: 2;
  }
  .ze-shell:has([data-splash]) > .ze-sidebar {
    background: #f8efe4d9;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* Narrow screens: the painting becomes a band across the top, running up under the header, with the copy below it. */
@media (max-width: 900px) {
  body .ze-brand-hero[data-splash] {
    min-height: 0;
    padding-top: 230px;
    padding-bottom: 28px;
  }
  body .ze-brand-hero[data-splash]::before {
    bottom: auto;
    height: calc(var(--ze-splash-reach) + 270px);
    background-size: cover;
    background-position: 60% 40%;
    mask-image: linear-gradient(#000 72%, transparent);
  }
}
@media (max-width: 600px) {
  body .ze-brand-hero[data-splash] {
    padding-top: 190px;
  }
  body .ze-brand-hero[data-splash]::before {
    height: calc(var(--ze-splash-reach) + 230px);
  }
}