@font-face {
  font-family: "Crimson Pro";
  src: url("../fonts/crimson-pro.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --green: #09291f;
  --green-raised: #143c2c;
  --paper: #f9edd5;
  --ink: #17221b;
  --muted: #55523e;
  --gold: #b18c43;
  --gold-light: #edcf81;
  --rule: #bba16b66;
  --cap: 1440px;
  --scene-height: min(45vh, 600px);
  --leather: url("../materials/green-suede.webp");
  --parchment: url("../materials/parchment.webp");
  color-scheme: light;
  scroll-behavior: auto;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  font-family: "Lora", Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
summary {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
button {
  border: 0;
  background: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0 0 1em;
}
h1,
h2,
h3 {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: 2.75rem;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.688rem;
  letter-spacing: -0.015em;
}
::selection {
  background: #cfb46d;
  color: #10251b;
}
:focus-visible {
  outline: 3px solid #cf9b28;
  outline-offset: 4px;
}
input {
  caret-color: var(--gold-light);
}
[hidden] {
  display: none !important;
}
.icon {
  width: 22px;
  height: 22px;
  flex: none;
  vertical-align: middle;
}
.icon-chevron {
  width: 14px;
  height: 14px;
}
.icon-triforce {
  fill: currentColor;
  stroke: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 50;
  left: 20px;
  top: 12px;
  background: var(--paper);
  padding: 12px 20px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
/* The illustration band sits mid-viewport, ending at 70vh; its masks reveal the leather above and around it. */
.scenic-backdrop {
  position: absolute;
  inset: calc(70vh - var(--scene-height)) 0 auto;
  height: var(--scene-height);
  pointer-events: none;
  overflow: hidden;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 1px 0 #071e17;
}
.scenic-backdrop:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../materials/hyrule-background.webp?v=3") center center / 2400px auto
    no-repeat;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, black 30%),
    linear-gradient(
      to right,
      transparent,
      black max(5%, calc(50% - 1160px)),
      black min(95%, calc(50% + 1160px)),
      transparent
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, black 30%),
    linear-gradient(
      to right,
      transparent,
      black max(5%, calc(50% - 1160px)),
      black min(95%, calc(50% + 1160px)),
      transparent
    );
  mask-composite: intersect;
}
.site-wrap {
  position: relative;
  width: min(var(--cap), calc(100% - 80px));
  margin: 30px auto 62px;
}
.gold-frame {
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px #efcb7955;
}
.site-header {
  position: relative;
  z-index: 10;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #fff4dc;
}
.corner {
  position: absolute;
  z-index: 3;
  width: 52px;
  height: 52px;
  background: url("../materials/gold-corner.webp") center / contain no-repeat;
  pointer-events: none;
}
.corner-tl {
  top: -7px;
  left: -7px;
}
.corner-tr {
  top: -7px;
  right: -7px;
  transform: rotate(90deg);
}
.corner-br {
  bottom: -7px;
  right: -7px;
  transform: rotate(180deg);
}
.corner-bl {
  bottom: -7px;
  left: -7px;
  transform: rotate(270deg);
}
.masthead {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 18px 32px 20px;
  min-height: 122px;
}
.site-logo {
  display: block;
  max-width: 220px;
}
.site-logo img {
  width: 100%;
}
.masthead-content {
  min-width: 0;
}
.utility-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  font-size: 1rem;
  line-height: 1.2;
  margin-bottom: 18px;
  min-height: 26px;
}
.social-links {
  display: flex;
  gap: 14px;
  margin-right: 4px;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  min-height: 26px;
}
.social-icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.nav-search {
  display: flex;
  align-items: center;
  gap: 22px;
  justify-content: space-between;
}
.fans-navigation {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}
.fans-navigation > a,
.fan-disclosure {
  padding: 0 18px;
  border-right: 1px solid #9e823966;
  white-space: nowrap;
  font-size: 1rem;
}
.fans-navigation > :first-child {
  padding-left: 0;
}
.fans-navigation > :last-child {
  border-right: 0;
  padding-right: 0;
}
.fans-navigation a:hover {
  color: var(--gold-light);
}
.search-form {
  display: flex;
  border: 1px solid var(--gold-light);
  box-shadow: inset 0 0 0 1px #5f522c;
  min-width: 200px;
  width: 265px;
  height: 39px;
  flex: none;
  background: #041b15aa;
  border-radius: 2px;
  overflow: hidden;
}
.search-form input {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff7e5;
  font-size: 1rem;
  padding: 6px 12px;
  outline-offset: -3px;
}
.search-form input::placeholder {
  color: #deceb0;
  opacity: 1;
}
.search-form button {
  width: 43px;
  flex: none;
  border-left: 1px solid var(--gold);
  color: var(--gold-light);
  display: grid;
  place-items: center;
}
.search-form button:hover {
  background: #dcc37725;
}
.search-form button:focus-visible {
  outline-offset: -4px;
}
.language-disclosure {
  position: relative;
}
.language-disclosure summary,
.fan-disclosure summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  min-height: 26px;
}
.language-disclosure summary::-webkit-details-marker,
.fan-disclosure summary::-webkit-details-marker {
  display: none;
}
.language-options,
.fan-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 30;
  min-width: 180px;
  padding: 8px 0;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  border: 1px solid var(--gold);
  box-shadow: 0 12px 22px #00180d66;
  color: #fff4dc;
}
.language-options a,
.fan-dropdown a {
  display: block;
  padding: 8px 20px;
  min-height: 38px;
}
.language-options a:hover,
.fan-dropdown a:hover {
  background: #d8b76220;
  color: #ffe59b;
}
.fan-disclosure {
  position: relative;
}
.fan-dropdown {
  left: 0;
  right: auto;
  min-width: 200px;
  top: calc(100% + 15px);
}
.mobile-fans-toggle {
  display: none;
}
.game-navigation {
  border-top: 1px solid var(--gold);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 28px;
  min-height: 126px;
}
.game-trigger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 10px;
  gap: 2px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.15;
  border: 1px solid transparent;
}
.game-trigger:after {
  content: "";
  position: absolute;
  right: -1px;
  top: 22px;
  bottom: 22px;
  width: 1px;
  background: var(--gold);
  opacity: 0.48;
}
.game-trigger:last-child:after {
  display: none;
}
.game-trigger img {
  height: 77px;
  width: 155px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #0005);
}
.game-trigger.logo-light img {
  filter: brightness(0) invert(0.92) sepia(0.3);
}
.game-trigger.logo-blue img {
  filter: brightness(2.1) saturate(0.7);
}
.game-trigger span {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.game-trigger:hover {
  background: #b8953c16;
  color: #ffe7a0;
}
.game-trigger[aria-expanded="true"] {
  background: linear-gradient(#ad8a3124, #c8ae582c);
  border-color: var(--gold-light);
  box-shadow: inset 0 0 0 2px #92732d66;
  color: #ffe795;
}
.game-trigger[aria-expanded="true"]:before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  background: #ecd293;
  transform: rotate(45deg);
  z-index: 13;
}
.all-games-trigger > .icon {
  width: 42px;
  height: 42px;
  margin: 18px 0 19px;
  color: #edcf81;
}
.mega-panel {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 100%;
  background: var(--paper) var(--parchment) repeat;
  background-size: 600px;
  border: 2px solid var(--gold);
  color: var(--ink);
  box-shadow: 0 16px 24px #00180b55;
  overflow: visible;
}
.mega-scroll {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 36px 40px;
  max-height: min(680px, var(--mega-available-height, 60dvh));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #9b8448 #eadfbe;
}
.mega-scroll > * {
  min-width: 0;
}
.close-menu {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #715a20;
}
.close-menu:hover {
  background: #9e83371c;
}
.mega-intro {
  padding-right: 24px;
  border-right: 1px solid var(--rule);
}
.mega-intro > img {
  height: 125px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto 24px;
}
.mega-intro h2 {
  font-size: 2.125rem;
  margin-bottom: 10px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: underline;
}
.mega-group {
  padding-right: 16px;
  border-right: 1px solid var(--rule);
}
.mega-group:last-child {
  border: 0;
  padding-right: 0;
}
.mega-group h3 {
  font-size: 1.75rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.mega-group a {
  display: block;
  min-height: 40px;
  padding: 7px 0;
  line-height: 1.2;
}
.mega-group a:hover {
  color: #775c15;
}
.all-games-panel > .mega-scroll {
  display: block;
  padding-top: 36px;
}
.all-games-panel h2 {
  margin-bottom: 20px;
}
.all-games-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 20px;
  margin-bottom: 22px;
}
.all-games-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 8px;
  font-size: 1rem;
  line-height: 1.15;
}
.all-games-grid a:hover {
  background: #9e833719;
}
.all-games-grid img {
  width: 140px;
  height: 65px;
  object-fit: contain;
}
.paper {
  position: relative;
  background: var(--paper) var(--parchment) repeat;
  background-size: 600px;
  border: 2px solid var(--gold);
  border-top: 0;
  padding: 38px 38px 40px;
  min-width: 0;
}
.home-top {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
  gap: 30px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.section-heading > a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-size: 1rem;
}
.lead-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
}
.story-image {
  display: block;
  overflow: hidden;
  background: #17251e;
}
.story-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
/* The lead image grows past its 4:3 crop to fill whatever height the
   supporting column runs to — no dead space under the lead story.
   The link is itself a flex line so the img stretch-fills it; %
   heights never resolve inside an aspect-ratio-sized flex item. */
