/* WordPress-specific additions layered on top of main.css (the handover stylesheet).
   Keep this file small; anything visual that exists in the handover belongs in main.css. */

/* ---- Header tweaks ----------------------------------------------------- */
/* Gold hover on social icons (header + mobile drawer) */
.social-links a,
.mobile-socials a {
  color: inherit;
  transition: color 0.15s ease, transform 0.15s ease;
}
.social-links a:hover,
.social-links a:focus-visible,
.mobile-socials a:hover,
.mobile-socials a:focus-visible {
  color: var(--gold-light, #edcf81);
  text-decoration: none;
  transform: translateY(-1px);
}
.centered-header .social-links > a:hover {
  filter: drop-shadow(0 0 3px #edcf8188) drop-shadow(0 -1px 1px #03130de0);
}
/* Language / account dropdowns must clear the header's gold frame
   (.gold-frame::before is z-index 2) but stay under the riveted corners (12). */
.centered-header .utility-row,
.centered-header .social-links {
  z-index: 3;
}
.centered-header .utility-row:has(details[open]) {
  z-index: 11;
}

/* ---- Article extras ---------------------------------------------------- */
.article-meta {
  color: var(--muted);
  font-size: 0.95rem;
  margin: -4px 0 18px;
}
.article-meta a {
  text-decoration: underline;
}
.entry-content > * {
  max-width: 72ch;
}
/* Post featured image: full column width, 16:9 crop, framed like other artwork */
.guide-article > img.article-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 460px;
  object-fit: cover;
  object-position: center 48%;
  margin: 0 0 25px;
  border: 1px solid #6b613e;
  box-shadow: 0 9px 18px #37291424;
  background: #e5d4a7;
}
.entry-content > figure,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-table,
.entry-content > .wp-block-embed,
.entry-content > .alignwide,
.entry-content > .alignfull {
  max-width: none;
}
.entry-content .alignright {
  float: right;
  margin: 6px 0 16px 24px;
  max-width: min(45%, 320px);
}
.entry-content .alignleft {
  float: left;
  margin: 6px 24px 16px 0;
  max-width: min(45%, 320px);
}
.entry-content .aligncenter {
  margin-left: auto;
  margin-right: auto;
}
/* Images render at their natural size (never upscaled), capped to the column.
   The handover's `.guide-article figure img { width:100% }` stretched small
   images – e.g. 390px song diagrams – to the full reading width. */
.guide-article figure.wp-block-image img,
.guide-article .wp-block-image img,
.entry-content .wp-block-image img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 630px;
  object-fit: contain;
  display: inline-block;
  vertical-align: top;
}
/* Images may be wrapped in a lightbox <a>; align via the figure's text-align
   so the anchor and the image follow together. */
.guide-article .wp-block-image,
.entry-content .wp-block-image {
  text-align: left;
}
/* Centre: core gives figure.aligncenter `display:table` but no auto margins
   (those come from block-theme layout styles a classic theme never prints).
   A flex column centres whatever is inside – bare <img>, lightbox <a>, or a
   resized wrapper – in every context (articles, hub sections, plugin sheets). */
figure.wp-block-image.aligncenter,
.wp-block-image.aligncenter,
.wp-block-image .aligncenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  float: none;
}
.wp-block-image.aligncenter > a,
.wp-block-image .aligncenter > a,
.wp-block-image.aligncenter > img,
.wp-block-image .aligncenter > img {
  display: block;
  max-width: 100%;
}
.wp-block-image.aligncenter > a > img {
  display: block;
  margin: 0 auto;
}
.wp-block-image.aligncenter > figcaption,
.wp-block-image .aligncenter > figcaption {
  display: block;
  width: 100%;
  text-align: center;
}
.guide-article .wp-block-image.alignleft,
.entry-content .wp-block-image.alignleft {
  text-align: left;
}
.guide-article .wp-block-image.alignright,
.entry-content .wp-block-image.alignright {
  text-align: right;
}
.guide-article .wp-block-image figcaption,
.entry-content .wp-block-image figcaption {
  text-align: inherit;
}
.guide-article .wp-block-image.aligncenter figcaption,
.entry-content .wp-block-image.aligncenter figcaption {
  text-align: center;
}
figure.wp-block-image.alignright,
.wp-block-image.alignright {
  float: right;
  margin: 6px 0 16px 24px;
  max-width: min(45%, 320px);
}
figure.wp-block-image.alignleft,
.wp-block-image.alignleft {
  float: left;
  margin: 6px 24px 16px 0;
  max-width: min(45%, 320px);
}
.wp-block-image.alignleft img,
.wp-block-image.alignright img {
  max-width: 100%;
}
/* Wide / full-width images still fill their container */
.guide-article .wp-block-image.alignfull img,
.guide-article .wp-block-image.alignwide img,
.guide-article .wp-block-image.is-style-wide img {
  width: 100%;
}
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}
/* Sub-heading scale – applies in articles AND hub sections (which have no
   .entry-content wrapper). Base main.css zeroes heading margins. */
