/*
Theme Name: School Of Stores
Theme URI: https://www.schoolofstores.com/
Author: School Of Stores
Description: School Of Stores theme with sticky navigation, 85vh Home hero, and a narrow reading-focused site corridor.
Version: 1.0.18
Text Domain: school-of-stores
*/

:root {
  --sos-navy: #061a35;
  --sos-navy-deep: #020b18;
  --sos-blue: #24a8ff;
  --sos-blue-bright: #6fd0ff;
  --sos-gold: #b27a10;
  --sos-gold-light: #f2d27d;
  --sos-cream: #f7f1df;
  --sos-ink: #101a27;
  --sos-page: #fbfaf6;
  /* Reading-first sitewide corridor, intentionally narrower to leave side room for future banners. */
  --sos-content: 820px;
  /* One shared outer edge for the desktop header and footer. */
  --sos-header-edge: clamp(24px, 3.25vw, 52px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Keep the horizontal viewport geometry identical on short and long pages. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  color: var(--sos-ink);
  background: var(--sos-page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
}

a { color: #0b69a8; }
a:hover, a:focus-visible { color: #084f7f; }
img { max-width: 100%; height: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid rgba(178,122,16,.34);
  box-shadow: 0 5px 18px rgba(6,26,53,.10);
}
body.admin-bar .site-header { top: 32px; }

.header-inner {
  width: calc(100% - (2 * var(--sos-header-edge)));
  min-height: 108px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Stable edge-to-edge desktop header geometry.
   The logo starts at the left outer edge and the final menu item ends at the
   matching right outer edge. The search field consumes the flexible middle. */
.site-branding {
  flex: 0 0 250px;
  width: 250px;
  height: 92px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.site-branding a,
.custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 250px;
  height: 92px;
  line-height: 0;
}
.site-logo,
.custom-logo {
  display: block;
  flex: 0 0 250px;
  width: 250px;
  height: 92px;
  max-width: 250px;
  max-height: 92px;
  object-fit: contain;
  object-position: left center;
}

.header-main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
}

.primary-navigation {
  min-width: max-content;
  width: auto;
  display: flex;
  justify-content: flex-end;
  justify-self: end;
  margin-left: 0;
}
.primary-navigation ul,
.primary-navigation .menu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-navigation li { margin: 0; padding: 0; }
.primary-navigation a {
  position: relative;
  display: inline-block;
  padding: 14px 0;
  color: var(--sos-gold);
  font-size: .95rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none;
  transition: color .18s ease, text-shadow .18s ease;
}
/* No Park Worlds-style line/underline treatment. */
.primary-navigation a::before,
.primary-navigation a::after { content: none !important; display: none !important; }
.primary-navigation a:hover,
.primary-navigation a:focus-visible {
  color: #fff;
  text-shadow:
    0 0 4px rgba(36,168,255,.98),
    0 0 10px rgba(36,168,255,.86),
    0 0 18px rgba(36,168,255,.68),
    0 0 28px rgba(36,168,255,.46);
  outline: none;
}

/*
 * The hero is the Home-page image. It is centered and never cropped.
 * 85vh caps it at about 85% of the currently viewable browser height.
 */
.home-hero {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #08162a;
  overflow: hidden;
}
.home-hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 85vh;
  margin: 0 auto;
  padding: 0;
  object-fit: contain;
}

.content-shell,
.content-shell.wide {
  width: min(var(--sos-content), calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 78px;
}
.page-title, .entry-title, .blog-title {
  margin: 0 0 24px;
  color: var(--sos-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  line-height: 1.08;
}
.page-title, .blog-title { font-size: clamp(2.2rem, 5vw, 4rem); }
.entry-title { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover, .entry-title a:focus-visible { color: #0b69a8; }
.entry-meta { color: #667381; font-size: .92rem; margin: -10px 0 20px; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content img { border-radius: 8px; }
.entry-content p { max-width: 72ch; }

.sos-post-audio {
  margin: 0 0 34px;
}
.sos-post-audio audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

.blog-grid { display: grid; gap: 30px; }
.post-card {
  padding: 30px;
  background: #fff;
  border: 1px solid rgba(6,26,53,.11);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(6,26,53,.07);
}
.post-card .entry-title { margin-bottom: 18px; }
.read-more {
  display: inline-block;
  margin-top: 10px;
  font-weight: 750;
  text-decoration: none;
}

.pagination, .nav-links { margin-top: 36px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 10px; }
.page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 7px 12px;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(6,26,53,.14);
}
.page-numbers.current { color: #fff; background: var(--sos-navy); }

.site-footer {
  color: rgba(255,255,255,.72);
  background: var(--sos-navy-deep);
  border-top: 1px solid rgba(217,173,69,.32);
}
.footer-inner {
  width: min(var(--sos-content), calc(100% - 40px));
  margin: 0 auto;
  padding: 26px 0;
  text-align: center;
  font-size: .88rem;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 820px) {
  .header-inner {
    width: min(var(--sos-content), calc(100% - 40px));
    min-height: 0;
    padding: 18px 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  .site-branding { width: min(410px, 92vw); height: 80px; margin-right: 0; text-align: center; justify-content: center; }
  .site-branding a, .custom-logo-link { width: 100%; height: 80px; justify-content: center; }
  .site-logo, .custom-logo { flex: 0 1 auto; width: min(250px, 92vw); height: 80px; max-width: min(250px, 92vw); max-height: 80px; object-position: center; }
  .header-main {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sos-header-search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
  }
  .primary-navigation { width: 100%; min-width: 0; margin-left: 0; display: block; }
  .primary-navigation ul,
  .primary-navigation .menu {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 26px;
  }
  .primary-navigation a { padding: 8px 0; }
  .content-shell,
  .content-shell.wide { padding-top: 46px; padding-bottom: 58px; }
}

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

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


/* Stores directory and structured-family uplink — 1.0.7 */
.sos-stores-directory {
  margin-top: 10px;
}
.sos-stores-directory > h2 {
  margin: 0 0 16px;
  color: var(--sos-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.sos-stores-directory-list {
  margin: 0;
  padding-left: 1.25rem;
}
.sos-stores-directory-list li {
  margin: 0 0 9px;
}
.sos-stores-directory-list a {
  color: var(--sos-navy);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sos-structured-uplink {
  margin: 0 0 24px;
}
.sos-structured-uplink a {
  color: var(--sos-gold);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
.sos-structured-uplink a:hover,
.sos-structured-uplink a:focus-visible {
  color: var(--sos-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------
   School Of Stores structured pages — 1.0.2
-------------------------------------------------------------- */
:root {
  --pw-navy: var(--sos-navy);
  --pw-white: #ffffff;
  --pw-gold: var(--sos-gold);
  --pw-gold-light: var(--sos-gold-light);
  --pw-muted: #667381;
}

.sos-structured-page { width: 100%; }
.sos-standard-section {
  margin: 0 0 42px;
  padding: 0 0 38px;
  border-bottom: 1px solid rgba(6,26,53,.13);
}
.sos-standard-section:last-child { border-bottom: 0; }
.sos-section-kicker {
  margin: 0 0 7px;
  color: var(--sos-gold);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
}
.sos-standard-section > h2 {
  margin: 0 0 15px;
  color: var(--sos-navy);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.15;
}
.sos-section-body > :first-child { margin-top: 0; }
.sos-section-body > :last-child { margin-bottom: 0; }
.sos-category-link a { font-weight: 750; text-decoration: none; }
.sos-category-posts { display: grid; gap: 12px; margin-top: 22px; }
.sos-category-post-card { padding: 14px 16px; background: #fff; border: 1px solid rgba(6,26,53,.1); border-radius: 8px; }
.sos-category-post-card h3 { margin: 0; font-size: 1.08rem; }
.sos-category-post-card h3 a { color: var(--sos-navy); text-decoration: none; }
.sos-category-post-date { margin: 4px 0 0; color: #667381; font-size: .86rem; }
.sos-gallery-section .pw-core-art-gallery-grid { margin-top: 0; }


/* Keep every standard Kinds Of Stores section on the exact same left edge.
   This explicitly protects the Blog Category block from nested-category or
   generated-card styles changing its corridor/alignment. */
.sos-structured-page > .sos-standard-section,
.sos-structured-page > .sos-blog-category-section,
.sos-structured-page > .sos-email-outreach-section {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.sos-blog-category-section > p,
.sos-blog-category-section > h2,
.sos-blog-category-section > .sos-category-posts {
  margin-left: 0;
}

/* Shared Blog-post artwork presentation. Artwork stays inside the normal
   post corridor, is centered, preserves its exact aspect ratio, and uses 85%
   of the actually usable visible height only as a MAXIMUM. It is never scaled
   up merely to reach that height. The lightbox script refines the height bound
   after measuring persistent site/browser chrome. */
.single-post {
  --pw-blog-image-max-height: 85vh;
  --pw-blog-image-max-width: 100%;
}
@supports (height: 1svh) {
  .single-post { --pw-blog-image-max-height: 85svh; }
}
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.single-post .entry-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--pw-blog-image-max-height);
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}
.single-post .entry-content .pw-blog-artwork-lightbox-item {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  cursor: zoom-in;
}
.single-post .entry-content .pw-blog-artwork-lightbox-item[aria-haspopup="dialog"] {
  cursor: zoom-in;
}
.single-post .entry-content .sos-post-artwork {
  width: 100%;
  max-width: 100%;
  margin-top: 28px;
  margin-bottom: 38px;
  text-align: center;
}


html.pw-art-lightbox-open,
body.pw-art-lightbox-open {
  overflow: hidden;
}
.pw-art-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .88);
}
.pw-art-lightbox.is-open { display: flex; }
.pw-art-lightbox-panel {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  width: min(96vw, 1500px);
  height: min(94vh, 1000px);
  height: min(94svh, 1000px);
  padding: 52px 8px 12px;
  color: #fff;
  background: #05070a;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.pw-art-lightbox-stage {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pw-art-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pw-art-lightbox-image[hidden] { display: none !important; }
.pw-art-lightbox-loading {
  width: 100%;
  text-align: center;
  color: rgba(255,255,255,.82);
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}
.pw-art-lightbox-loading[hidden] { display: none !important; }
.pw-art-lightbox-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: #000;
}
.pw-art-lightbox-video[hidden] { display: none !important; }
.pw-art-lightbox-close,
.pw-art-lightbox-fullscreen,
.pw-art-lightbox-prev,
.pw-art-lightbox-next {
  appearance: none;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(0,0,0,.68);
  color: #fff;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}
.pw-art-lightbox-close:hover,
.pw-art-lightbox-close:focus-visible,
.pw-art-lightbox-fullscreen:hover,
.pw-art-lightbox-fullscreen:focus-visible,
.pw-art-lightbox-prev:hover,
.pw-art-lightbox-prev:focus-visible,
.pw-art-lightbox-next:hover,
.pw-art-lightbox-next:focus-visible {
  color: #ffd37a;
  border-color: #ffd37a;
  outline: none;
}
.pw-art-lightbox-fullscreen {
  position: absolute;
  top: 10px;
  right: 62px;
  z-index: 2;
  min-width: 128px;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  font-size: .88rem;
  font-weight: 400;
  white-space: nowrap;
}
.pw-art-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 31px;
  font-weight: 400;
}
.pw-art-lightbox-prev,
.pw-art-lightbox-next {
  width: 42px;
  height: 54px;
  border-radius: 9px;
  font-size: 28px;
  justify-self: center;
}
.pw-art-lightbox-prev { grid-column: 1; grid-row: 1; }
.pw-art-lightbox-next { grid-column: 3; grid-row: 1; }
.pw-art-lightbox-status {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 1.25em;
  padding-top: 9px;
  text-align: center;
  font-size: .88rem;
  color: rgba(255,255,255,.78);
}
.pw-core-identity-art-link[aria-haspopup="dialog"],
.pw-core-featured-art-link[aria-haspopup="dialog"],
.pw-core-art-gallery-item[aria-haspopup="dialog"] {
  cursor: zoom-in;
}

.pw-art-lightbox:fullscreen,
.pw-art-lightbox:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: #000;
}
.pw-art-lightbox:fullscreen .pw-art-lightbox-panel,
.pw-art-lightbox:-webkit-full-screen .pw-art-lightbox-panel,
.pw-art-lightbox.is-native-fullscreen .pw-art-lightbox-panel {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100svh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 640px) {
  .pw-art-lightbox { padding: 8px; }
  .pw-art-lightbox-panel {
    width: 100%;
    height: 96vh;
    height: 96svh;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: 48px 2px 8px;
    border-radius: 10px;
  }
  .pw-art-lightbox-fullscreen {
    right: 54px;
    min-width: 0;
    max-width: calc(100% - 110px);
    padding: 0 9px;
    font-size: 12px;
  }
  .pw-art-lightbox-prev,
  .pw-art-lightbox-next {
    width: 38px;
    height: 50px;
    font-size: 25px;
  }
}

:root {
  /* Fallbacks are used only until the first gallery artwork is measurable.
     Managed galleries receive all three sizes from the computed safe maximum. */
  --pw-gallery-preview-width: 250px;
  --pw-gallery-preview-max-height: 390px;
}
html.pw-art-gallery-size-small .pw-art-gallery-managed {
  --pw-gallery-preview-width: var(--pw-gallery-small-preview-width, 175px);
  --pw-gallery-preview-max-height: var(--pw-gallery-small-preview-max-height, 285px);
  --pw-gallery-preview-height: var(--pw-gallery-small-preview-height, 285px);
}
html.pw-art-gallery-size-medium .pw-art-gallery-managed {
  --pw-gallery-preview-width: var(--pw-gallery-medium-preview-width, 250px);
  --pw-gallery-preview-max-height: var(--pw-gallery-medium-preview-max-height, 390px);
  --pw-gallery-preview-height: var(--pw-gallery-medium-preview-height, 390px);
}
html.pw-art-gallery-size-large .pw-art-gallery-managed {
  --pw-gallery-preview-width: var(--pw-gallery-large-preview-width, min(80%, 656px));
  --pw-gallery-preview-max-height: var(--pw-gallery-large-preview-max-height, 80svh);
  --pw-gallery-preview-height: var(--pw-gallery-large-preview-height, 80svh);
}

.pw-gallery-page {
  padding: 0 0 90px;
}
.pw-gallery-page__inner {
  width: min(calc(100% - 40px), 1080px);
  margin: 0 auto;
  padding: 60px 0 0;
}
.pw-gallery-page__header {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}
.pw-gallery-page__header .entry-title {
  margin: 0;
}
.pw-gallery-page .pw-art-gallery-managed {
  max-width: 820px;
  margin: 0;
  padding: 0;
}
/* Match /system/ exactly: the page itself uses the 1080px standard corridor,
   while its actual hub sections are 820px wide and left-aligned inside it. */
.pw-gallery-page .pw-gallery-page-blog-hub {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}
/* Civilization / Reach and Convention use the same internal heading language
   as /system/: Russo One remains reserved for the page H1, while standard
   section H2s use Roboto Condensed. */
.pw-gallery-page .pw-art-gallery-managed > h2,
.pw-gallery-page .pw-system-section-header h2 {
  color: var(--pw-navy);
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
.pw-gallery-page .pw-art-gallery-managed > h2 {
  margin: 0 0 1rem;
}
/* Mount the shared System Blog-category component beneath each gallery.
   Core now loads the same front.css System component rules on /system/,
   /civilization/, and /convention/, keeping typography, View category,
   dividers, cards, margins, and responsive spacing synchronized. */
.pw-gallery-page-blog-hub {
  margin-top: 2.25rem;
}
/* Structured Brand / Comic Series Blog sections use the same internal 820px
   corridor as Civilization's shared Blog-category component, so View category
   stays visually attached to the Blog section rather than drifting to the far
   edge of the 1080px entity page. */
.pw-core-entity-page .pw-core-entity-blog {
  width: 100%;
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}
.pw-art-gallery-size-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 18px;
}
.pw-art-gallery-size-control {
  min-height: 36px;
  padding: 6px 12px;
  color: var(--pw-navy);
  background: transparent;
  border: 1px solid rgba(1,25,58,.42);
  border-radius: 4px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pw-art-gallery-size-control:hover,
.pw-art-gallery-size-control:focus-visible {
  color: var(--pw-white);
  background: var(--pw-navy);
  border-color: var(--pw-gold);
}
.pw-art-gallery-size-control:disabled {
  opacity: .38;
  cursor: default;
  color: var(--pw-muted);
  background: transparent;
  border-color: rgba(1,25,58,.22);
}

/* Grid-style galleries use a true left-aligned wrapping row. */
.pw-art-gallery-managed .pw-art-gallery-grid,
.pw-art-gallery-managed .pw-convention-art-gallery-grid,
.pw-art-gallery-managed .pw-civilization-art-gallery-grid,
.pw-art-gallery-managed .pw-system-art-gallery-grid,
.pw-art-gallery-managed .pw-core-art-gallery-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}
/* Each grid item receives its own width from JavaScript, derived from the
   common preview height and that artwork's natural aspect ratio. This keeps
   portrait and landscape previews exactly equal in height at every size state.
   Flex wrapping, rather than per-item shrinking, decides when a wide landscape
   card starts a new row. */
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-art-gallery-preview,
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-convention-art-gallery-item,
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-civilization-art-gallery-item,
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-system-art-gallery-item,
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-core-art-gallery-item,
html.pw-art-gallery-size-small .pw-art-gallery-managed .pw-core-brand-art-source-item {
  --pw-gallery-item-preview-width: var(--pw-gallery-item-small-width, var(--pw-gallery-preview-width));
}
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-art-gallery-preview,
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-convention-art-gallery-item,
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-civilization-art-gallery-item,
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-system-art-gallery-item,
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-core-art-gallery-item,
html.pw-art-gallery-size-medium .pw-art-gallery-managed .pw-core-brand-art-source-item {
  --pw-gallery-item-preview-width: var(--pw-gallery-item-medium-width, var(--pw-gallery-preview-width));
}
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-art-gallery-preview,
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-convention-art-gallery-item,
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-civilization-art-gallery-item,
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-system-art-gallery-item,
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-core-art-gallery-item,
html.pw-art-gallery-size-large .pw-art-gallery-managed .pw-core-brand-art-source-item {
  --pw-gallery-item-preview-width: var(--pw-gallery-item-large-width, var(--pw-gallery-preview-width));
}
.pw-art-gallery-managed .pw-art-gallery-preview,
.pw-art-gallery-managed .pw-convention-art-gallery-item,
.pw-art-gallery-managed .pw-civilization-art-gallery-item,
.pw-art-gallery-managed .pw-system-art-gallery-item,
.pw-art-gallery-managed .pw-core-art-gallery-item {
  position: relative;
  flex: 0 0 min(100%, var(--pw-gallery-item-preview-width, var(--pw-gallery-preview-width)));
  width: min(100%, var(--pw-gallery-item-preview-width, var(--pw-gallery-preview-width)));
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: inherit;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,40,74,.16);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(3,18,38,.08);
  line-height: 0;
  text-decoration: none;
}
.pw-art-gallery-managed .pw-core-brand-art-source-item {
  flex: 0 0 min(100%, var(--pw-gallery-item-preview-width, var(--pw-gallery-preview-width)));
  width: min(100%, var(--pw-gallery-item-preview-width, var(--pw-gallery-preview-width)));
  min-width: 0;
}
button.pw-art-gallery-preview {
  appearance: none;
  font: inherit;
  cursor: pointer;
}
.pw-art-gallery-managed .pw-art-gallery-preview img,
.pw-art-gallery-managed .pw-convention-art-gallery-image,
.pw-art-gallery-managed .pw-civilization-art-gallery-image,
.pw-art-gallery-managed .pw-system-art-gallery-image,
.pw-art-gallery-managed .pw-core-art-gallery-image {
  display: block;
  width: auto;
  max-width: none;
  height: var(--pw-gallery-preview-height);
  max-height: none;
  margin: 0;
  object-fit: contain;
  background: transparent;
}
.pw-art-gallery-managed .pw-art-gallery-preview:hover,
.pw-art-gallery-managed .pw-art-gallery-preview:focus-visible,
.pw-art-gallery-managed .pw-convention-art-gallery-item:hover,
.pw-art-gallery-managed .pw-convention-art-gallery-item:focus-visible,
.pw-art-gallery-managed .pw-civilization-art-gallery-item:hover,
.pw-art-gallery-managed .pw-civilization-art-gallery-item:focus-visible,
.pw-art-gallery-managed .pw-system-art-gallery-item:hover,
.pw-art-gallery-managed .pw-system-art-gallery-item:focus-visible,
.pw-art-gallery-managed .pw-core-art-gallery-item:hover,
.pw-art-gallery-managed .pw-core-art-gallery-item:focus-visible {
  border-color: rgba(214,155,45,.8);
  box-shadow: 0 9px 24px rgba(3,18,38,.13);
}

/* Art Gallery previews are artwork-only sitewide. Descriptive text remains
   available to the lightbox through data-pw-lightbox-caption/alt metadata,
   but no caption or figcaption is rendered beneath preview artwork. */
[data-pw-art-gallery] figcaption,
.pw-core-art-gallery figcaption,
.pw-video-art-slideshow figcaption,
.pw-system-art-gallery figcaption,
.pw-convention-art-gallery figcaption,
.pw-civilization-art-gallery figcaption,
.pw-park-design-art-gallery figcaption,
.pw-art-gallery-managed figcaption,
.pw-video-art-slide-caption,
.pw-park-design-art-caption {
  display: none !important;
}

/* The Park Design gallery currently has one featured artwork rather than a
   wrapping grid. It still shares the same saved preview-size preference. */
.pw-park-design-art-gallery.pw-art-gallery-managed .pw-park-design-featured-art-link {
  width: min(100%, var(--pw-gallery-preview-width));
  margin-left: 0;
  margin-right: auto;
  padding: 8px;
}
.pw-park-design-art-gallery.pw-art-gallery-managed .pw-park-design-featured-art-image {
  width: auto;
  max-width: 100%;
  max-height: var(--pw-gallery-preview-max-height);
  margin: 0;
}
.pw-park-design-art-gallery.pw-art-gallery-managed .pw-park-design-art-caption {
  width: min(100%, var(--pw-gallery-preview-width));
  margin: 10px 0 0 !important;
}

/* Video-page Art Gallery keeps its established slideshow mechanics while its
   visible preview shares the same sitewide size preference and left edge. */
.pw-video-art-slideshow.pw-art-gallery-managed .pw-video-art-slideshow-stage {
  width: 100%;
}
.pw-video-art-slideshow.pw-art-gallery-managed .pw-video-art-slide {
  width: min(100%, var(--pw-gallery-preview-width));
  margin-left: 0;
  margin-right: auto;
}
.pw-video-art-slideshow.pw-art-gallery-managed .pw-video-art-slideshow-link {
  justify-content: flex-start;
  width: 100%;
}
.pw-video-art-slideshow.pw-art-gallery-managed .pw-video-art-slideshow-image {
  width: auto;
  max-width: 100%;
  max-height: var(--pw-gallery-preview-max-height);
  margin: 0;
}
.pw-video-art-slideshow.pw-art-gallery-managed .pw-video-art-slideshow-controls {
  justify-content: flex-start;
  width: min(100%, var(--pw-gallery-preview-width));
}

.pw-art-gallery-video-preview {
  position: relative;
}
.pw-art-gallery-video-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--pw-white);
  background: rgba(1,25,58,.9);
  border: 2px solid var(--pw-gold);
  border-radius: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.pw-art-gallery-video-badge__play {
  color: var(--pw-gold-light);
  font-size: 1em;
}


/* -------------------------------------------------------------------------
 * Sitewide search — 1.0.4
 * Visible in the header, following the Park Worlds search-field pattern.
 * ---------------------------------------------------------------------- */
.sos-header-search {
  width: min(490px, 100%);
  min-width: 120px;
  max-width: 490px;
  margin: 0;
  justify-self: center;
}
.sos-header-search-control {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(178,122,16,.48);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(6,26,53,.05);
}
.sos-header-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 9px 11px;
  color: var(--sos-ink);
  background: #fff;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: .9rem;
  line-height: 1.25;
  outline: 0;
}
.sos-header-search input[type="search"]::placeholder {
  color: #667381;
  opacity: 1;
}
.sos-header-search button {
  flex: 0 0 42px;
  width: 42px;
  padding: 0;
  color: #fff;
  background: #168fe1;
  border: 0;
  border-left: 1px solid rgba(6,26,53,.2);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.sos-header-search button:hover,
.sos-header-search button:focus-visible {
  color: #fff;
  background: #0b69a8;
  outline: none;
}
.sos-header-search-control:focus-within {
  outline: 2px solid rgba(36,168,255,.42);
  outline-offset: 2px;
}

.sos-search-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
}
.sos-search-label {
  flex: 1 1 auto;
  min-width: 0;
}
.sos-search-field {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  color: var(--sos-ink);
  background: #fff;
  border: 1px solid rgba(6,26,53,.3);
  border-radius: 6px;
  font: inherit;
}
.sos-search-field:focus {
  border-color: #168fe1;
  outline: 2px solid rgba(36,168,255,.24);
  outline-offset: 1px;
}
.sos-search-submit {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 15px;
  color: #fff;
  background: var(--sos-navy);
  border: 1px solid var(--sos-navy);
  border-radius: 6px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.sos-search-submit:hover,
.sos-search-submit:focus-visible {
  background: #0b69a8;
  border-color: #0b69a8;
  outline: none;
}

.sos-search-results-header { margin-bottom: 30px; }
.sos-search-results-header .page-title { margin-bottom: 24px; }
.sos-search-results-header .sos-search-form,
.sos-search-empty .sos-search-form { max-width: 620px; }
.sos-search-summary,
.sos-search-correction,
.sos-search-corrected-note { margin: 12px 0; }
.sos-search-correction { font-weight: 700; }
.sos-search-results-list {
  display: grid;
  gap: 20px;
  margin-top: 30px;
}
.sos-search-result-card {
  padding: 24px 26px;
  background: #fff;
  border: 1px solid rgba(6,26,53,.12);
  border-radius: 10px;
  box-shadow: 0 7px 22px rgba(6,26,53,.06);
}
.sos-search-result-card .entry-title {
  margin: 3px 0 10px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}
.sos-search-result-type {
  margin: 0;
  color: var(--sos-gold);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sos-search-result-excerpt { margin: 0; max-width: 68ch; }
.sos-search-empty {
  margin-top: 32px;
  padding: 28px;
  background: #fff;
  border: 1px solid rgba(6,26,53,.12);
  border-radius: 10px;
}





/* -------------------------------------------------------------------------
 * Park Worlds-style footer structure — 1.0.5
 * ---------------------------------------------------------------------- */
.site-footer {
  color: #dce5ef;
  background: var(--sos-navy-deep);
  border-top: 4px solid var(--sos-gold);
}
.footer-inner {
  width: 100%;
  margin: 0;
  padding: 40px 0 28px;
  text-align: left;
  font-size: .9rem;
}
.sos-footer-top {
  width: calc(100% - (2 * var(--sos-header-edge)));
  margin: 0 auto;
  display: grid;
  /* Same left/right outer edge as the desktop header. */
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
}
.sos-footer-main {
  grid-column: 1;
  justify-self: start;
  width: auto;
  min-width: 0;
  margin: 0;
}
.footer-brand {
  margin: 0 0 16px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 800;
}
.footer-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-navigation a {
  color: var(--sos-gold-light);
  font-size: 1.05rem;
  text-decoration: none;
}
.footer-navigation a:hover,
.footer-navigation a:focus-visible { color: #fff; }
.sos-footer-dashboard {
  grid-column: 2;
  justify-self: center;
  text-align: center;
}
.sos-footer-dashboard-link {
  display: inline-block;
  padding: 9px 15px;
  color: #fff;
  border: 1px solid rgba(242,210,125,.68);
  border-radius: 999px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
.sos-footer-dashboard-link:hover,
.sos-footer-dashboard-link:focus-visible {
  color: var(--sos-gold-light);
  border-color: var(--sos-gold-light);
}
.sos-footer-balance { grid-column: 3; }
.site-info {
  width: min(var(--sos-content), calc(100% - 40px));
  margin: 30px auto 0;
  padding-top: 18px;
  color: rgba(255,255,255,.66);
  border-top: 1px solid rgba(242,210,125,.22);
  text-align: center;
  font-size: .84rem;
}
@media (max-width: 820px) {
  .footer-inner { width: calc(100% - 40px); margin: 0 auto; }
  .sos-footer-top { width: 100%; margin: 0; grid-template-columns: 1fr; gap: 22px; }
  .sos-footer-main,
  .sos-footer-dashboard,
  .sos-footer-balance {
    grid-column: 1;
    justify-self: start;
    width: auto;
    min-width: 0;
    margin-right: 0;
  }
  .sos-footer-dashboard { text-align: left; }
  .sos-footer-balance { display: none; }
  .footer-navigation ul { display: block; }
  .footer-navigation li + li { margin-top: 7px; }
  .site-info { width: 100%; }
}


/* Catalogs hub and Signature Brand catalog-history pages — 1.0.12 */
.sos-catalogs-directory-list,
.sos-catalog-history-list {
  margin: 0;
  padding-left: 1.25rem;
}
.sos-catalogs-directory-list li,
.sos-catalog-history-list > li {
  margin: 0 0 12px;
}
.sos-catalogs-directory-list a,
.sos-catalog-history-title a {
  color: var(--sos-navy);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sos-catalog-history-title {
  margin: 0;
}
.sos-catalog-record-id {
  margin-left: .4em;
  color: #667381;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .78em;
  font-weight: 600;
}
.sos-catalog-history-meta {
  margin: 4px 0 0;
  color: #667381;
  font-size: .9rem;
}