.lead-story {
  display: flex;
  flex-direction: column;
}
.lead-story .story-image {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 4/3;
  max-height: 420px; /* grow to fill, but not balloon */
}
.lead-story .story-image img {
  width: 100%;
}
.news-story h2 {
  font-size: 2.125rem;
  line-height: 1.1;
  margin: 5px 0 10px;
}
.news-story h3 {
  font-size: 1.625rem;
  line-height: 1.1;
  margin: 5px 0 8px;
}
.news-story p {
  line-height: 1.35;
  margin: 0;
  font-size: 1rem;
}
.news-story .story-date {
  font-size: 1rem;
  color: #63583e;
  margin-top: 9px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.news-story h2 a:hover,
.news-story h3 a:hover {
  color: #586433;
}
.supporting-stories {
  display: grid;
  gap: 24px;
}
.supporting-stories .news-story h3 {
  font-size: 1.562rem;
}
.supporting-stories .story-image img {
  aspect-ratio: 2.2/1;
}
.supporting-stories .story-copy > p:last-child {
  font-size: 1rem;
}
.popular-guides {
  border-left: 1px solid var(--rule);
  padding-left: 28px;
}
.popular-guides h2 {
  font-size: 1.812rem;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.popular-guides h2 .icon {
  width: 27px;
  height: 27px;
  color: #8d702e;
}
.popular-guide {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.15;
}
.popular-guide img {
  width: 88px;
  max-height: 80px;
  object-fit: contain;
}
.popular-guide strong {
  font-size: 1.438rem;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.popular-guide span span {
  font-size: 1rem;
  display: block;
}
.popular-guide > .icon {
  width: 18px;
  height: 18px;
}
.more-stories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 24px;
  margin-top: 34px;
  padding-top: 25px;
  border-top: 1px solid var(--rule);
}
.more-stories > .news-story {
  border-right: 1px solid var(--rule);
  padding-right: 24px;
}
.more-stories > .news-story:nth-child(3n) {
  border: 0;
  padding: 0;
}
.more-news {
  margin-top: 30px;
  font-size: 1rem;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 1rem;
  margin-bottom: 34px;
}
.breadcrumbs > span:not([aria-current]) {
  color: #8d784e;
}
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 50px;
}
.guide-article {
  max-width: 920px;
}
.guide-article h1 {
  font-size: 3.5rem;
  margin: 0 0 12px;
}
.article-intro {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 26px;
}
.guide-article > p:not(.article-intro) {
  max-width: 72ch;
}
.article-hero {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center 48%;
  margin-bottom: 25px;
}
.guide-article {
  font-size: 1rem;
  line-height: 1.55;
}
.guide-article h2 {
  font-size: 2.375rem;
  margin: 40px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.guide-article figure {
  margin: 24px 0 30px;
}
.guide-article figure img {
  width: 100%;
  max-height: 630px;
  object-fit: contain;
  background: #e5d4a7;
}
.guide-article figcaption {
  font-size: 1rem;
  color: #5e563f;
  margin-top: 8px;
}
.article-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 18px 0;
  border-block: 1px solid var(--rule);
  font-size: 1rem;
}
.article-jumps a {
  text-decoration: underline;
}
.source-credit {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 36px !important;
  font-size: 1rem;
}
.source-credit a {
  text-decoration: underline;
}
.game-sidebar {
  border: 1px solid var(--rule);
  align-self: start;
  background: #e9ddb633;
}
.sidebar-heading {
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #fff4dc;
  min-height: 128px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px solid var(--gold);
}
.sidebar-heading img {
  width: 180px;
  height: 78px;
  object-fit: contain;
}
.sidebar-heading h2 {
  font-size: 1.688rem;
}
.sidebar-disclosure summary {
  display: none;
}
.game-sidebar li + li {
  border-top: 1px solid var(--rule);
}
.game-sidebar nav a {
  display: block;
  padding: 13px 20px;
  font-size: 1rem;
  line-height: 1.2;
}
.game-sidebar nav a:hover {
  background: #bc9b3f1e;
}
.game-sidebar nav a[aria-current] {
  background: linear-gradient(100deg, #dcc68077, #e8d699aa);
  box-shadow: inset 0 0 0 1px #bd994d;
  color: #191e12;
  font-weight: 600;
}
.site-footer {
  position: relative;
  border-top: 2px solid var(--gold);
  color: #fff2d7;
  background-color: #041710;
  background-image: linear-gradient(#020e0ba6, #020e0ba6), var(--leather);
  background-repeat: repeat;
  background-size: auto, 520px;
}
.footer-inner {
  width: min(var(--cap), calc(100% - 80px));
  margin: auto;
  padding: 54px 0 32px;
}
.footer-columns {
  display: grid;
  grid-template-columns: 2.2fr 0.9fr 1.1fr 1fr;
  gap: 46px;
}
.footer-columns h2 {
  color: var(--gold-light);
  font-size: 1.812rem;
  margin-bottom: 28px;
}
.footer-game-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.footer-columns li {
  margin-bottom: 15px;
  font-size: 1rem;
  line-height: 1.3;
}
.footer-columns a:hover {
  color: var(--gold-light);
}
.footer-bottom {
  border-top: 1px solid var(--gold);
  margin-top: 62px;
  padding-top: 28px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
  font-size: 1rem;
}
.footer-bottom p {
  margin: 0;
}
.header-study {
  min-height: 440px;
  padding-top: 30px;
}
.header-study > p {
  max-width: 70ch;
  font-size: 1rem;
}
.header-study h1 {
  margin: 25px 0 16px;
}
.header-study h2 {
  margin: 30px 0 14px;
}
.study-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.study-picker a {
  padding: 9px 15px;
  border: 1px solid #927a47;
}
.study-picker [aria-current] {
  background: var(--green);
  color: #fff5dc;
}
@media (min-width: 2100px) {
  .scenic-backdrop:before {
    background-size: 2600px auto;
    background-position: center 25%;
  }
}
@media (max-width: 1500px) {
  .site-wrap,
  .footer-inner {
    width: calc(100% - 48px);
  }
  .masthead {
    grid-template-columns: 195px minmax(0, 1fr);
    gap: 26px;
    padding-inline: 26px;
  }
  .fans-navigation > a,
  .fan-disclosure {
    padding-inline: 11px;
    font-size: 1rem;
  }
  .nav-search {
    gap: 16px;
  }
  .search-form {
    width: 235px;
    min-width: 190px;
  }
  .paper {
    padding: 32px 30px;
  }
  .home-top {
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
    gap: 24px;
  }
  .popular-guides {
    padding-left: 22px;
  }
  .popular-guide {
    grid-template-columns: 72px minmax(0, 1fr) 16px;
    gap: 10px;
  }
  .popular-guide img {
    width: 72px;
  }
  .popular-guide strong {
    font-size: 1.312rem;
  }
  .popular-guides h2 {
    font-size: 1.688rem;
  }
  .news-story h2 {
    font-size: 1.938rem;
  }
  .content-grid {
    gap: 36px;
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}
@media (max-width: 1150px) {
  .masthead {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .nav-search {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
  }
  .fans-navigation {
    justify-content: flex-end;
  }
  .utility-row {
    gap: 14px;
    margin-bottom: 12px;
  }
  .search-form {
    width: 100%;
    max-width: 280px;
  }
  .game-navigation {
    padding-inline: 16px;
  }
  .game-trigger {
    font-size: 1rem;
    padding-inline: 7px;
  }
  .game-trigger img {
    width: 132px;
    height: 66px;
  }
  .home-top {
    grid-template-columns: 1fr;
  }
  .popular-guides {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding: 22px 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .popular-guides h2 {
    grid-column: 1/-1;
  }
  .popular-guide {
    grid-template-columns: 1fr;
    align-content: start;
    padding: 0 0 18px;
    gap: 10px;
  }
  .popular-guide img {
    height: 64px;
    width: 120px;
  }
  .popular-guide > .icon {
    display: none;
  }
  .mega-scroll {
    gap: 22px;
    padding-inline: 26px;
  }
  .mega-intro {
    padding-right: 18px;
  }
  .mega-intro h2 {
    font-size: 1.75rem;
  }
  .mega-group h3 {
    font-size: 1.5rem;
  }
  .mega-group a {
    font-size: 1rem;
  }
  .footer-columns {
    gap: 30px;
  }
  .footer-columns li {
    font-size: 1rem;
  }
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 28px;
  }
  .guide-article h1 {
    font-size: 2.938rem;
  }
  .game-sidebar nav a {
    font-size: 1rem;
    padding: 12px 16px;
  }
}
@media (max-width: 800px) {
  .site-wrap {
    width: calc(100% - 24px);
    margin: 12px auto 30px;
  }
  .masthead {
    padding: 20px;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 20px;
  }
  .utility-row {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.9375rem;
  }
  .social-links {
    width: 100%;
    justify-content: flex-end;
    gap: 10px;
  }
  .nav-search {
    display: contents;
  }
  .masthead-content {
    display: contents;
  }
  .site-logo {
    grid-row: 1;
    grid-column: 1;
  }
  .utility-row {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .fans-navigation {
    grid-column: 1/-1;
    justify-content: center;
    grid-row: 2;
  }
  .search-form {
    grid-row: 3;
    grid-column: 1/-1;
    max-width: none;
    width: 100%;
  }
  .fans-navigation > a,
  .fan-disclosure {
    font-size: 1rem;
    padding-inline: 14px;
  }
  .game-navigation {
    padding: 0 10px;
    min-height: 108px;
  }
  .game-trigger {
    font-size: 1rem;
    gap: 6px;
    padding: 8px 5px;
  }
  .game-trigger img {
    width: 100px;
    height: 56px;
  }
  .game-trigger.logo-light img {
    filter: brightness(0) invert(0.92) sepia(0.3);
  }
  .game-trigger.logo-blue img {
    filter: brightness(2.1) saturate(0.7);
  }
  .game-trigger span {
    gap: 4px;
    justify-content: center;
  }
  .game-trigger .icon-chevron {
    display: none;
  }
  .all-games-trigger > .icon {
    height: 28px;
    width: 28px;
    margin: 14px 0;
  }
  .paper {
    padding: 25px 24px;
  }
  .section-heading h1 {
    font-size: 2.375rem;
  }
  .section-heading > a {
    font-size: 1rem;
    gap: 6px;
  }
  .lead-grid {
    gap: 18px;
  }
  .news-story h2 {
    font-size: 1.875rem;
  }
  .supporting-stories .news-story h3 {
    font-size: 1.438rem;
  }
  .news-story p {
    font-size: 1rem;
  }
  .more-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
  .more-stories > .news-story,
  .more-stories > .news-story:nth-child(3n) {
    border: 0;
    padding: 0;
  }
  .content-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }
  .game-sidebar {
    order: -1;
    width: 100%;
  }
  .sidebar-heading {
    flex-direction: row;
    justify-content: space-between;
    min-height: 76px;
    padding: 8px 18px;
    gap: 20px;
  }
  .sidebar-heading img {
    width: 135px;
    height: 55px;
  }
  .sidebar-heading h2 {
    font-size: 1.5rem;
  }
  .sidebar-disclosure summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    cursor: pointer;
    list-style: none;
    min-height: 48px;
  }
  .sidebar-disclosure summary::-webkit-details-marker {
    display: none;
  }
  .game-sidebar nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--rule);
  }
  .game-sidebar li + li {
    border-top: 0;
  }
  .game-sidebar li {
    border-bottom: 1px solid var(--rule);
  }
  .game-sidebar li:nth-child(odd) {
    border-right: 1px solid var(--rule);
  }
  .breadcrumbs {
    margin-bottom: 22px;
  }
  .mega-scroll {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .mega-intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border: 0;
    grid-column: 1/-1;
    padding-right: 25px;
  }
  .mega-intro > img {
    height: 75px;
    width: 160px;
    margin: 0;
  }
  .mega-intro h2 {
    margin: 0;
  }
  .mega-intro .text-link {
    width: 100%;
  }
  .mega-group {
    border: 0;
    padding: 0;
  }
  .mega-group h3 {
    font-size: 1.625rem;
  }
  .mega-group a {
    font-size: 1rem;
  }
  .all-games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-inner {
    width: calc(100% - 48px);
    padding-top: 38px;
  }
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .footer-games {
    grid-column: 1/-1;
  }
  .footer-columns h2 {
    margin-bottom: 18px;
  }
  .footer-bottom {
    margin-top: 36px;
    gap: 12px 22px;
    font-size: 1rem;
  }
}
@media (max-width: 540px) {
  body {
    font-size: 1rem;
  }
  .site-wrap {
    width: calc(100% - 16px);
    margin-top: 8px;
  }
  .masthead {
    padding: 17px 16px;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 14px;
  }
  .utility-row {
    font-size: 0.875rem;
    gap: 10px;
  }
  .social-links {
    gap: 7px;
  }
  .social-links a {
    min-width: 24px;
  }
  .social-links .social-icon {
    height: 17px;
    width: 17px;
  }
  .site-logo img {
    width: 145px;
  }
  .utility-row > a {
    display: inline-block;
  }
  .js-enabled .mobile-fans-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    min-height: 40px;
    padding: 0;
    color: #f8e5b9;
  }
  .js-enabled .fans-navigation {
    display: none;
    grid-row: 3;
    grid-column: 1/-1;
    justify-content: flex-start;
    gap: 10px 0;
  }
  .js-enabled .fans-navigation.is-open {
    display: flex;
  }
  .fans-navigation > a,
  .fan-disclosure {
    font-size: 1rem;
    padding-inline: 9px;
  }
  .fans-navigation {
    gap: 10px;
  }
  .search-form {
    grid-column: 2;
    grid-row: 2;
    height: 40px;
    min-width: 0;
  }
  .search-form input {
    font-size: 1rem;
    padding: 6px 9px;
  }
  .search-form button {
    width: 34px;
  }
  .search-form input::placeholder {
    font-size: 1rem;
  }
  .search-form input:placeholder-shown {
    background: transparent;
  }
  .search-form:focus-within input::placeholder {
    font-size: 0.875rem;
  }
  .game-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 8px;
  }
  .game-trigger {
    padding: 7px 5px;
    gap: 0;
    font-size: 1rem;
    min-height: 88px;
  }
  .game-trigger img {
    height: 55px;
    width: 118px;
  }
  .game-trigger:nth-child(even):after {
    display: none;
  }
  .game-trigger:nth-child(-n + 2) {
    border-bottom: 1px solid #ab904c55;
  }
  .all-games-trigger {
    grid-column: 1/-1;
    flex-direction: row;
    min-height: 45px;
    gap: 10px;
    border-top: 1px solid #ab904c55;
  }
  .all-games-trigger > .icon {
    width: 20px;
    height: 20px;
    margin: 0;
  }
  .game-trigger[aria-expanded="true"]:before {
    display: none;
  }
  .paper {
    padding: 24px 18px;
  }
  .corner {
    width: 40px;
    height: 40px;
    inset: auto;
  }
  .corner-tl {
    top: -6px;
    left: -6px;
  }
  .corner-tr {
    top: -6px;
    right: -6px;
  }
  .corner-br {
    bottom: -6px;
    right: -6px;
  }
  .corner-bl {
    bottom: -6px;
    left: -6px;
  }
  .section-heading {
    align-items: center;
    gap: 10px;
  }
  .section-heading h1 {
    font-size: 2.125rem;
  }
  .section-heading > a {
    font-size: 1rem;
  }
  .section-heading > a .icon {
    width: 17px;
  }
  .lead-grid {
    grid-template-columns: 1fr;
  }
  .lead-story .story-image img {
    aspect-ratio: 4/3;
  }
  .news-story h2 {
    font-size: 1.938rem;
  }
  .supporting-stories {
    gap: 23px;
    margin-top: 8px;
  }
  .supporting-stories .news-story {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
  .supporting-stories .story-image img {
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .supporting-stories .news-story h3 {
    font-size: 1.375rem;
    margin-top: 0;
  }
  .supporting-stories .story-copy > p:last-child {
    display: none;
  }
  .supporting-stories .story-date {
    font-size: 0.875rem;
    margin: 0 0 5px;
  }
  .popular-guides {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .popular-guides h2 {
    font-size: 1.688rem;
  }
  .popular-guide strong {
    font-size: 1.375rem;
  }
  .more-stories {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 22px;
    padding-top: 24px;
  }
  .more-stories .news-story {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
  }
  .more-stories .news-story:nth-child(3n) {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
  }
  .news-story h3 {
    font-size: 1.75rem;
  }
  .mega-panel {
    position: relative;
    left: 0;
    right: 0;
    top: auto;
    border: 0;
    border-top: 2px solid var(--gold);
    box-shadow: none;
    max-height: none;
  }
  .mega-scroll {
    max-height: none;
    padding: 28px 20px;
    grid-template-columns: 1fr;
  }
  .mega-intro {
    grid-column: auto;
    display: block;
  }
  .mega-intro > img {
    margin: 0 0 12px;
    height: 75px;
    width: 160px;
  }
  .mega-intro h2 {
    margin-bottom: 10px;
  }
  .mega-group {
    padding-bottom: 6px;
  }
  .mega-group ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }
  .mega-group a {
    font-size: 1rem;
    padding: 9px 0;
  }
  .all-games-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .all-games-grid img {
    width: 110px;
    height: 62px;
  }
  .all-games-grid a {
    font-size: 1rem;
  }
  .guide-article h1 {
    font-size: 2.625rem;
  }
  .guide-article {
    font-size: 1rem;
  }
  .article-intro {
    font-size: 1rem;
  }
  .guide-article h2 {
    font-size: 2.062rem;
  }
  .article-hero {
    max-height: 300px;
  }
  .game-sidebar nav ul {
    grid-template-columns: 1fr;
  }
  .game-sidebar li:nth-child(odd) {
    border-right: 0;
  }
  .game-sidebar nav a {
    font-size: 1rem;
  }
  .breadcrumbs {
    font-size: 1rem;
    gap: 6px 10px;
  }
  .article-jumps {
    font-size: 1rem;
    gap: 8px 20px;
  }
  .footer-inner {
    width: calc(100% - 40px);
  }
  .footer-columns {
    gap: 30px 22px;
  }
  .footer-game-columns {
    gap: 20px;
  }
  .footer-columns h2 {
    font-size: 1.625rem;
  }
  .footer-columns li {
    font-size: 1rem;
    line-height: 1.35;
  }
  .footer-bottom {
    justify-content: flex-start;
  }
  .footer-bottom p {
    width: 100%;
  }
  .header-study h1 {
    font-size: 2.25rem;
  }
  .header-study > p {
    font-size: 1rem;
  }
  .study-picker {
    gap: 10px;
  }
  .study-picker a {
    font-size: 1rem;
  }
  .language-options {
    right: -5px;
  }
  .fan-dropdown {
    min-width: 185px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  a,
  button {
    transition:
      color 0.15s ease-out,
      background-color 0.15s ease-out;
  }
  .story-image img {
    transition: filter 0.2s ease-out;
  }
  .story-image:hover img {
    filter: brightness(1.04);
  }
}

/* Mobile navigation: one compact masthead and a full-height navigation surface. */
.mobile-masthead {
  display: none;
}
.mobile-menu {
  padding: 0;
  border: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  color: var(--ink);
  background: var(--paper) var(--parchment) repeat;
  background-size: 600px;
  overflow: hidden;
}
.mobile-menu::backdrop {
  background: #041b15;
}
.mobile-menu[open] {
  display: flex;
  flex-direction: column;
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 82px;
  padding: 14px 18px;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  border-bottom: 2px solid var(--gold);
  color: #fff4dc;
}
.mobile-menu-top > a {
  display: block;
  width: 140px;
}
.mobile-menu-close {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 0 8px 14px;
  font-size: 1rem;
}
.mobile-menu-body {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.mobile-menu-rail {
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #f4dfb5;
  padding-bottom: env(safe-area-inset-bottom);
  border-right: 1px solid var(--gold);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--green);
}
.mobile-menu-rail > button,
.mobile-menu-rail > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 72px;
  padding: 12px 4px;
  font-size: 1rem;
  line-height: 1.1;
  border-bottom: 1px solid #aa8d4c44;
  text-decoration: none;
}
.mobile-menu-rail .icon {
  width: 23px;
  height: 23px;
}
.mobile-menu-rail > [aria-pressed="true"] {
  background: #e8c677;
  color: #17291f;
  box-shadow: inset 0 0 0 1px #fff0b6;
  font-weight: 700;
}
.mobile-menu-rail > :focus-visible {
  outline-offset: -4px;
}
.mobile-menu-content {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 23px 20px max(28px, env(safe-area-inset-bottom));
  scrollbar-width: thin;
  scrollbar-color: #a28b55 #f6e9cb;
}
.mobile-menu-content h2 {
  font-size: 2.188rem;
  margin: 0 0 20px;
  line-height: 1.1;
  text-wrap: wrap;
}
.mobile-menu-content h3 {
  font-size: 1.625rem;
  margin: 30px 0 13px;
}
.mobile-menu-content h2:focus {
  outline: none;
}
.game-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #92733b;
  background: #fff9e455;
  padding: 0 11px;
  margin-bottom: 18px;
  min-height: 46px;
}
.game-filter .icon {
  width: 18px;
  height: 18px;
  color: #62502b;
}
.game-filter input {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  caret-color: var(--ink);
}
.game-filter input::placeholder {
  color: #655b43;
  opacity: 1;
}
.game-filter:focus-within {
  outline: 2px solid #866623;
  outline-offset: 2px;
}
.game-filter input:focus {
  outline: none;
}
.mobile-game-list {
  border-top: 1px solid var(--rule);
}
.mobile-game-list li {
  border-bottom: 1px solid var(--rule);
}
.mobile-game-choice {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 78px;
  text-align: left;
  padding: 13px 0;
  font-size: 1rem;
  line-height: 1.14;
}
.mobile-game-choice img {
  width: 66px;
  height: 44px;
  object-fit: contain;
}
.mobile-game-choice .icon {
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
  color: #78602e;
}
.mobile-game-choice:hover,
.mobile-link-list a:hover {
  background: #bc9b3f1e;
}
.mobile-other-games {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  margin-top: 12px;
  font-size: 1rem;
}
.game-filter-empty {
  font-size: 1rem;
  line-height: 1.4;
  padding-top: 15px;
}
.mobile-back {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 1rem;
  padding: 0;
  margin: -10px 0 20px;
  color: #5e4d27;
}
.mobile-back .icon {
  transform: rotate(180deg);
  width: 20px;
  height: 20px;
}
.mobile-game-detail h2 {
  font-size: 2rem;
}
.mobile-link-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.25;
}
.mobile-link-list a .icon {
  width: 19px;
  height: 19px;
}
.mobile-socials a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.mobile-socials .social-icon {
  width: 24px;
  height: 24px;
}
.mobile-site-search label {
  display: block;
  font-size: 1rem;
  margin-bottom: 10px;
}
.mobile-site-search input {
  display: block;
  width: 100%;
  min-width: 0;
  background: #fff9e455;
  border: 1px solid #92733b;
  padding: 11px 10px;
  font-size: 1rem;
  caret-color: var(--ink);
  color: var(--ink);
  border-radius: 0;
}
.mobile-site-search input::placeholder {
  color: #655b43;
  opacity: 1;
}
.mobile-site-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: var(--green);
  color: #fff1cf;
  border: 1px solid var(--gold);
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  font-size: 1rem;
}
.mobile-search-note {
  font-size: 1rem;
  line-height: 1.4;
  color: #5e563f;
  margin-top: 20px;
}
.mobile-language {
  margin-top: 30px;
}
.mobile-language summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 54px;
  border-block: 1px solid var(--rule);
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}
.mobile-language summary::-webkit-details-marker {
  display: none;
}
.mobile-language summary span {
  font-size: 1rem;
  display: flex;
  gap: 5px;
  align-items: center;
}
@media (max-width: 800px) {
  .js-enabled .site-header > .masthead,
  .js-enabled .site-header > .game-navigation,
  .js-enabled .site-header > .mega-panel {
    display: none !important;
  }
  .js-enabled .mobile-masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 86px;
    padding: 14px 18px;
  }
  .mobile-masthead > a {
    width: 145px;
    flex: none;
  }
  .mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-header-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 6px;
    color: #fff0cb;
    font-size: 1rem;
  }
  .mobile-header-actions .icon {
    width: 23px;
    height: 23px;
  }
}
@media (max-width: 359px) {
  .js-enabled .mobile-masthead {
    padding-inline: 12px;
    gap: 8px;
  }
  .mobile-masthead > a {
    width: 125px;
  }
  .mobile-header-actions {
    gap: 1px;
  }
  .mobile-header-actions button {
    font-size: 1rem;
    gap: 5px;
  }
  .mobile-menu-body {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .mobile-menu-content {
    padding-inline: 15px;
  }
  .mobile-game-choice {
    grid-template-columns: 52px minmax(0, 1fr) 10px;
    gap: 8px;
    font-size: 1rem;
  }
  .mobile-game-choice img {
    width: 52px;
  }
  .mobile-menu-rail > button,
  .mobile-menu-rail > a {
    font-size: 0.9375rem;
  }
}
@media (max-height: 500px) and (max-width: 800px) {
  .mobile-menu-top {
    min-height: 64px;
    padding-block: 8px;
  }
  .mobile-menu-top > a {
    width: 110px;
  }
  .mobile-menu-rail > button,
  .mobile-menu-rail > a {
    min-height: 62px;
    padding-block: 8px;
  }
}

/* One vector asset supplies the game-menu mark and browser favicon. */
.icon-triforce-asset {
  display: inline-block;
  fill: currentColor;
  stroke: none;
}

/* Worked gold: uneven diagonal highlights over a continuous metal base.
   Different pitches and angles keep long rails from reading as a striped tile. */
:root {
  --gold-metal-base: linear-gradient(
    127deg,
    #79501d 0%,
    #d5a441 7%,
    #fff0a0 12%,
    #af7928 23%,
    #f6d577 37%,
    #93601c 51%,
    #ffe9a0 67%,
    #ba852e 84%,
    #f0d183 95%,
    #79531d
  );
  --gold-metal-grain: repeating-linear-gradient(
    117deg,
    transparent 0 13px,
    #fff9ce40 14px,
    transparent 15px 37px,
    #5130144a 38px,
    transparent 39px 61px
  );
  --gold-metal-glints: repeating-linear-gradient(
    43deg,
    transparent 0 43px,
    #fff8bd55 44px,
    transparent 45px 113px
  );
  --gold-inner-light:
    inset 0 0 5px 1px #ffe891b3, inset 0 0 16px 3px #edbe576b,
    inset 0 0 29px 6px #cda4492b;
}
.gold-frame,
.paper,
.mega-panel {
  border-color: #8a642b;
}
.gold-frame {
  box-shadow:
    inset 0 0 0 1px #fff0b45c,
    0 1px 5px #05191099;
}
.gold-frame::before,
.paper::before,
.mega-panel::before,
.search-form::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 3px;
  z-index: 2;
  pointer-events: none;
  background:
    var(--gold-metal-grain), var(--gold-metal-glints), var(--gold-metal-base);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.paper::before {
  inset: 0 -2px -2px;
  padding-top: 0;
  background-position:
    31px 0,
    79px 0,
    0 0;
}
.mega-panel::before {
  background-position:
    91px 0,
    23px 0,
    0 0;
}
.search-form {
  position: relative;
  border-color: #c79639;
  box-shadow:
    inset 0 0 0 1px #513710,
    inset 0 0 9px #dec17026;
  border-radius: 0;
  overflow: visible;
}
.search-form::before {
  inset: -1px;
  padding: 2px;
  background-position:
    17px 0,
    41px 0,
    0 0;
}
.search-form button {
  border-left-color: #dcb663;
  box-shadow: inset 1px 0 #ffedaa33;
}
.game-navigation {
  border-top: 2px solid #c49842;
  border-image: var(--gold-metal-base) 1;
}
.game-trigger[aria-expanded="true"],
.mobile-menu-rail > [aria-pressed="true"] {
  position: relative;
  background: #09291f55;
  border-color: #edc86e;
  color: #ffe79b;
  font-weight: 600;
  box-shadow:
    var(--gold-inner-light),
    0 0 4px #e9bc5559;
  text-shadow: 0 1px 2px #071b12;
}
.game-trigger[aria-expanded="true"]::after,
.mobile-menu-rail > [aria-pressed="true"]::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  padding: 3px;
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  background:
    var(--gold-metal-glints), var(--gold-metal-grain), var(--gold-metal-base);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.game-trigger[aria-expanded="true"]::before {
  background: linear-gradient(135deg, #fff5b8, #e6b747);
  box-shadow: 0 1px 5px #edc664aa;
}
.scenic-backdrop::after,
.site-footer::before,
.footer-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background:
    var(--gold-metal-grain), var(--gold-metal-glints), var(--gold-metal-base);
  box-shadow:
    0 1px 0 #3a2b14,
    0 -1px 0 #fff1b447;
}
.scenic-backdrop::after {
  bottom: 0;
  background-position:
    73px 0,
    191px 0,
    0 0;
}
.site-footer::before {
  top: -2px;
  background-position:
    29px 0,
    137px 0,
    0 0;
}
.footer-bottom {
  position: relative;
  border-top-color: transparent;
}
.footer-bottom::before {
  top: -1px;
  height: 2px;
  background-position:
    131px 0,
    61px 0,
    0 0;
}
.mobile-menu-top {
  border-image: var(--gold-metal-base) 1;
}
.mobile-menu-rail {
  border-right-color: #d5ad54;
}
@media (max-width: 800px) {
  .gold-frame::before,
  .paper::before {
    padding-inline: 2px;
  }
  .paper::before {
    padding-bottom: 2px;
  }
}

/* Mobile news is a single reading column: image, date, headline, summary. */
@media (max-width: 800px) {
  .homepage .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 14px;
  }
  .homepage .section-heading h1 {
    font-size: clamp(1.875rem, 5.6vw, 2.375rem);
    line-height: 1.12;
    text-wrap: initial;
  }
  .homepage .section-heading > a {
    min-height: 44px;
    font-size: 1rem;
  }
  .homepage .lead-grid,
  .homepage .more-stories {
    grid-template-columns: minmax(0, 1fr);
  }
  .homepage .lead-grid {
    gap: 28px;
  }
  .homepage .supporting-stories {
    gap: 28px;
    margin-top: 0;
  }
  .homepage .supporting-stories .news-story {
    display: block;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  .homepage .news-story .story-image {
    width: 100%;
  }
  .homepage .news-story .story-image img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  .homepage .news-story .story-date {
    font-size: 1rem;
    line-height: 1.3;
    margin: 12px 0 7px;
  }
  .homepage .news-story h2,
  .homepage .news-story h3 {
    font-size: clamp(1.688rem, 4.6vw, 2rem);
    line-height: 1.12;
    margin: 0 0 10px;
    text-wrap: pretty;
  }
  .homepage .supporting-stories .story-copy > p:last-child {
    display: block;
    font-size: 1rem;
  }
}

/* Reserved ad space. Desktop units stick within the reading area, never over the footer. */
.homepage-feed,
.homepage-rail,
.content-rail {
  min-width: 0;
}
.ad-slot {
  width: min(300px, 100%);
  margin: 30px auto 0;
  text-align: center;
  color: #655b45;
  font:
    1rem/1.4 "Lora",
    Georgia,
    serif;
}
.ad-label {
  display: block;
  margin-bottom: 8px;
}
.ad-creative {
  width: 100%;
  min-height: 250px;
  display: grid;
  place-items: center;
  background: #e8d9b644;
  border: 1px solid var(--rule);
}
.ad-placeholder {
  color: #77694e;
  font-style: normal;
}
.ad-creative:has(iframe) > .ad-placeholder {
  display: none;
}
.ad-sidebar {
  position: sticky;
  top: 24px;
}
.ad-inline {
  display: none;
  margin-block: 32px;
}
@media (min-width: 1151px) {
  .home-top {
    grid-template-columns: minmax(0, 1fr) 328px;
  }
  .homepage-rail {
    border-left: 1px solid var(--rule);
    padding-left: 27px;
  }
  .homepage-rail .popular-guides {
    border: 0;
    padding-left: 0;
  }
  .homepage-feed .more-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .homepage-feed .more-stories > .news-story {
    border: 0;
    padding: 0;
  }
  .content-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}
@media (max-width: 1150px) {
  .home-top {
    gap: 32px;
  }
  .content-rail {
    display: contents;
  }
  .ad-sidebar {
    display: none;
  }
  .ad-inline {
    display: block;
  }
}
@media (max-height: 340px) {
  .ad-sidebar {
    position: static;
  }
}
@media print {
  .ad-slot {
    display: none;
  }
}

body[data-ads="off"] .ad-slot,
.ad-slot[data-ad-state="empty"] {
  display: none;
}

/* Game landing page: original artwork, ordered walkthrough and a separate guide index. */
.game-landing .breadcrumbs {
  margin-bottom: 26px;
}
.oracle-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 64px;
  padding: 6px 26px 32px;
}
.oracle-intro {
  max-width: 660px;
}
.oracle-intro h1 {
  font-size: clamp(2.625rem, 4.8vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.oracle-platform {
  font-size: 1rem;
  color: var(--muted);
  margin: 14px 0 20px;
}
.oracle-summary {
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.3;
  margin-bottom: 24px;
}
.oracle-start {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 48px;
  padding: 10px 20px;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #fff1cb;
  border: 2px solid var(--gold);
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px #e5c47955;
}
.oracle-start:hover {
  color: #ffe795;
  text-decoration: none;
  box-shadow: var(--gold-inner-light);
}
.oracle-box {
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 260px;
}
.oracle-box img {
  width: 100%;
  height: auto;
  border: 1px solid #6b613e;
  box-shadow: 0 9px 18px #37291424;
}
.oracle-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  border-block: 1px solid var(--rule);
  padding: 10px 0;
  margin-bottom: 34px;
  font-size: 1rem;
}
.oracle-jumps a {
  display: flex;
  align-items: center;
  min-height: 36px;
  text-decoration: underline;
}
.oracle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 42px;
}
.oracle-main,
.oracle-rail {
  min-width: 0;
}
.oracle-section {
  scroll-margin-top: 24px;
  margin-bottom: 38px;
}
.oracle-section h2 {
  font-size: 2.125rem;
  margin-bottom: 18px;
}
.oracle-section-heading {
  margin-bottom: 18px;
}
.oracle-section-heading h2 {
  margin-bottom: 7px;
}
.oracle-section-heading > span {
  font-size: 1rem;
  color: var(--muted);
}
.oracle-chapters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
}
.oracle-chapters li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  font-size: 1rem;
  line-height: 1.3;
}
.chapter-number {
  color: #78643a;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  flex: 0 0 23px;
}
.oracle-resource-list {
  border-top: 1px solid var(--rule);
}
.oracle-resource-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 0;
  min-height: 54px;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.25;
}
.oracle-resource-list a:hover {
  color: #775c15;
}
.oracle-resource-list .icon {
  width: 20px;
  height: 20px;
  color: #897039;
}
.oracle-guide-index {
  border: 1px solid var(--rule);
  padding: 22px 22px 12px;
  background: #e9ddb633;
}
.oracle-guide-index > img {
  width: 200px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 14px;
}
.oracle-guide-index h2 {
  font-size: 1.75rem;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.oracle-guide-index li + li {
  border-top: 1px solid var(--rule);
}
.oracle-guide-index a {
  display: block;
  padding: 11px 0;
  font-size: 1rem;
  line-height: 1.3;
}
.oracle-original {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.oracle-original figure {
  margin: 0;
}
.oracle-original img {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--rule);
}
.oracle-original h2 {
  font-size: 1.875rem;
  margin-bottom: 14px;
}
.oracle-original p {
  font-size: 1rem;
  line-height: 1.4;
}
@media (max-width: 1150px) {
  .oracle-layout {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 28px;
  }
  .oracle-hero {
    gap: 32px;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) 230px;
  }
  .oracle-chapters {
    grid-template-columns: 1fr;
  }
  .oracle-original {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 20px;
  }
}
@media (max-width: 800px) {
  .oracle-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .oracle-rail {
    display: none;
  }
  .oracle-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 24px;
  }
  .oracle-summary {
    font-size: 1rem;
  }
  .oracle-chapters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .oracle-jumps {
    gap: 4px 24px;
    font-size: 1rem;
  }
}
@media (max-width: 540px) {
  .oracle-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-bottom: 28px;
  }
  .oracle-intro h1 {
    font-size: 2.625rem;
  }
  .oracle-platform {
    margin: 10px 0 16px;
    font-size: 1rem;
  }
  .oracle-summary {
    font-size: 1rem;
    margin-bottom: 20px;
  }
  .oracle-box {
    width: 210px;
    align-self: center;
  }
  .oracle-start {
    font-size: 1rem;
  }
  .oracle-jumps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    padding-block: 8px;
    margin-bottom: 28px;
  }
  .oracle-jumps a {
    min-height: 44px;
  }
  .oracle-section h2 {
    font-size: 1.875rem;
  }
  .oracle-chapters {
    grid-template-columns: minmax(0, 1fr);
  }
  .oracle-chapters li {
    font-size: 1rem;
    padding-block: 12px;
  }
  .oracle-resource-list a {
    font-size: 1rem;
  }
  .oracle-original {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .oracle-original figure {
    width: 210px;
  }
}