.entry-content :is(h3, h4, h5, h6),
.oracle-section :is(h3, h4, h5, h6),
.guide-article :is(h3, h4, h5, h6),
.zfc-page-sheet .entry-content :is(h3, h4, h5, h6) {
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--green);
  text-wrap: pretty;
}
.entry-content h3,
.oracle-section h3,
.guide-article h3 {
  font-size: 1.6rem;
  margin: 2rem 0 0.7rem;
}
.entry-content h4,
.oracle-section h4,
.guide-article h4 {
  font-size: 1.3rem;
  margin: 1.6rem 0 0.55rem;
}
.entry-content h5,
.oracle-section h5,
.guide-article h5 {
  font-size: 1.1rem;
  margin: 1.4rem 0 0.5rem;
  letter-spacing: 0.01em;
}
.entry-content h6,
.oracle-section h6,
.guide-article h6 {
  font-family: "Lora", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0.5rem;
}
/* A heading directly after another heading or at the top of a section sits closer */
.entry-content :is(h2, h3, h4) + :is(h3, h4, h5),
.oracle-section :is(h2, h3, h4) + :is(h3, h4, h5) {
  margin-top: 0.6rem;
}
.oracle-section > h2 + :is(h3, h4) {
  margin-top: 0.4rem;
}
/* Paragraph/list following a sub-heading keeps a small gap; the heading owns the space */
.entry-content :is(h3, h4, h5, h6) + :is(p, ul, ol, figure),
.oracle-section :is(h3, h4, h5, h6) + :is(p, ul, ol, figure) {
  margin-top: 0;
}
.entry-content ul:not(nav *),
.entry-content ol:not(nav *) {
  margin: 0 0 1.1em;
  padding-left: 2em;
}
.entry-content ul:not(nav *) {
  list-style: disc;
}
.entry-content li:not(nav *) {
  margin: 0.25em 0;
}
.entry-content a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0 0 1.5em;
}
.entry-content th,
.entry-content td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.entry-content th {
  background: #e9ddb666;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
}
.entry-content hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}
.entry-content blockquote {
  margin: 20px 0;
  padding: 4px 20px;
  border-left: 3px solid var(--gold);
  color: #3f3a2a;
}
.entry-content .wp-block-image figcaption,
.entry-content .wp-block-gallery figcaption {
  text-align: center;
}
.page-links {
  margin: 24px 0;
  font-size: 1rem;
}
.page-links a {
  text-decoration: underline;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.icon-flip {
  transform: scaleX(-1);
}

/* ---- Social share row (single posts) ----------------------------------- */
.social-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 34px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 72ch;
}
.social-share .share-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--green);
}
.social-share .share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.social-share .share-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--green-raised, #143c2c);
  background: #fff8e7aa;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.social-share .share-btn .social-icon {
  width: 18px;
  height: 18px;
}
.social-share .share-btn:hover,
.social-share .share-btn:focus-visible {
  color: #fff1cb;
  background: var(--green);
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px #e5c47955;
  text-decoration: none;
  transform: translateY(-1px);
}
.social-share .share-copy.is-copied {
  color: #fff1cb;
  background: var(--green-raised);
  border-color: var(--gold-light);
}
.social-share .share-status {
  font-size: 0.9rem;
  color: var(--muted);
}
.social-share .share-status:empty {
  display: none;
}

/* ---- Author box (single posts) ----------------------------------------- */
.author-bio {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin: 30px 0 0;
  padding: 22px;
  max-width: 72ch;
  background: #e9ddb633;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
}
.author-bio .author-avatar {
  display: block;
  width: 96px;
  height: 96px;
}
.author-bio .author-avatar img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 6px 14px #37291424;
  background: #e5d4a7;
}
.author-bio .author-name {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.6rem;
}
.author-bio .author-description {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3f3a2a;
}
.author-bio .author-description p {
  margin: 0 0 0.6em;
  max-width: none;
}
.author-bio .author-posts-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.author-bio .author-posts-link .icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 520px) {
  .author-bio {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding: 18px;
  }
  .author-bio .author-name {
    width: 100%;
  }
}