/* Circular cut-ins belong to primary actions; the content uses the shared frame.
   Only decorative layers are masked, keeping the link and focus outline intact. */
.primary-cta {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 12px 24px;
}
.primary-cta::before,
.primary-cta::after {
  content: "";
  position: absolute;
  pointer-events: none;
  --cut-radius: 8px;
  -webkit-mask:
    radial-gradient(
        circle at 0 0,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      top left/51% 51% no-repeat,
    radial-gradient(
        circle at 100% 0,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      top right/51% 51% no-repeat,
    radial-gradient(
        circle at 100% 100%,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      bottom right/51% 51% no-repeat,
    radial-gradient(
        circle at 0 100%,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      bottom left/51% 51% no-repeat;
  mask:
    radial-gradient(
        circle at 0 0,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      top left/51% 51% no-repeat,
    radial-gradient(
        circle at 100% 0,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      top right/51% 51% no-repeat,
    radial-gradient(
        circle at 100% 100%,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      bottom right/51% 51% no-repeat,
    radial-gradient(
        circle at 0 100%,
        transparent calc(var(--cut-radius) - 0.5px),
        #000 var(--cut-radius)
      )
      bottom left/51% 51% no-repeat;
}
.primary-cta::before {
  inset: 0;
  z-index: -2;
  background:
    var(--gold-metal-grain), var(--gold-metal-glints), var(--gold-metal-base);
}
.primary-cta::after {
  inset: 2px;
  z-index: -1;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  box-shadow: inset 0 0 0 1px #e5c47955;
}
.primary-cta:hover,
.primary-cta:focus-visible {
  box-shadow: none;
  text-decoration: none;
  color: #ffe795;
}
.primary-cta:hover::after,
.primary-cta:focus-visible::after {
  box-shadow: var(--gold-inner-light);
}

/* Approved typography: Crimson Pro headings, Lora reading and UI text. */
body {
  line-height: 1.6;
}
.popular-guide strong {
  font-family: "Crimson Pro", Georgia, serif;
}
.news-story p,
.supporting-stories .story-copy > p:last-child,
.homepage .supporting-stories .story-copy > p:last-child,
.guide-article,
.article-intro,
.oracle-summary,
.oracle-original p,
.header-study > p {
  font-size: 1rem;
  line-height: 1.65;
}
.guide-article p,
.oracle-summary,
.oracle-original p {
  max-width: 70ch;
}

/* Optical sizing matches the Zelda lettering, compensating for each source's
   transparent padding and ornaments without changing the button or label layout. */
.game-trigger img {
  transform: scale(var(--game-mark-scale, 0.5));
  transform-origin: center;
}
.game-mark-0 {
  --game-mark-scale: 0.5;
}
.game-mark-1 {
  --game-mark-scale: 0.54;
}
.game-mark-2 {
  --game-mark-scale: 0.72;
}
.game-mark-3 {
  --game-mark-scale: 0.54;
}
.all-games-trigger > .icon {
  transform: scale(0.5);
  transform-origin: center;
}
@media (min-width: 801px) {
  .game-trigger {
    display: grid;
    grid-template-rows: 77px 1fr;
    justify-items: center;
    align-content: start;
  }
  .game-trigger > span {
    align-self: center;
    justify-content: center;
  }
  .all-games-trigger > .icon {
    margin: 0;
  }
}
@media (min-width: 801px) and (max-width: 1150px) {
  .game-trigger {
    grid-template-rows: 66px 1fr;
  }
}

/* Typography roles: the chosen families, with sizes that respect reader preferences. */
:root {
  --font-heading: "Crimson Pro", Georgia, serif;
  --font-reading: "Lora", Georgia, serif;
  --type-body: 1rem;
  --type-meta: 0.875rem;
  --type-card: 1.75rem;
  --type-section: 2.25rem;
  --type-page: 2.75rem;
  --type-display: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
body {
  font-family: var(--font-reading);
  font-size: var(--type-body);
}
h1,
h2,
h3,
.popular-guide strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-kerning: normal;
}
h1 {
  font-size: var(--type-page);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2,
h3 {
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.paper :is(h1, h2, h3) {
  overflow-wrap: anywhere;
}
.guide-article h1,
.header-study h1 {
  font-size: var(--type-display);
  line-height: 1.05;
}
.guide-article h2,
.oracle-section h2 {
  font-size: var(--type-section);
  line-height: 1.1;
}
.guide-article h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.guide-article p,
.guide-article > p:not(.article-intro),
.header-study > p {
  max-width: 68ch;
  text-wrap: pretty;
}
.oracle-summary {
  max-width: 58ch;
  text-wrap: pretty;
}
.news-story h2 {
  font-size: 2rem;
  line-height: 1.08;
  margin-block: 0.35rem 0.65rem;
}
.news-story h3,
.supporting-stories .news-story h3 {
  font-size: var(--type-card);
  line-height: 1.11;
  margin-block: 0.35rem 0.65rem;
}
.news-story p {
  max-width: 65ch;
  text-wrap: pretty;
}
.homepage .news-story .story-date,
.news-story .story-date {
  font-size: var(--type-meta);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin-block: 0.75rem 0.3rem;
}
.popular-guides h2,
.sidebar-heading h2,
.footer-columns h2,
.oracle-guide-index h2,
.mega-group h3 {
  font-size: var(--type-card);
  line-height: 1.1;
}
.popular-guide strong {
  font-size: 1.5rem;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.popular-guide span span {
  font-size: var(--type-body);
  line-height: 1.5;
}
.breadcrumbs,
.guide-article figcaption,
.source-credit,
.oracle-platform,
.oracle-section-heading > span,
.ad-slot {
  font-size: var(--type-meta);
  line-height: 1.5;
}
.breadcrumbs {
  row-gap: 0.4rem;
}
.source-credit {
  line-height: 1.6;
}
.oracle-original h2 {
  font-size: var(--type-card);
  line-height: 1.1;
}
.oracle-chapters li {
  line-height: 1.5;
}
.chapter-number {
  font-size: var(--type-meta);
  font-variant-numeric: tabular-nums;
}
.game-trigger,
.mega-group a,
.game-sidebar nav a,
.oracle-guide-index a,
.mobile-game-choice,
.mobile-link-list a {
  line-height: 1.4;
}
.site-header :is(.utility-row, .fans-navigation, .game-trigger),
.site-footer a {
  font-weight: 500;
}
.fan-dropdown a,
.language-options a {
  line-height: 1.5;
}
.footer-columns li {
  line-height: 1.5;
}
.footer-columns h2 {
  margin-bottom: 1.25rem;
}
.footer-bottom {
  font-size: var(--type-meta);
  line-height: 1.5;
}
.mobile-menu-body {
  grid-template-columns: max(76px, 4.75rem) minmax(0, 1fr);
}
.mobile-menu-rail > button,
.mobile-menu-rail > a {
  font-size: 1rem;
  line-height: 1.3;
}
.mobile-menu-content :is(a, button, h2, h3) {
  overflow-wrap: anywhere;
}
@media (max-width: 800px) {
  .homepage .section-heading h1 {
    font-size: 2.25rem;
    line-height: 1.07;
  }
  .homepage .news-story h2 {
    font-size: 1.875rem;
    line-height: 1.09;
  }
  .homepage .news-story h3 {
    font-size: var(--type-card);
    line-height: 1.11;
  }
  .guide-article h2,
  .oracle-section h2 {
    font-size: 2rem;
    line-height: 1.1;
  }
  .mobile-menu-content h2 {
    font-size: 2.25rem;
    line-height: 1.1;
  }
}
@media (max-width: 540px) {
  .oracle-intro h1 {
    font-size: 2.75rem;
    line-height: 1.05;
  }
  .footer-columns h2 {
    font-size: var(--type-card);
  }
}
@media (max-width: 359px) {
  .mobile-menu-body {
    grid-template-columns: max(66px, 4.125rem) minmax(0, 1fr);
  }
}
@media (max-width: 359px) {
  .popular-guides,
  .footer-columns,
  .footer-game-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-games {
    grid-column: auto;
  }
}

/* Compact editorial section labels, matching the approved parchment reference. */
.homepage .section-heading,
.homepage .popular-guides h2 {
  border-block: 1px solid var(--rule);
  padding-block: 10px;
  min-height: 46px;
}
.homepage .section-heading {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.homepage .section-heading h1,
.homepage .popular-guides h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-wrap: initial;
}
.homepage .popular-guides h2 {
  gap: 10px;
  margin: 0;
}
.homepage .popular-guides h2 .icon {
  width: 24px;
  height: 24px;
}
.homepage .section-heading > a {
  font-size: 0.875rem;
  min-height: 24px;
  gap: 10px;
}
.breadcrumbs {
  align-items: center;
  column-gap: 8px;
}
.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.breadcrumb-home .icon {
  width: 16px;
  height: 16px;
}
.breadcrumbs > .icon-chevron-right {
  width: 12px;
  height: 12px;
  color: #8d784e;
  stroke-width: 1.8;
}

/* Centered identity, brass site navigation and a separate parchment game index. */
.centered-header .masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  min-height: 176px;
  padding: 22px 42px;
  position: relative;
}
.centered-header .site-logo {
  width: 300px;
  max-width: 100%;
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
  padding: 0 10px;
}
.centered-header .site-logo img {
  width: 100%;
}
.centered-header .social-links {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  width: auto;
  margin: 0;
}
.centered-header .utility-row {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.centered-header .masthead::before,
.centered-header .masthead::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(transparent, #bca06566, transparent);
  pointer-events: none;
}
.centered-header .masthead::before {
  left: calc(50% - 190px);
}
.centered-header .masthead::after {
  right: calc(50% - 190px);
}
.centered-header.gold-frame::before {
  padding: 4px;
  background-position:
    23px 0,
    61px 0,
    0 0;
}
.centered-header .corner {
  width: 62px;
  height: 62px;
}
.primary-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 68px;
  padding: 4px 22px 4px 12px;
  border-block: 3px solid #ba944d;
  color: #fff3d5;
  background:
    linear-gradient(105deg, #866729a8, #584821d9 48%, #9073409c), var(--leather);
  background-size: auto, 520px;
  box-shadow:
    inset 0 1px #f9e0a680,
    inset 0 -1px #372811,
    0 3px 5px #07170e50;
}
.primary-navigation {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  min-width: 0;
}
.primary-navigation .primary-link {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 10px 30px;
  color: #fff2d3;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
  border: 0;
  border-right: 1px solid #d9b16c55;
  text-decoration: none;
  text-shadow: 0 1px 2px #1c1a10;
}
.primary-navigation .game-trigger {
  grid-template-rows: none;
  min-width: 0;
}
.primary-navigation .game-trigger::before,
.primary-navigation .game-trigger::after {
  display: none;
}
.primary-navigation .primary-link:hover,
.primary-navigation .primary-link:focus-visible,
.primary-navigation .game-trigger[aria-expanded="true"],
.primary-navigation details[open] > summary {
  color: #ffe998;
  background: #302b1666;
  box-shadow: var(--gold-inner-light);
  text-decoration: none;
}
body:not(.guide-template):not(.game-template):not(.study-page) .news-nav {
  color: #ffe998;
  background: #2927114d;
  box-shadow: inset 0 -2px #e5c477;
}
.primary-navigation .fan-disclosure {
  font-size: inherit;
  padding: 0;
  position: relative;
  border: 0;
}
.primary-navigation .fan-disclosure summary {
  list-style: none;
}
.primary-navigation .fan-disclosure summary::-webkit-details-marker {
  display: none;
}
.primary-navigation .fan-dropdown {
  top: calc(100% + 7px);
  left: 0;
  right: auto;
  min-width: 220px;
  background: var(--paper) var(--parchment);
  background-size: 600px;
  color: var(--ink);
  border: 2px solid var(--gold);
  padding: 8px;
  box-shadow: 0 8px 15px #00160b55;
}
.primary-navigation .fan-dropdown a {
  font-size: 1rem;
  font-weight: 400;
  padding: 12px 16px;
  color: var(--ink);
}
.primary-navigation .fan-dropdown a:hover {
  background: #ac853b24;
  color: var(--ink);
}
.primary-rail .search-form {
  width: 320px;
  max-width: 35%;
  min-width: 0;
  flex-wrap: nowrap;
  margin: 0;
  background: #071e16e6;
  height: 42px;
  flex-shrink: 1;
}
.primary-rail .search-form input {
  width: 100%;
  min-width: 0;
  font-size: 0.9375rem;
}
.game-browser > .mega-scroll {
  grid-template-columns: 220px minmax(0, 1fr);
  padding: 34px 32px;
  gap: 30px;
}
.desktop-game-choices {
  align-self: start;
  display: grid;
  gap: 4px;
  border-right: 1px solid var(--rule);
  padding-right: 20px;
}
.desktop-game-choices button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 10px;
  text-align: left;
  min-height: 44px;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid transparent;
}
.desktop-game-choices button .icon {
  width: 14px;
  height: 14px;
}
.desktop-game-choices button:hover {
  background: #b49a5e29;
}
.desktop-game-choices button[aria-pressed="true"] {
  color: #fff0ca;
  background: var(--green) var(--leather);
  background-size: 520px;
  border-color: var(--gold);
  box-shadow: var(--gold-inner-light);
}
.desktop-guide-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.desktop-game-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 26px 22px 0;
}
.desktop-game-heading h2,
.desktop-game-detail > h2 {
  font-size: 2rem;
  line-height: 1.1;
}
.desktop-game-heading .text-link {
  font-size: 0.875rem;
  white-space: nowrap;
}
.desktop-game-detail .all-games-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
}
.desktop-game-detail .mega-group {
  padding-right: 16px;
}
.desktop-game-detail .mega-group h3 {
  font-size: 1.5rem;
}
.explore-games {
  display: grid;
  grid-template-columns: 125px repeat(4, minmax(0, 1fr)) 125px;
  gap: 7px;
  position: relative;
  margin-bottom: 30px;
  padding: 7px;
  border: 1px solid #9c7e42;
  background: linear-gradient(#a7782324, #a7782336), var(--parchment);
  background-size: auto, 600px;
  box-shadow:
    inset 0 0 0 2px #fbe9bd,
    inset 0 0 18px #93713030,
    0 3px 5px #80682d1a;
}
.explore-label,
.explore-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  min-width: 0;
  color: var(--ink);
  border: 1px solid #a98d5366;
  background: #d3b67518;
  padding: 12px 6px;
}
.explore-label > span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1rem;
  line-height: 1.2;
}
.explore-label > .icon,
.explore-all > .icon {
  width: 30px;
  height: 30px;
  color: #937335;
}
.explore-all span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.2;
}
.explore-all span .icon {
  width: 17px;
  height: 17px;
}
.explore-game {
  display: block;
  position: relative;
  min-width: 0;
  height: 148px;
  overflow: hidden;
  border: 1px solid #9c7e42;
  background: #132a20;
  color: #fff3d4;
}
.explore-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}
.explore-game > span {
  position: absolute;
  inset: auto 0 0;
  padding: 27px 7px 9px;
  background: linear-gradient(transparent, #081711eb 55%);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.12;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}
.explore-game:hover,
.explore-game:focus-visible,
.explore-all:hover {
  border-color: #e0b348;
  box-shadow: inset 0 0 0 2px #e0b348;
  outline-offset: 3px;
  text-decoration: none;
}
.explore-game::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #f8dea132;
}
.explore-game:hover::after {
  box-shadow:
    inset 0 0 0 2px #ffe290,
    inset 0 0 16px #efc97573;
}
@media (max-width: 1150px) {
  .centered-header .masthead {
    grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    min-height: 152px;
  }
  .centered-header .site-logo {
    width: 230px;
  }
  .centered-header .social-links {
    gap: 14px;
  }
  .centered-header .utility-row {
    gap: 12px;
    font-size: 0.875rem;
  }
  .centered-header .masthead::before {
    left: calc(50% - 142px);
  }
  .centered-header .masthead::after {
    right: calc(50% - 142px);
  }
  .primary-navigation .primary-link {
    padding-inline: 22px;
    font-size: 1.375rem;
  }
  .primary-rail {
    gap: 18px;
    padding-right: 18px;
  }
  .explore-games {
    grid-template-columns: 95px repeat(4, minmax(0, 1fr)) 95px;
    gap: 5px;
  }
  .explore-game {
    height: 132px;
  }
  .explore-game > span {
    font-size: 1.125rem;
  }
  .explore-all span {
    font-size: 1.125rem;
  }
  .game-browser > .mega-scroll {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 22px;
    padding-inline: 24px;
  }
  .desktop-guide-columns {
    gap: 16px;
  }
}
@media (max-width: 800px) {
  .centered-header .masthead,
  .centered-header .primary-rail {
    display: none;
  }
  .explore-games {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 24px;
    padding: 10px;
  }
  .explore-label {
    grid-column: 1/3;
    flex-direction: row;
    justify-content: flex-start;
    border: 0;
    background: none;
    padding: 0 0 5px;
    gap: 8px;
  }
  .explore-label br {
    display: none;
  }
  .explore-label > span {
    font-size: 0.875rem;
  }
  .explore-label > span br::after {
    content: " ";
  }
  .explore-label > .icon {
    width: 20px;
    height: 20px;
  }
  .explore-all {
    grid-row: 1;
    grid-column: 3/5;
    justify-self: end;
    flex-direction: row;
    padding: 0 0 5px;
    background: none;
    border: 0;
    min-height: 32px;
  }
  .explore-all > .icon {
    display: none;
  }
  .explore-all span {
    font-size: 1rem;
  }
  .explore-game {
    height: 120px;
  }
  .explore-game > span {
    font-size: 1rem;
    padding-inline: 4px;
  }
  .mobile-menu-rail > button[data-mobile-section="fans"] {
    font-size: 0.8125rem;
  }
}
@media (max-width: 540px) {
  .explore-games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
    gap: 8px;
  }
  .explore-label {
    grid-column: 1;
  }
  .explore-label > span {
    text-align: left;
    font-size: 0.8125rem;
    letter-spacing: 0.035em;
  }
  .explore-label br {
    display: initial;
  }
  .explore-all {
    grid-column: 2;
  }
  .explore-game {
    height: 112px;
  }
  .explore-game > span {
    font-size: 1.0625rem;
  }
}
/* Reference-level material detailing: tooling, bevels and small metal hardware. */
:root {
  --aged-brass: url("../materials/aged-brass.webp");
  --brass-edge: linear-gradient(
    180deg,
    #6c572d,
    #e4ce8f 22%,
    #9a7d40 43%,
    #57421d 68%,
    #c1a362
  );
  --paper-frame: url("../materials/parchment-frame.svg");
}
.centered-header .masthead {
  min-height: 190px;
  padding: 26px 64px;
  gap: 50px;
}
.centered-header .masthead::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  width: auto;
  height: auto;
  border: 21px solid transparent;
  border-image-source: url("../materials/leather-tooling.webp");
  border-image-slice: 14.354066985645932%;
  border-image-repeat: round;
  background: none;
  opacity: 0.46;
  pointer-events: none;
}
/* Freeform tooling flanks the logo independently of the perimeter border. */
.centered-header .masthead::after {
  content: "";
  display: block;
  position: absolute;
  inset: 22px auto 22px 50%;
  width: 650px;
  height: auto;
  border: 0;
  background: url("../materials/logo-engraving.webp") center / 100% 100% no-repeat;
  opacity: 0.55;
  transform: translateX(-50%);
  pointer-events: none;
}
.centered-header .social-links,
.centered-header .utility-row,
.centered-header .site-logo {
  position: relative;
  z-index: 1;
}
.centered-header.gold-frame {
  border-color: #6b542c;
  box-shadow:
    inset 0 0 0 1px #f5db9266,
    0 2px 6px #03160da3;
}
.centered-header.gold-frame::before {
  padding: 3px;
  background: linear-gradient(
    115deg,
    #b6a168,
    #eddaa0 17%,
    #6e592e 39%,
    #c2aa68 63%,
    #f1dc9f 80%,
    #756033
  );
  opacity: 0.95;
}
.centered-header > .corner-tl,
.centered-header > .corner-tr {
  background-image: url("../materials/riveted-corner.webp");
  width: 63px;
  height: 63px;
  top: -5px;
  z-index: 12;
  filter: drop-shadow(1px 2px 1px #04180ea6);
}
.centered-header > .corner-tl {
  left: -5px;
}
.centered-header > .corner-tr {
  right: -5px;
}
.centered-header > .corner-bl,
.centered-header > .corner-br {
  display: none;
}
.primary-rail {
  min-height: 72px;
  padding: 3px 36px 3px 26px;
  gap: 26px;
  border-block: 3px solid #b79c62;
  background: linear-gradient(#17180e35, #211b1038), var(--aged-brass);
  background-size: auto, 640px;
  box-shadow:
    inset 0 1px #ecdaa77a,
    inset 0 -1px #e0c8887a,
    0 2px 0 #092116,
    0 4px 0 #947c4666;
}
.primary-rail::before,
.primary-rail::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 15px;
  pointer-events: none;
  border-inline: 1px solid #e6c87532;
  background:
    radial-gradient(
      circle at 50% 5px,
      #30270f 0 1px,
      #c7b078 1.3px 2.3px,
      #382b12 2.6px 3.3px,
      transparent 3.8px
    ),
    radial-gradient(
      circle at 50% calc(100% - 5px),
      #30270f 0 1px,
      #c7b078 1.3px 2.3px,
      #382b12 2.6px 3.3px,
      transparent 3.8px
    );
}
.primary-rail::after {
  left: auto;
  right: 5px;
}
.primary-navigation {
  border-left: 1px solid #211b11b0;
  box-shadow: inset 1px 0 #d7ba7973;
}
.primary-navigation .primary-link {
  padding: 12px 34px;
  min-height: 60px;
  min-width: 142px;
  border: 1px solid #281f126b;
  border-left: 0;
  border-radius: 2px;
  box-shadow:
    inset 0 1px #edd59a38,
    inset -1px 0 #eed99e42,
    inset 0 -1px #130f094d;
  font-weight: 600;
  text-shadow: 0 1px 2px #15160deb;
  color: #f4eedc;
}
.primary-navigation .game-trigger::before,
.primary-navigation .game-trigger::after {
  display: none;
}
.primary-navigation .primary-link:hover,
.primary-navigation .primary-link:focus-visible,
.primary-navigation .game-trigger[aria-expanded="true"],
.primary-navigation details[open] > summary {
  color: #ffe697;
  background: linear-gradient(0deg, #26201380, transparent 85%);
  box-shadow:
    inset 0 1px #eddaab70,
    inset 0 -2px #d6b76c73,
    inset 1px 0 #d6b76c52,
    inset -1px 0 #d6b76c52;
  text-decoration: none;
}
body:not(.guide-template):not(.game-template):not(.study-page) .news-nav {
  color: #ffe697;
  background: linear-gradient(0deg, #26201380, transparent 85%);
  box-shadow:
    inset 0 1px #eddaab70,
    inset 0 -2px #d6b76c73,
    inset 1px 0 #d6b76c52,
    inset -1px 0 #d6b76c52;
}
.primary-navigation .nav-divider {
  display: block;
  position: absolute;
  right: -5px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  z-index: 2;
  transform: rotate(45deg);
  background: #ebd28f;
  border: 1px solid #f1e1a8;
  box-shadow:
    0 0 0 1px #3a2d13,
    1px 1px 2px #181b0c;
  pointer-events: none;
}
.primary-navigation .nav-divider::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #312a17;
  border: 1px solid #9d8247;
}
.primary-navigation .nav-marker {
  display: none;
  position: absolute;
  bottom: 0;
  left: calc(50% - 9px);
  width: 18px;
  height: 11px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(155deg, #fff0b0, #d5aa48 65%, #866126);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -1px 2px #f6d86c60);
}
.primary-navigation .nav-marker::after {
  content: "";
  position: absolute;
  inset: 4px 5px 2px;
  background: #b8913c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
body:not(.guide-template):not(.game-template):not(.study-page)
  .news-nav
  > .nav-marker,
.primary-navigation .game-trigger[aria-expanded="true"] > .nav-marker,
.primary-navigation details[open] > summary > .nav-marker {
  display: block;
}
.primary-navigation:has([aria-expanded="true"], details[open])
  .news-nav
  > .nav-marker {
  display: none;
}
.primary-rail .search-form {
  width: 350px;
  height: 46px;
  max-width: 36%;
  border: 2px solid #b8a371;
  border-radius: 6px;
  background: linear-gradient(#092319e6, #10261aeb), var(--leather);
  background-size: auto, 520px;
  box-shadow:
    0 0 0 1px #171b10,
    inset 0 0 0 1px #1c2919,
    inset 0 2px 6px #0009,
    0 1px 0 #e7dba16b;
}
.primary-rail .search-form::before {
  display: none;
}
.primary-rail .search-form input {
  font-size: 1rem;
  padding: 8px 16px;
  color: #fff2cc;
  caret-color: #ecd897;
}
.primary-rail .search-form input::placeholder {
  color: #d6c9a6;
}
.primary-rail .search-form button {
  width: 48px;
  margin: -2px -2px -2px 0;
  border: 2px solid #b8a371;
  border-radius: 5px;
  background: linear-gradient(#09231970, #081b1499);
  color: #f2efdb;
  box-shadow:
    0 0 0 1px #1d2314,
    inset 0 1px #e6d39c42,
    inset 0 -1px #0007;
}
.primary-rail .search-form button .icon {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}
.primary-rail .search-form button:hover {
  background: #d4b26722;
  color: #fff0b5;
}
.primary-rail .search-form:focus-within {
  border-color: #ead49b;
  box-shadow:
    0 0 0 1px #1d2113,
    inset 0 2px 6px #0009,
    0 0 0 2px #d5b96544;
}
.primary-navigation .fan-dropdown {
  top: calc(100% + 9px);
}
.explore-games {
  gap: 7px;
  padding: 8px;
  border: 1px solid #ae915a;
  background: linear-gradient(#a57c2820, #9e73192b), var(--parchment);
  background-size: auto, 600px;
  box-shadow:
    inset 0 0 0 1px #fbe9bb,
    inset 0 0 12px #8e6e293b,
    0 2px 3px #6f531d3b;
}
.explore-games::before {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  border: 22px solid transparent;
  border-image: var(--paper-frame) 24 / 22px / 0 stretch;
  z-index: 1;
}
.explore-label,
.explore-all {
  position: relative;
  border: 0;
  background: linear-gradient(110deg, #a9874420, #ffeac218);
  padding: 17px 12px;
  gap: 14px;
  box-shadow: none;
}
.explore-label::before,
.explore-all::before {
  display: none;
}
.explore-label > span {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.13;
}
.explore-label > .icon,
.explore-all > .icon {
  width: 34px;
  height: 34px;
  color: #8e7136;
}
.explore-game {
  border-color: #957641;
  box-shadow: 0 0 0 1px #ecd39c7a;
}
.explore-game::after {
  box-shadow:
    inset 0 0 0 1px #e8cd9066,
    inset 0 1px #fff1c65c;
}
.explore-all:hover {
  border-color: transparent;
  background: #b88f3630;
  box-shadow: none;
}

@media (max-width: 1150px) {
  .centered-header .masthead {
    padding-inline: 42px;
    gap: 28px;
    min-height: 162px;
  }
  .centered-header .masthead::before {
    width: auto;
    border-width: 18px;
  }
  .centered-header .masthead::after {
    width: 510px;
    inset-block: 24px;
  }
  .primary-navigation .primary-link {
    min-width: 112px;
    padding-inline: 25px;
  }
  .primary-rail {
    gap: 20px;
    padding-left: 24px;
    padding-right: 30px;
  }
  .primary-rail .search-form {
    width: 300px;
    max-width: 36%;
  }
  .explore-label,
  .explore-all {
    padding-inline: 8px;
  }
  .explore-label > span {
    font-size: 0.875rem;
  }
  .explore-all span {
    font-size: 1rem;
    gap: 4px;
  }
  .explore-all span .icon {
    width: 14px;
    height: 14px;
  }
}
@media (min-width: 801px) and (max-width: 950px) {
  .centered-header .masthead {
    padding-inline: 32px;
    grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  }
  .centered-header .site-logo {
    width: 190px;
  }
  .centered-header .social-links {
    gap: 10px;
  }
  .centered-header .utility-row {
    gap: 10px;
    font-size: 0.8125rem;
  }
  .centered-header .masthead::before {
    width: auto;
    border-width: 16px;
  }
  .centered-header .masthead::after {
    width: 420px;
    opacity: 0.45;
  }
  .primary-navigation .primary-link {
    min-width: 94px;
    padding-inline: 18px;
    font-size: 1.25rem;
  }
  .primary-rail .search-form {
    max-width: 38%;
    height: 44px;
  }
  .primary-rail .search-form input {
    font-size: 0.875rem;
    padding-inline: 10px;
  }
}
@media (max-width: 800px) {
  .centered-header > .corner-tl,
  .centered-header > .corner-tr {
    width: 39px;
    height: 39px;
    top: -3px;
  }
  .centered-header > .corner-tl {
    left: -3px;
  }
  .centered-header > .corner-tr {
    right: -3px;
  }
  .explore-games {
    padding: 10px;
    gap: 8px;
  }
  .explore-games::before {
    border-image-width: 18px;
  }
  .explore-label,
  .explore-all {
    padding: 0 0 5px;
    gap: 8px;
    background: none;
  }
  .explore-label::before,
  .explore-all::before {
    display: none;
  }
  .explore-label > span {
    font-size: 0.875rem;
    font-weight: 500;
  }
  .explore-label > .icon {
    width: 22px;
    height: 22px;
  }
  .explore-all > .icon {
    display: none;
  }
  .explore-all span {
    font-size: 1rem;
  }
  .explore-all:hover {
    background: none;
    box-shadow: none;
    color: #785b1f;
  }
}
@media (max-width: 540px) {
  .explore-label > span {
    font-size: 0.8125rem;
  }
  .explore-all {
    padding-inline: 4px;
  }
  .explore-games {
    padding: 10px;
    gap: 9px;
  }
}

/* Keep the short All games action on one line inside its framed end panel. */
.explore-all span {
  white-space: nowrap;
  font-size: 1.125rem;
  gap: 6px;
}
@media (max-width: 1150px) {
  .explore-all {
    padding-inline: 5px;
  }
  .explore-all span {
    font-size: 1rem;
    gap: 4px;
  }
}

/* A continuous recessed parchment surround, with curved brass corner brackets. */
.paper {
  border-color: #233b28;
}
.paper::before {
  inset: 0 -2px -2px;
  padding: 0;
  border: 5px solid #183426;
  background: none;
  -webkit-mask: none;
  mask: none;
  box-shadow:
    inset 0 0 0 1px #d8bd7a,
    0 0 0 1px #806431;
}
.paper::after {
  content: "";
  position: absolute;
  inset: 6px 5px 5px;
  border: 1px solid #9c7b42;
  box-shadow: inset 0 1px 2px #71552538;
  pointer-events: none;
}
.paper > .corner {
  width: 58px;
  height: 58px;
  background-image: url("../materials/parchment-corner.svg");
  filter: drop-shadow(1px 2px 1px #4f3b2240);
}
.paper > .corner-tl {
  top: 0;
  left: -2px;
}
.paper > .corner-tr {
  top: 0;
  right: -2px;
}
.paper > .corner-bl {
  bottom: -2px;
  left: -2px;
}
.paper > .corner-br {
  bottom: -2px;
  right: -2px;
}
@media (max-width: 800px) {
  .paper > .corner {
    width: 36px;
    height: 36px;
  }
}

/* Fine dark upper edge and faint lower highlight make the header lettering
   feel pressed into its material, without softening the glyphs. */
.centered-header .utility-row > a,
.centered-header .language-disclosure > summary,
.primary-navigation .primary-link {
  text-shadow:
    0 -1px 1px #03130dde,
    0 1px 0 #f5e2ae26;
}
.centered-header .social-links > a {
  filter: drop-shadow(0 -1px 1px #03130de0) drop-shadow(0 1px 0 #f5e2ae26);
}
.centered-header .language-disclosure > summary > .icon,
.primary-navigation .primary-link > .icon {
  filter: drop-shadow(0 -1px 1px #03130dde) drop-shadow(0 1px 0 #f5e2ae26);
}