/* ---- Hub template extras ---------------------------------------------- */
.oracle-intro-copy p {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.5;
}
.oracle-resource-list .oracle-resource-plain {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.45;
  color: #4b4531;
}
.oracle-chapters a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* ---- Guide-page game sidebar styled like the hub's guide index -------- */
.game-sidebar.oracle-guide-index {
  padding: 22px 22px 12px;
}
.game-sidebar .sidebar-game-link {
  display: block;
  text-align: center;
  margin-bottom: 14px;
}
.game-sidebar .sidebar-game-link:hover {
  text-decoration: none;
}
.game-sidebar .sidebar-game-link img {
  width: 200px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.game-sidebar .sidebar-game-title {
  display: block;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--muted);
}
.game-sidebar .sidebar-game-link:hover .sidebar-game-title {
  color: #775c15;
}
/* Desktop: no heading, no toggle – list sits directly under the logo. */
.game-sidebar .sidebar-disclosure summary {
  display: none;
}
.game-sidebar .sidebar-disclosure summary::-webkit-details-marker {
  display: none;
}
.game-sidebar.oracle-guide-index nav ul {
  border-top: 1px solid var(--rule);
}
.game-sidebar.oracle-guide-index nav a {
  display: block;
  padding: 11px 0;
  font-size: 1rem;
  line-height: 1.3;
}
.game-sidebar.oracle-guide-index nav a:hover {
  background: none;
  color: #775c15;
}
.game-sidebar.oracle-guide-index nav a[aria-current] {
  background: none;
  box-shadow: none;
  padding-left: 12px;
  border-left: 3px solid var(--gold);
  color: #191e12;
  font-weight: 600;
}
@media (max-width: 800px) {
  .game-sidebar.oracle-guide-index {
    padding: 14px 18px 0;
  }
  .game-sidebar .sidebar-game-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    margin-bottom: 8px;
  }
  .game-sidebar .sidebar-game-link img {
    width: 135px;
    height: 55px;
    margin: 0;
  }
  /* Mobile: chevron-only toggle (label is screen-reader text). */
  .game-sidebar .sidebar-disclosure summary {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    margin: 0 -18px;
    border-top: 1px solid var(--rule);
  }
  .game-sidebar .sidebar-disclosure summary .icon {
    width: 22px;
    height: 22px;
    transition: transform 0.15s;
  }
  .game-sidebar .sidebar-disclosure[open] summary .icon {
    transform: rotate(180deg);
  }
  .game-sidebar.oracle-guide-index nav ul {
    margin: 0 -18px;
  }
  .game-sidebar.oracle-guide-index nav a {
    padding: 12px 16px;
  }
  .game-sidebar.oracle-guide-index nav a[aria-current] {
    padding-left: 13px;
  }
}

/* ---- Listings (blog index, archives, search) --------------------------- */
.listing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 28px;
  margin-top: 8px;
}
.listing-grid .news-story .story-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.listing-grid .story-date {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 10px 0 4px;
}
.listing-grid h3 {
  font-size: 1.5rem;
  margin: 0 0 6px;
}
@media (max-width: 640px) {
  .listing-grid {
    grid-template-columns: 1fr;
  }
}
.zc-pagination {
  margin: 40px 0 8px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.zc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.zc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
}
.zc-pagination .page-numbers.current {
  background: var(--green);
  color: #fff1cb;
  border-color: var(--gold);
}
.zc-pagination .page-numbers:hover {
  text-decoration: none;
  background: #bc9b3f1e;
}
.zc-pagination .icon {
  width: 18px;
  height: 18px;
}
.inline-search {
  display: flex;
  max-width: 480px;
  margin: 12px 0 28px;
  border: 1px solid var(--gold);
  background: #fff8e7;
}
.inline-search input {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px 14px;
  min-height: 46px;
}
.inline-search button {
  padding: 0 14px;
  color: var(--green);
}
.error-page .all-games-grid {
  margin-top: 12px;
}

/* ---- Related news rail (single post) ---------------------------------- */
.related-news .popular-guide img {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* ---- Comments ---------------------------------------------------------- */
.comments-area {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  max-width: 72ch;
}
.comments-title,
.comment-reply-title {
  font-size: 1.75rem;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.comment-reply-title small {
  font-family: "Lora", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 400;
  margin-left: 10px;
}
.comment-list,
.comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list > .comment,
.comment-list > .pingback,
.comment-list > .trackback {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.comment-list > li:last-child {
  border-bottom: 0;
}
/* Replies: indented with a gold hairline */
.comment-list .children {
  margin: 18px 0 0 24px;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
}
.comment-list .children .comment {
  padding: 14px 0 0;
}
@media (max-width: 560px) {
  .comment-list .children {
    margin-left: 8px;
    padding-left: 12px;
  }
}

/* Body: avatar pinned left, everything else flows to its right */
.comment-body {
  position: relative;
  padding-left: 64px;
  min-height: 48px;
}
.comment-body .avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: #e5d4a7;
  box-shadow: 0 4px 10px #37291424;
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0 0 6px;
}
.comment-author {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.comment-author .fn {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  font-style: normal;
  color: var(--green);
}
.comment-author .fn a {
  text-decoration: none;
}
.comment-author .fn a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.comment-author .says {
  display: none;
}
.bypostauthor > .comment-body .comment-author::after {
  content: "Author";
  font-family: "Lora", Georgia, serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff1cb;
  background: var(--green);
  border: 1px solid var(--gold);
  padding: 2px 7px;
  align-self: center;
}
.comment-metadata {
  font-size: 0.85rem;
  color: var(--muted);
}
.comment-metadata a {
  color: inherit;
  text-decoration: none;
}
.comment-metadata a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.comment-metadata .edit-link::before {
  content: "·";
  margin: 0 6px 0 2px;
}
.comment-awaiting-moderation {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  font-style: italic;
  color: #8b3a2f;
}
.comment-content {
  font-size: 1rem;
  line-height: 1.6;
}
.comment-content p {
  margin: 0 0 0.7em;
  max-width: none;
}
.comment-content p:last-child {
  margin-bottom: 0;
}
.comment-content a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  overflow-wrap: anywhere;
}
.comment-body .reply {
  margin-top: 10px;
}
.comment-reply-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-raised);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--rule);
}
.comment-reply-link::before {
  content: "↩";
  font-weight: 400;
  color: var(--gold);
}
.comment-reply-link:hover,
.comment-reply-link:focus-visible {
  border-color: var(--gold);
  background: #bc9b3f1e;
  text-decoration: none;
}
.pingback .comment-body,
.trackback .comment-body {
  padding-left: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.no-comments {
  margin: 18px 0 0;
  font-style: italic;
  color: var(--muted);
}

/* Reply form */
.comment-respond {
  margin-top: 32px;
  padding: 22px 24px 24px;
  background: #e9ddb633;
  border: 1px solid var(--rule);
}
.comment-list .comment-respond {
  margin: 14px 0 0;
}
.comment-respond .comment-reply-title {
  font-size: 1.5rem;
}
#cancel-comment-reply-link {
  font-family: "Lora", Georgia, serif;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 10px;
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.comment-notes,
.logged-in-as {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 10px;
}
.comment-form label {
  display: block;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 14px 0 6px;
}
.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--gold);
  background: #fff8e7;
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
}
.comment-form textarea {
  min-height: 150px;
  resize: vertical;
}
.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 1px;
}
.comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
}
.comment-form-cookies-consent input {
  margin-top: 4px;
  accent-color: var(--green);
}
.comment-form-cookies-consent label {
  display: inline;
  font-family: "Lora", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0;
}
.comment-form .form-submit {
  margin: 20px 0 0;
}
.comment-form .primary-cta {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 22px;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #fff1cb;
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px #e5c47955;
  font: inherit;
  font-weight: 600;
}
.comment-form .primary-cta:hover,
.comment-form .primary-cta:focus-visible {
  color: var(--gold-light);
  background-color: var(--green-raised);
}
.comment-navigation {
  display: flex;
  justify-content: space-between;
  margin: 16px 0;
}
.comment-navigation a {
  text-decoration: underline;
}
/* ---- Admin bar offset -------------------------------------------------- */
.admin-bar .mobile-masthead {
  top: 46px;
}
@media (min-width: 783px) {
  .admin-bar .mobile-masthead {
    top: 32px;
  }
}

/* ---- Listing without a rail (blog index / News Listing) ---------------- */
.listing-page--full .content-grid {
  grid-template-columns: minmax(0, 1fr);
}
.listing-page--full .guide-article {
  max-width: none;
}
.listing-page--full .listing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
  .listing-page--full .listing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .listing-page--full .listing-grid {
    grid-template-columns: 1fr;
  }
}
.listing-page .zc-pagination .nav-links {
  justify-content: center;
}
.listing-page .zc-pagination .screen-reader-text {
  position: absolute;
}

/* ---- Games menu: featured games without guides link straight to the page ---- */
.desktop-game-choices .desktop-game-direct {
  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;
  text-decoration: none;
}
.desktop-game-choices .desktop-game-direct .icon {
  width: 14px;
  height: 14px;
  color: var(--gold-light, #edcf81);
}
.desktop-game-choices .desktop-game-direct:hover,
.desktop-game-choices .desktop-game-direct:focus-visible {
  background: #b49a5e29;
  border-color: var(--rule, #bba16b66);
  text-decoration: none;
}
.mobile-game-choice--direct {
  text-decoration: none;
}
.mobile-game-choice--direct .icon {
  color: var(--gold-light, #edcf81);
}

/* ---- Hub sections: ordinary lists (not resource rows) ------------------ */
.oracle-prose-list,
.oracle-section ul:not([class]):not(nav *),
.oracle-section ol:not([class]):not(nav *) {
  margin: 0 0 1.1em;
  padding-left: 2em;
  max-width: 68ch;
  line-height: 1.55;
}
.oracle-prose-list,
.oracle-section ul:not([class]):not(nav *) {
  list-style: none;
  padding-left: 2em;
}
.oracle-prose-list > li,
.oracle-section ul:not([class]):not(nav *) > li {
  position: relative;
  margin: 0.35em 0;
}
/* Gold diamond bullet – same mark the mobile gallery dots use */
.oracle-prose-list > li::before,
.oracle-section ul:not([class]):not(nav *) > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold, #b18c43);
  transform: rotate(45deg);
}
.oracle-section ol:not([class]):not(nav *) {
  list-style: decimal;
}
.oracle-section ol:not([class]):not(nav *) > li::marker {
  color: var(--gold, #b18c43);
  font-variant-numeric: tabular-nums;
}
.oracle-prose-list li > :is(ul, ol),
.oracle-section ul:not([class]):not(nav *) li > :is(ul, ol) {
  margin: 0.3em 0 0.4em;
}
/* Article lists get the same bullet for consistency. wp-block-list is the
   core list block (always prose); .zc-chapter-nav is excluded — its lists are
   numbered chapter rows, not prose bullets. */
.entry-content ul:not([class]):not(nav *):not(.zc-chapter-nav *),
.entry-content ul.wp-block-list:not(nav *):not(.zc-chapter-nav *) {
  list-style: none;
  padding-left: 2em;
}
.entry-content ul:not([class]):not(nav *):not(.zc-chapter-nav *) > li,
.entry-content ul.wp-block-list:not(nav *):not(.zc-chapter-nav *) > li {
  position: relative;
}
.entry-content ul:not([class]):not(nav *):not(.zc-chapter-nav *) > li::before,
.entry-content ul.wp-block-list:not(nav *):not(.zc-chapter-nav *) > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold, #b18c43);
  transform: rotate(45deg);
}
.entry-content ol:not([class]):not(nav *):not(.zc-chapter-nav *) > li::marker,
.entry-content ol.wp-block-list:not(nav *):not(.zc-chapter-nav *) > li::marker {
  color: var(--gold, #b18c43);
}

/* =========================================================================
   Sidebar rail: custom menus (template-parts/home/sidebar-menu.php)
   ======================================================================= */
/* Stacked rail asides have no top margin of their own. */
.homepage-rail > .popular-guides + .popular-guides,
.content-rail > .popular-guides + .popular-guides,
.homepage-rail > .popular-guides + .ad-slot,
.content-rail > .popular-guides + .ad-slot,
.homepage-rail > .ad-slot + .popular-guides,
.content-rail > .ad-slot + .popular-guides {
  margin-top: 32px;
}
.zc-side-link {
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  padding: 14px 0;
}
.zc-side-link .zc-side-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8d702e;
}
.zc-side-link .zc-side-icon .icon,
.zc-side-link .zc-side-icon .social-icon {
  width: 26px;
  height: 26px;
}
.zc-side-link .zc-side-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.zc-side-link strong {
  font-size: 1.125rem;
  margin-bottom: 2px;
}
/* Self-links render as spans (not links) when the visitor is on that page. */
.popular-guide.is-current {
  cursor: default;
}
.popular-guide.is-current strong {
  color: #8d702e;
}
.popular-guide.is-current .zc-side-icon {
  color: var(--gold, #b18c43);
}
@media (max-width: 1150px) {
  .popular-guides.zc-side-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .zc-side-link {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .zc-side-link .zc-side-icon {
    width: 40px;
    height: 40px;
  }
}

/* =========================================================================
   Reading width: let article/hub content use the full column.
   The handover capped prose at 68–72ch; the site prefers the content to fill
   its column (sidebar already bounds it). Keep this block LAST so it wins.
   ======================================================================= */
.entry-content > *,
.entry-content p,
.entry-content :is(h2, h3, h4, h5, h6),
.entry-content :is(ul, ol),
.guide-article p,
.guide-article > p:not(.article-intro),
.guide-article :is(h3, h4, h5, h6),
.guide-article .article-intro,
.header-study > p,
.oracle-section p,
.oracle-section :is(h3, h4, h5, h6),
.oracle-prose-list,
.oracle-section ul:not([class]):not(nav *),
.oracle-section ol:not([class]):not(nav *),
.oracle-summary,
.oracle-original p,
.author-bio,
.social-share,
.comments-area,
.rank-math-block {
  max-width: none;
}
/* The hub intro keeps its two-column hero; only its copy is widened */
.oracle-intro-copy p {
  max-width: none;
}

/* Content headings wrap naturally. The base `text-wrap: balance` splits a
   heading into equal-length lines, which reads as a narrowed column. */
.entry-content :is(h2, h3, h4, h5, h6),
.guide-article :is(h2, h3, h4, h5, h6),
.oracle-section :is(h2, h3, h4, h5, h6),
.zfc-page-sheet :is(h2, h3, h4, h5, h6),
.zw-page-sheet :is(h2, h3, h4, h5, h6) {
  text-wrap: pretty;
  max-width: none;
}
/* <strong>/<b> inside headings: browsers apply font-weight:bolder, which with the
   variable Crimson Pro pushes a 600 heading to 900. Headings are already bold –
   emphasis tags inside them render exactly like the rest of the heading. */
:is(h1, h2, h3, h4, h5, h6) :is(strong, b),
.zc-profile-title :is(strong, b),
.rank-math-question :is(strong, b),
.wp-block-details > summary :is(strong, b) {
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* =========================================================================
   Lazy-image height safety (WordPress 6.7+ auto-sizes)
   WP adds `img[sizes^="auto"] { contain-intrinsic-size: 3000px 1500px }`.
   Any image whose CSS drops its intrinsic ratio (the handover's mobile
   `aspect-ratio: auto` on homepage cards) then renders 1500px tall until –
   and sometimes after – it loads. Keep a real ratio on card media and give
   every auto-sized image a sane intrinsic fallback.
   ======================================================================= */
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: auto 300px;
}
.homepage .news-story .story-image img,
.story-image img {
  aspect-ratio: 16 / 9;
  height: auto;
}
.lead-story .story-image img {
  aspect-ratio: 4 / 3;
}
@media (max-width: 800px) {
  .homepage .news-story .story-image img {
    aspect-ratio: 16 / 9;
  }
  .homepage .lead-story .story-image img {
    aspect-ratio: 16 / 9;
  }
  .homepage .supporting-stories .story-image img {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* =========================================================================
   Search results page
   ======================================================================= */
.search-header {
  margin-bottom: 26px;
}
.search-kicker {
  margin: 0 0 4px;
  font-family: "Lora", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.search-page .guide-article > h1 {
  margin: 0 0 8px;
}
.search-term {
  color: var(--green-raised, #143c2c);
}
.search-count {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.95rem;
}
.search-count a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
/* Refine disclosure */
.search-refine {
  border: 1px solid var(--rule);
  background: #e9ddb633;
}
.search-refine > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.search-refine > summary::-webkit-details-marker {
  display: none;
}
.search-refine > summary .icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}
.search-refine > summary .icon-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
}
.search-refine[open] > summary .icon-chevron {
  transform: rotate(180deg);
}
.search-refine__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 16px;
  align-items: end;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--rule);
}
.search-refine__field {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.search-refine__field--grow {
  grid-column: 1 / -1;
}
.search-refine__field input,
.search-refine__field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--gold);
  background: #fff8e7;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  box-sizing: border-box;
}
.search-refine__field input:focus-visible,
.search-refine__field select:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 1px;
}
.search-refine__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px;
  background: var(--green) var(--leather) repeat;
  background-size: 520px;
  color: #fff1cb;
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px #e5c47955;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.search-refine__submit:hover {
  color: var(--gold-light);
  background-color: var(--green-raised);
}
.search-refine__submit .icon {
  width: 16px;
  height: 16px;
}
/* Results */
.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.search-result {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.search-result:first-child {
  border-top: 1px solid var(--rule);
}
.search-result__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff8e7;
  border: 1px solid #6b613e;
  box-shadow: 0 6px 14px #37291424;
}
.search-result__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-result__thumb .search-result__logo {
  object-fit: contain;
  padding: 10%;
  background: #fff8e7;
}
.search-result__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  background: #fff8e7;
}
.search-result__placeholder .icon {
  width: 34px;
  height: 34px;
  color: var(--gold);
}
.search-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--muted);
}
.search-result__type {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff1cb;
  background: var(--green);
  border: 1px solid var(--gold);
  padding: 2px 8px;
  font-size: 0.68rem;
}
.search-result--article .search-result__type {
  background: var(--green-raised);
}
.search-result--video .search-result__type {
  background: #8b3a2f;
}
.search-result--hub .search-result__type {
  background: var(--gold);
  color: var(--ink);
}
.search-result__game a {
  color: var(--green-raised);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.guide-article .search-result__title,
.search-result__title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  font-size: 1.45rem;
  line-height: 1.2;
}
.search-result__title a {
  text-decoration: none;
}
.search-result__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.search-result__excerpt {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #3f3a2a;
}
mark.search-highlight {
  background: #edcf8166;
  color: inherit;
  padding: 0 2px;
  box-shadow: inset 0 -2px 0 var(--gold);
}
/* No results */
.search-empty ul:not(.search-empty__games) {
  margin: 0 0 1.2em 1.3em;
}
.search-empty__games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-empty__games a {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--rule);
  background: #e9ddb633;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 600;
  color: var(--green);
}
.search-empty__games a:hover {
  border-color: var(--gold);
  background: #bc9b3f1e;
}
.search-empty__games img {
  width: 100%;
  height: 56px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .search-result {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }
  .search-result__title {
    font-size: 1.15rem;
  }
  .search-result__excerpt {
    font-size: 0.92rem;
  }
}
@media (max-width: 480px) {
  .search-result {
    grid-template-columns: 1fr;
  }
}

/* Game hub without guide pages: no rail, content spans the sheet */
.oracle-layout--single {
  grid-template-columns: minmax(0, 1fr);
}
.oracle-layout--single .oracle-main {
  max-width: none;
}

/* Scenic backdrop: the top fade completes higher so more of the painting shows
   (handover faded in over the top 30% of the band). */
.scenic-backdrop::before {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, black 12%),
    linear-gradient(
      to right,
      transparent,
      black max(5%, calc(50% - 1160px)),
      black min(95%, calc(50% + 1160px)),
      transparent
    );
  mask-image:
    linear-gradient(to bottom, transparent, black 12%),
    linear-gradient(
      to right,
      transparent,
      black max(5%, calc(50% - 1160px)),
      black min(95%, calc(50% + 1160px)),
      transparent
    );
}

/* Scenic band starts at the very top of the page: its bottom edge stays at
   70vh (handover), so making it 70vh tall puts the top at 0. The painting is
   drawn 2400px wide (≈1400px tall), so the taller band shows more of it. */
:root {
  --scene-height: min(85vh, 1200px);
}
/* …and its bottom edge sits at 85vh (handover: 70vh), i.e. the whole band is
   85vh tall so the top (and the fade's start) is at the very top of the page. */
.scenic-backdrop {
  inset: calc(85vh - var(--scene-height)) 0 auto;
}

/* Content images: an editor who chose the Medium/Large size wants a responsive
   picture, so those fill the reading column on desktop (srcset supplies the
   sharper sources). Images whose file is genuinely small (< 480px intrinsic,
   tagged .zc-img-small server-side) always stay natural – they are excluded
   inside every setter, not by a separate override, so specificity can't leak.
   Floated images are excluded too. */
.entry-content .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) img:not(.zc-img-small),
.oracle-section .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) img:not(.zc-img-small),
.entry-content .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.oracle-section .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)) {
  width: 100%;
  max-width: 100%;
}
.entry-content .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) img:not(.zc-img-small),
.oracle-section .wp-block-image:is(.size-medium, .size-medium_large, .size-large):not(.alignleft):not(.alignright) img:not(.zc-img-small) {
  height: auto;
  max-height: none;
}
/* …but not edge-to-edge: Medium tops out at 720px, Medium-Large at 900px,
   Large fills the column. Centred figures stay centred. */
.entry-content .wp-block-image.size-medium:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.oracle-section .wp-block-image.size-medium:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.entry-content .wp-block-image.size-medium:not(.alignleft):not(.alignright) > img:not(.zc-img-small),
.oracle-section .wp-block-image.size-medium:not(.alignleft):not(.alignright) > img:not(.zc-img-small) {
  max-width: min(100%, 720px);
}
.entry-content .wp-block-image.size-medium_large:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.oracle-section .wp-block-image.size-medium_large:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.entry-content .wp-block-image.size-medium_large:not(.alignleft):not(.alignright) > img:not(.zc-img-small),
.oracle-section .wp-block-image.size-medium_large:not(.alignleft):not(.alignright) > img:not(.zc-img-small) {
  max-width: min(100%, 900px);
}
/* Full-size images scale like Medium (up to 720px). */
.entry-content .wp-block-image.size-full:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.oracle-section .wp-block-image.size-full:not(.alignleft):not(.alignright) > a:not(:has(> img.zc-img-small)),
.entry-content .wp-block-image.size-full:not(.alignleft):not(.alignright) > img:not(.zc-img-small),
.oracle-section .wp-block-image.size-full:not(.alignleft):not(.alignright) > img:not(.zc-img-small),
.entry-content .wp-block-image.size-full:not(.alignleft):not(.alignright) > a > img:not(.zc-img-small),
.oracle-section .wp-block-image.size-full:not(.alignleft):not(.alignright) > a > img:not(.zc-img-small) {
  width: 100%;
  max-width: min(100%, 720px);
  height: auto;
  max-height: none;
}
/* Classic-editor markup puts the size class on the img itself (no
   .wp-block-image figure). These need a definite width so the rendered size
   never depends on the lazy-image intrinsic fallback. */
.entry-content img.size-full:not(.zc-img-small):not(.alignleft):not(.alignright),
.oracle-section img.size-full:not(.zc-img-small):not(.alignleft):not(.alignright),
.entry-content img.size-medium:not(.zc-img-small):not(.alignleft):not(.alignright),
.oracle-section img.size-medium:not(.zc-img-small):not(.alignleft):not(.alignright) {
  width: 100%;
  max-width: 720px;
  height: auto;
  max-height: none;
}
.entry-content img.size-medium_large:not(.zc-img-small):not(.alignleft):not(.alignright),
.oracle-section img.size-medium_large:not(.zc-img-small):not(.alignleft):not(.alignright) {
  width: 100%;
  max-width: 900px;
  height: auto;
  max-height: none;
}
.entry-content img.size-large:not(.zc-img-small):not(.alignleft):not(.alignright),
.oracle-section img.size-large:not(.zc-img-small):not(.alignleft):not(.alignright) {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
}
/* Small images (.zc-img-small, <480px) must also survive the handover's
   generic `figure img { width:100% }` – e.g. a bare <figure> that never got a
   wp-block-image class, inside or outside a profile card. */
.guide-article figure img.zc-img-small,
.entry-content figure img.zc-img-small,
.oracle-section figure img.zc-img-small,
.entry-content p img.zc-img-small,
.oracle-section p img.zc-img-small,
.zc-profile-block img.zc-img-small {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Homepage without the Popular Guides rail: feed spans the sheet */
.home-top--single {
  grid-template-columns: minmax(0, 1fr) !important;
}
.home-top--single .homepage-feed {
  max-width: none;
}
.home-top--single .more-stories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .home-top--single .more-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .home-top--single .more-stories {
    grid-template-columns: 1fr;
  }
}