/*
Theme Name: PCG Galleries Child Theme
Template: pc-ex-theme-2022
Author: Providence College Web Services
Description: A child theme of 2022 PC External Theme, for PC Galleries.
Version: 0.9.9
*/
/**
 * === PCG GALLERIES CHILD THEME STYLESHEET ===
 *
 * Primary frontend CSS for the PC Galleries child theme. Extends parent pc-ex-theme-2022.
 *
 * Responsibilities:
 *   1. Design tokens (:root), @font-face, and parent layout overrides.
 *   2. Component styles — header/footer, archives, blocks, forms, navigation, homepage patterns.
 *   3. Cache busting — Theme Version header read by pcg_child_theme_version() in functions.php.
 *
 * Where loaded: Frontend via wp_enqueue_style in functions.php (child style after parent).
 * Editor typography tokens overlap with style-editor.css; block editor uses the editor sheet.
 *
 * Related files:
 *   style-editor.css              → Block editor–scoped subset of tokens and typography
 *   functions.php                 → Enqueue and pcg_child_theme_version()
 *   header.php, layers/pcg-footer.php, archive-*.php → Templates using classes defined here
 *   core/assets/js/main.js        → Toggled classes (.toggled-on) and the .sitewide-search dialog
 */
/* ----------------------------------------------------------------------------
 * Fonts
 * ------------------------------------------------------------------------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("core/assets/fonts/Space_Grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tobias";
  src: url("core/assets/fonts/TobiasVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Same-face override of the parent theme's Domine (fonts.css): same variable .ttf,
 * same descriptors, so nothing extra downloads — the only change is font-display
 * "swap" → "optional", which stops the wordmark flashing. Paired with the .ttf
 * preload in functions.php. Trade-off: on a slow load the ~102 KB file can miss
 * the ~100ms window and the wordmark stays in Georgia for that pageview. */
@font-face {
  font-family: "Domine";
  src: url("../pc-ex-theme-2022/core/assets/fonts/Domine/Domine-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-display: optional;
}

/* ----------------------------------------------------------------------------
 * CSS Variables
 * ------------------------------------------------------------------------- */
:root {
  /* Colors */
  --purple:     #7800E0;
  --orange:     #ff4100;
  --white:      #fff;
  --black:      #000;
  --light-gray: #999;
  /* Text colors */
  --color-text-default:var(--black);
  --color-text-highlight: var(--purple);
  --color-text-secondary: var(--orange);
  /* Fonts, Font Sizes*/
  --pcg-serif: "Tobias", Georgia, serif;
  --pcg-sans-serif: "Space Grotesk", sans-serif;
  --wp--preset--font-family--space-grotesk: var(--pcg-sans-serif);
  --wp--preset--font-family--tobias: var(--pcg-serif);
  --wp--preset--font-family--domine:"Domine", Georgia, "Times New Roman", Times, serif;
  /* Widths, Gaps, Margins */
  --pcg-max-site-width: 2250px;
  --min-gap:0.5rem;
  --sm-gap:1rem;
  --md-gap:2rem;
  --lg-gap:4rem;
  --xlg-gap:6rem;
  /* Radii, borders, icon slots (buttons, header/footer social, newsletter form) */
  --pcg-radius-button: 5px;
  --pcg-radius-field: 3px;
  --pcg-border-hairline: 1px;
  --pcg-border-button: 2px;
  --pcg-icon-nav-social: 25px;
  --pcg-icon-footer-social: 40px;
  --pcg-form-submit-min-width: 100px;
  --pcg-box-offset-shadow: 4px; /* button stacked "offset" shadow step */
  --pcg-outline-offset: 2px;
  /* Button shadows. Both keep five layers so they interpolate on hover; the
     colour resolves per-button from --button-border-color. */
  --button-border-color: black;
  --pcg-button-shadow-flat: var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0;
  accent-color: var(--orange); /* Accent color for forms, toggles, etc. */
}
/* ----------------------------------------------------------------------------
 * 00) Parent theme & layout overrides
 * ------------------------------------------------------------------------- */
/* Unset the default font (domine) */
body.page-template-tmpl-rebrand-home h5, body.page-template-tmpl-rebrand-home h6, body.page-template-tmpl-rebrand-home p, body.page-template-tmpl-rebrand-home ul li, body.page-template-tmpl-rebrand-home ol li, #primary p, #primary ul li, #primary ol li, .layer p, .layer ul li, .layer ol li {
    font-family: unset;
}
/* Change the padding above <main>.
 * !important: parent rebrand compiled CSS sets padding-top on the same selectors with its own !important. */
.content-area, #main.layer, #primary.layer.content-area, section.layer.masthead.no-pad {
  padding-top:var(--sm-gap) !important;
}
/* **Top padding defined above. Should not need this :has any longer.**
#primary.layer.content-area:has(.pcg-post-header) { 
  padding-top:var(--sm-gap) !important;
}*/
@media (max-width: 1099px) {
  .content-area, #main.layer, #primary.layer.content-area, section.layer.masthead.no-pad {
    padding-top:var(--min-gap) !important;
  }
  .home #main.layer {
    margin-top: 0;
    padding-top:8% !important;
  }
}
/* This constrains single post width. This theme is leveraging grid to do it differently. */
body.single-post #primary > .inner {
  max-width: unset;
  width: unset;
}
.site-main {
  padding-top:0;
  overflow: visible;
}
body.single-post {
  padding-bottom: 0;
}
/* Bump the emergency banner up when it's displayed */
header#siteHeader:has(#emergency_banner) {
  margin-top:0;
}
#emergency_banner {  
  margin-bottom:var(--md-gap);
}
/* ----------------------------------------------------------------------------
 * 01) Global Base
 * ------------------------------------------------------------------------- */
html {
  /* Parent sets this for its sticky header; this child theme has none. */
  --pc-header-height: 0;
  background-color: var(--pcg-bg-white);
  font-size:1.125em;
  scrollbar-gutter: stable;
}
body {
  font-family: var(--pcg-sans-serif);
  color:var(--color-text-default);
  overflow-wrap: break-word;
  height: 100%; /* Without this, the parent theme footer won't "stick" to the bottom of the viewport. */
}
.wp-singular main {
  font-size:1.3334em;
}
#main {
  margin-bottom: var(--xlg-gap);
}
p {
  margin:0 0 1rem;
}
input::placeholder {
  color:var(--black);
}
/* 01b) Child-scoped typography & links (body class via :where()).
 * Heading default = PCG serif, weight 200. !important on both: parent rebrand compiled CSS
 * targets headings with its own !important font-family/weight; child wrapping in :where()
 * keeps specificity low, so !important is what actually wins. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) h1.post-title,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary h1.post-title,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) :is(h1, h2, h3, h4, h5, h6),
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--pcg-serif) !important; /* beats parent rebrand compiled CSS */
  font-weight: 200 !important; /* beats parent rebrand heading weight */
}
/* Rendered px below are at the real 18px root (html is 1.125em — see 01) Global
 * Base), not the 16px browser default. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) h2 {
  font-size: clamp(1.495rem, 1.309rem + 0.935vw, 2.056rem);   /* ~27px → 37px */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) h3 {
  font-size: clamp(1.138rem, 1.027rem + 0.54vw, 1.463rem); /* ~21px → 26px */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) ul li:before {
  display: none;
}
a img:hover {
  opacity:0.8;
}
/* Links — everywhere except header, nav area, and parent theme footer. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:not( .pcg-sticky-footer-wrapper *, header.primary *, .menu-container *, .button, .pcg-button, .wp-block-post-title a ) {
  background-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--orange);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:hover:not( .pcg-sticky-footer-wrapper *, header.primary *, .menu-container *, .button, .pcg-button ) {
  color:var(--purple);
  text-decoration-color: transparent;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:not([href]):not([class]), 
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:active,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:focus {
  outline:0;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) a:focus-visible {
  outline: 2px dotted var(--orange);
}
.entry-content ul, .entry-content ol {
  list-style: unset;
}
/* ----------------------------------------------------------------------------
 * 02) Shared Components: Buttons + PAL
 * ------------------------------------------------------------------------- */
/* Unset core styles for "read more" buttons */
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-post-excerpt__more-link {
  all: unset;
  cursor: pointer;
}
a.pcg-button,
button.pcg-button,
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-post-excerpt__more-link {
  --button-border-color:var(--black);
  display: inline-block;
  width: fit-content;
  font-family: var(--pcg-sans-serif);
  font-weight: 500;
  font-size:1em;
  letter-spacing: 0.04em;
  color:var(--white);
  text-decoration: none;
  text-align: center;
  padding: var(--min-gap) var(--sm-gap);
  background-color: var(--purple);
  border: var(--pcg-border-button) solid var(--button-border-color);
  border-radius: var(--pcg-radius-button);
  appearance: button;
  box-shadow: var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) var(--pcg-box-offset-shadow) var(--pcg-box-offset-shadow) 0 0;;
  transition:
    color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin:0 var(--sm-gap) var(--sm-gap) 0;
}
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-post-excerpt__more-link { /* Core read-more link*/
  margin-top: var(--sm-gap);
  font-size: 1em;
  display: block;
}
a.pcg-button.button-transparent-bg,
button.pcg-button.button-transparent-bg,
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-post-excerpt__more-link {
  --button-border-color:var(--purple);
  background-color: transparent;
  color:var(--purple);
}
a.pcg-button:hover,
button.pcg-button:hover,
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-post-excerpt__more-link:hover {
  --button-border-color:var(--orange);
  background-color: var(--orange);
  box-shadow: var(--pcg-button-shadow-flat);
}
/* .collaborations-query-block is the retained wrapper class for the
   "PCG Featured Content — Rows" variation — the slug and classes were kept when
   the variation was renamed, because they live in saved post_content. */
a.pcg-button.button-transparent-bg:hover,
button.pcg-button.button-transparent-bg:hover,
.collaborations-query-block .wp-block-post-excerpt__more-link:hover {
  --button-border-color:var(--orange);
  background-color: transparent;
  color:var(--orange);
}
/* These rules are duplicated in the pcg-button block stylesheet
   (plugins/pcgalleries-custom-blocks/blocks/pcg-button/style.css) and the two must
   be kept in sync. The duplication is deliberate: block.json declares the block's
   style with "style": [ "file:./style.css" ], so WordPress only enqueues it on
   pages where a pcg-button block actually renders. The theme also applies
   .pcg-button.button-cta to markup that is not the block at all — nav menu items
   (functions.php) and archive links (template-parts/dated-archive-sections.php) —
   which appear on pages with no block on them. Without a copy here, those fall
   back to the base .pcg-button purple button and lose the underline/arrow. */
a.pcg-button.button-cta,
button.pcg-button.button-cta {
  --button-border-color: transparent;
  box-shadow: var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) 0 0 0 0, var(--button-border-color) var(--pcg-box-offset-shadow) var(--pcg-box-offset-shadow) 0 0;;
  --arrow-color:var(--purple);
  --arrow-width: 12px; /* fixed px so the arrowhead is the same size on any label length */
  --arrow-height: 10px;
  --arrow-bar: var(--pcg-border-button, 2px);
  text-transform: uppercase;
  color:var(--black);
  font-size: 1em;
  letter-spacing: unset;
  line-height: 1.2;
  font-weight: 400;
  border:0;
  background-color: transparent;
  position: relative;
  border-radius: 0;
  padding: 0 calc(var(--arrow-width) + 2px) 1px 0;
}
a.pcg-button.button-cta:after,
button.pcg-button.button-cta:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--arrow-height) / -2);
  height: var(--arrow-height);
  background-color: var(--arrow-color);
  /* Underline and arrowhead are one filled shape, so they cannot drift out of
     alignment the way a border-bottom plus a border-triangle pseudo-element did. */
  clip-path: polygon(
    0 calc(50% - var(--arrow-bar) / 2),
    calc(100% - var(--arrow-width)) calc(50% - var(--arrow-bar) / 2),
    calc(100% - var(--arrow-width)) 0,
    100% 50%,
    calc(100% - var(--arrow-width)) 100%,
    calc(100% - var(--arrow-width)) calc(50% + var(--arrow-bar) / 2),
    0 calc(50% + var(--arrow-bar) / 2)
  );
  transition: background-color 0.2s ease, right 0.2s ease;
}
/* Left edge stays pinned under the label; widening the box grows the arrow rightward. */
a.pcg-button.button-cta:hover:after,
button.pcg-button.button-cta:hover:after {
  right: -5px;
}
/* Must re-assert transparency: the generic a.pcg-button:hover rule above ties
   with .button-cta on specificity, so only this hover selector reliably wins. */
a.pcg-button.button-cta:hover,
button.pcg-button.button-cta:hover {
  --button-border-color: transparent;
  --arrow-color:var(--orange);
  background-color: transparent;
}
a.pcg-pal {
  font-size:1.5em;
  display:inline-block;
  position: relative;
}
a.pcg-pal:before {
  content:'\2192';
  display: inline-block;
  padding:0 4px 0 0;
  position: relative;
  top: -1px;
}
.pcg-search-social-pal .pcg-pal:has(.pcg-pal-hover),
header .pcg-pal:has(.pcg-pal-hover) {
  cursor: pointer;
  margin:0;
}
/* The hover action on the header.primary PAL button (desktop instance only;
 * the mobile copy lives in .site-header-menu, not header.primary). */
header.primary .pcg-pal .pcg-pal-hover {
  display: none;
  position: fixed;
  font-style: italic;
  font-size: 20px;
  font-weight: bold;
  color: var(--orange);
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal; 
}
.pcg-pal-hover:before {
  content:'\2192';
  display: inline-block;
  padding:0 4px 0 0;
  font-size: 1.4em;
  top: 2px;
  position: relative;
}
header.primary .pcg-pal:hover .pcg-pal-hover {
  display:block;
}
/* Keep the label screen-reader-only where the cursor-follow effect doesn't run:
 * the mobile hamburger menu always, and the desktop button with no JS (the
 * :hover label would otherwise sit at a fixed spot). These same two selectors
 * pick up the visually-hidden properties from .screen-reader-text in 14). */
.site-header-menu .pcg-pal-hover,
.no-js header.primary .pcg-pal .pcg-pal-hover {
  display:block;
}
/* ----------------------------------------------------------------------------
 * 03) Header: Topbar
 * ------------------------------------------------------------------------- */
.topbar {
  width:100%;
  max-width: 100%;
  margin:0;
  padding:var(--min-gap) var(--md-gap);
  background-color: var(--purple);
  text-align: center;
  color:var(--white);
  font-family: var(--pcg-sans-serif);
  font-size:1.25em;
  font-weight: 500;
}
.topbar *:last-child {
  margin-bottom:0;
  padding-bottom:0;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .topbar p a {
  text-decoration-color: var(--white);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .topbar p a:hover {
  color:var(--white);
  text-decoration-style: wavy;
  text-decoration-color: var(--white);
}
/* ----------------------------------------------------------------------------
 * 04) Header Layout Shell
 * ------------------------------------------------------------------------- */
body header.primary {
  background: var(--white);
  height: unset; 
}
header.primary {
  position: relative;
  margin:0 auto var(--md-gap);
}
@media (min-width: 360px) and (max-width: 1099px) {
  header.primary {
    display: flex;
    flex-direction: row-reverse;
    margin:var(--min-gap) auto 0;
  }
}
@media (min-width: 1100px) {
  header.primary {
    margin-top:var(--md-gap);
  }
}
body .rebrand-site-header > .inner {
  margin: 0 auto;
  padding:var(--md-gap) 0 var(--md-gap) var(--sm-gap);
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--md-gap) 0;
  align-items: end;
  /* Override Parent Styles*/
  min-height: unset;
  width: var(--pcg-max-site-width);
  max-width: 100%;
  justify-content: left;
}
@media (min-width: 1100px) {
  body .rebrand-site-header > .inner {
    padding:0 var(--md-gap);
    gap: clamp(1.7rem, 1.6vw, var(--md-gap));
    justify-content: center;
  }
  /* Flex items default to min-width:auto, which turns a tight fit into overflow
     instead of a shrink. Zeroing it lets each block compress; past that, .inner
     is flex-wrap:wrap, so the row breaks on its own. */
  body .rebrand-site-header > .inner > .pcg-logos-wrapper,
  body .rebrand-site-header > .inner > .pcg-hours-ctas,
  body .rebrand-site-header > .inner > .pcg-search-social-pal {
    min-width: 0;
  }
}
/* ----------------------------------------------------------------------------
 * 05) Header Branding: Torch, Logos, Wordmark
 * ------------------------------------------------------------------------- */
.pcg-logos-wrapper {
  --logo-wrapper-gap:0.5rem;
  flex:0 0 100%;
  --torch-width:45px;
  --logos-width:200px;
  --min-logo-width:170px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--logo-wrapper-gap);
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 760px) { /* Consider these the "default" values for torch, logomarks. */
  .pcg-logos-wrapper {
    --logo-wrapper-gap:0.5rem;
    --torch-width:55px;
    --logos-width:255px;
    --min-logo-width:200px;
    align-items: end;
  }
}
.pcg-logos-wrapper .pcg-torch {
  flex: 0 0 var(--torch-width);
  width: var(--torch-width);
  min-width: var(--torch-width);
  max-width: 100%;
  padding-right:0.3rem;
}
.pcg-torch a:hover svg {
  animation: pcg-flicker 0.2s infinite alternate-reverse;
}
.pcg-logos-wrapper .pcg-wordmark,
.pcg-logos-wrapper .pcg-logomarks {
  min-width: var(--min-logo-width);
  max-width: 100%;
}
.pcg-wordmark, .pcg-logomarks {
  flex: 0 0 calc(50% - var(--torch-width) - var(--sm-gap));
}
@media (min-width: 760px) {
  .pcg-logos-wrapper .pcg-wordmark,
  .pcg-logos-wrapper .pcg-logomarks {
    width: var(--logos-width);
    max-width: var(--logos-width);
  }
}
@media (min-width: 1100px) {
  .pcg-logos-wrapper {
    /* Fluid from here up, so branding gives ground gradually instead of claiming
       a full row. The 760-1099 values above are the stacked layout — left alone. */
    /*--logo-wrapper-gap:clamp(1rem, 1.6vw, var(--md-gap));*/
    --torch-width:clamp(45px, 3.5vw, 55px);
    --logos-width:clamp(195px, 15vw, 255px);
    --min-logo-width:clamp(160px, 12vw, 200px);
    /* Size to content and allow shrink (flex:0 0 100% pushed hours + CTAs onto a
       second line below 1600px). width:auto is required: with flex-basis:auto the
       width:100% above would become the basis. */
    flex:0 1 auto;
    width: auto;
  }
  .pcg-logos-wrapper .pcg-logomarks {
    flex: 0 0 var(--logos-width);
  }
  .pcg-logos-wrapper .pcg-wordmark {
    flex:0 1 auto;
    width: auto;
  }
}
/* Two-row fallback: below ~1259px flex breaks the three header blocks 2+1
 * (search/PAL wrapping alone), so giving branding the full row forces the
 * intended 1+2 split. 1258px is MEASURED, not a design breakpoint — it tracks
 * the hours font-size clamp above and the ACF hours strings
 * (template-parts/hours-header.php), so re-measure if either changes. Must stay
 * after the min-width:1100px block to win. */
@media (min-width: 1100px) and (max-width: 1258px) {
  .pcg-logos-wrapper {
    flex:0 0 100%;
    width: 100%;
  }
}
@media (min-width: 1600px) {
  .pcg-logos-wrapper {
    flex:0 0 calc( var(--torch-width) + (2 * var(--logos-width)) + (2* var(--logo-wrapper-gap)) );
  }
}
.pcg-logomarks .logo-fill {
    fill:var(--purple);
}
.pcg-logomarks .logo-fill-none {
    fill: none;
}
.pcg-logos-wrapper svg path {
  fill:var(--purple);
}
.pcg-torch svg path {
  fill:var(--black);
}
.pcg-logos-wrapper a:hover {
  color:var(--orange);
}
.pcg-logos-wrapper a:hover svg path {
  fill:var(--orange);
}
.pcg-wordmark {
  flex-grow: 1;
}
.pcg-wordmark a {
  display: flex;
  flex-direction: column;
  margin:0 auto;
  color:var(--color-text-highlight);
  text-decoration: none;
  font-family:var(--pcg-serif);
  font-size: 1.7em;
  font-weight: 300;
  line-height: 1;
  text-align: center;
}
@media (min-width: 760px) {
  .pcg-wordmark {
    flex-grow: 0;
  }
  .pcg-wordmark a {
    display: block;
    font-size: 2em;
  }
}
@media (min-width: 1100px) {
  /* Fluid wordmark, replacing the 1600-1705px step-down patch. The floor matches
     the sub-760px size, so "Providence / College / Galleries" never sets a wider
     min-content floor than the branding block can afford. */
  .pcg-wordmark a {
    font-size: clamp(1.7rem, 1.35vw + 0.5rem, 2rem);
  }
}
.pcg-wordmark span {
  display: block;
  width: fit-content;
  break-inside: avoid;
  margin:0 auto;
}
.pcg-wordmark span:last-child {
  font-family: var(--pcg-sans-serif);
  font-weight: 350;
}
.pcg-logomarks--link {
  /* Grid stacks all 5 logos in one cell so the height is reserved from first
     paint, before JS picks one; toggling visibility (not display) below keeps
     that space constant, so revealing the chosen logo shifts nothing. */
  display: grid;
}
.pcg-logomarks--link svg {
  grid-area: 1 / 1; /* overlap every logo in the same cell */
  max-width: var(--logos-width);
  margin: 0 auto; /* center within the cell */
  visibility: hidden; /* present (holds space) but invisible until chosen */
}
/* The head script (pcg_logomark_picker in functions.php) sets data-pcg-logo on
   <html> before first paint; reveal the matching stacked SVG. Keep the number of
   rules here in sync with the number of SVGs in layers/logomarks.php. */
html[data-pcg-logo="1"] .pcg-logomarks--link svg:nth-of-type(1),
html[data-pcg-logo="2"] .pcg-logomarks--link svg:nth-of-type(2),
html[data-pcg-logo="3"] .pcg-logomarks--link svg:nth-of-type(3),
html[data-pcg-logo="4"] .pcg-logomarks--link svg:nth-of-type(4),
html[data-pcg-logo="5"] .pcg-logomarks--link svg:nth-of-type(5) {
  visibility: visible;
}
/* ----------------------------------------------------------------------------
 * 06) Header CTAs: Locations + Hours
 * ------------------------------------------------------------------------- */
.pcg-hours-ctas {
  --hours-cta-vertical-gap: var(--md-gap);
  --hours-cta-horizontal-gap: var(--lg-gap);
  display: none;
  grid-template-columns: 1fr;
  gap: var(--hours-cta-vertical-gap) var(--hours-cta-horizontal-gap);
  max-width: 100%;
  align-self: center;
  align-items: end;
  justify-content: center;
}
@media (max-width: 1099px) {
  .site-header-menu .pcg-hours-ctas {
    border-top:1px solid var(--light-gray);
    display: grid;
    align-self: flex-start;
    padding:var(--md-gap) 5px;
    width: 100%;
  }
}  
@media (min-width: 1100px) {
  .pcg-hours-ctas {
    /* Fluid so the widest block in the header (two hours columns + the secondary
       nav) compresses with the viewport instead of pinning a hard floor. */
    --min-col-width:clamp(100px, 9vw, 165px);
    --hours-cta-horizontal-gap: clamp(1.25rem, 2.4vw, var(--lg-gap));
    display: grid;
    grid-template-columns: repeat( 2, minmax(var(--min-col-width), auto) );
    max-width: 100%;
    justify-items: center;
    flex-grow:0;
    margin-left: unset;
  }
  .site-header-menu .pcg-hours-ctas {
    display: none;
  }
}
@media (min-width: 1600px) {
  /* .inner is flex-wrap:wrap at every width now; the row breaks when the content
     stops fitting rather than at this breakpoint. */
  .pcg-hours-ctas {
    justify-content: space-evenly;
    flex-grow:1;
  }
}
.pcg-hours-ctas > * {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap:var(--sm-gap);
}
/* Header Gallery Hours */
.galleryHours--header.pcg-hours-default {
  display: flex;
  flex-direction: row;
  gap: var(--md-gap);
  font-size: 1em;
}
@media (min-width: 1100px) {
  /* Desktop header only — the base values above serve the slide-out mobile menu,
     which has no width pressure. Location names ("Smith Center for the Arts")
     are the header's widest strings, so this is the biggest lever on the break. */
  .galleryHours--header.pcg-hours-default {
    gap: clamp(1rem, 1.8vw, var(--md-gap));
    font-size: clamp(0.9rem, 0.55vw + 0.45rem, 1rem);
  }
}
@media (min-width: 1700px) {
  .galleryHours--header.pcg-hours-default {
    gap:var(--lg-gap);
  }
}
.galleryHours--header.pcg-hours-default div p:last-child {
  margin-bottom: 0;
}
/* Header Secondary Nav Menu ('header-menu-small) */
ul.secondary-nav--menu {
  list-style: none;
  padding:0;
  margin:0;
}
ul.secondary-nav--menu li {
  display: block;
  padding: 0 0 var(--min-gap);
}
ul.secondary-nav--menu li:last-child {
  padding-bottom: 0;
}
ul.secondary-nav--menu a.pcg-button.button-cta {
  margin:0;
  font-size:1.1em;
}
/* ----------------------------------------------------------------------------
 * 07) Header Utility Area: Search + Social + Mobile Menu Wrapper
 * ------------------------------------------------------------------------- */
header.primary .pcg-search-social-pal {
  display: none;
}
@media (min-width: 1100px) {
  header.primary .pcg-search-social-pal {
    flex:0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin-left: unset;
    margin-right: unset;
  }
  /* The parent pins .pc-menu-wrap to 180px; our column needs ~122px (the PAL
     button), so ~58px is dead width in the tightest part of the header budget.
     The 5-class selector is deliberate: the parent rule has 4, so anything
     shorter silently loses. */
  header.primary.rebrand-site-header .flex-box.three-column > .pcg-social-menu {
    width: fit-content;
  }
  .site-header-menu .pcg-search-social-pal {
    display: none;
  }
}
header.primary .pcg-search-social-pal .pcg-social-menu,
.site-header-menu .pcg-search-social-pal .pcg-social-menu {
  align-self: center;
  align-items:center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap) 0;
}
.site-header-menu .pcg-search-social-pal .pcg-social-menu {
  align-items: flex-start;
  padding:0 5px;
}
.pcg-social-menu .pcg-search-wrap,
.pcg-mobile-menu .pcg-search-wrap,
.pcg-mobile-menu .rebrand-menu-wrap {
  flex: 0 0 auto;
}
.rebrand-site-header .flex-box.three-column > .pc-menu-wrap .rebrand-search-wrap {
  flex-shrink: 1;
  position: relative;
  right: unset;
  top: unset;
  height: auto;
  width: fit-content;
}
@media (max-width: 1099px) {
  .rebrand-site-header .flex-box.three-column > .rebrand-main-logo-wrap, .rebrand-site-header .flex-box.three-column > .pc-menu-wrap {
      height: auto;
      width: unset;
  }
}
.pcg-search-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  height: 28px;
  padding: 0;
  width: 28px;
  z-index: 5;
}
.rebrand-site-header .flex-box.three-column > .pc-menu-wrap .rebrand-search-wrap:after {
  display: none;
}
/* Sitewide search form and container.
   A native <dialog> opened with showModal(): the UA centres it via its default
   margin:auto and puts it in the top layer, so no positioning or z-index here. */
.sitewide-search {
  width: min(680px, 92vw);
  max-width: 100%;
  background-color: var(--purple);
  color:var(--white);
  padding:var(--md-gap);
  border: 0;
  display: none;
  opacity: 0;
  flex-direction: column;
  flex-wrap: wrap;
  gap:var(--md-gap);
  align-items: center;
  justify-content: center;
  /* `overlay` must transition too, or the dialog leaves the top layer instantly
     on close and the fade-out never plays. */
  transition: opacity .3s ease, display .3s ease allow-discrete, overlay .3s ease allow-discrete;
}
.sitewide-search[open] {
  display: flex;
  opacity: 1;
}
.sitewide-search::backdrop {
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease, display .3s ease allow-discrete, overlay .3s ease allow-discrete;
}
.sitewide-search[open]::backdrop {
  opacity: 1;
}
/* Starting state for the open transition. Because the element animates up from
   display:none, the fade-in only plays if its initial opacity is set. */
@starting-style {
  .sitewide-search[open],
  .sitewide-search[open]::backdrop {
    opacity: 0;
  }
}
.sitewide-search button.search-close {
  order: -1;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  margin:-4px 0 0 var(--min-gap);
  padding: 2px;
  svg {
    height: 35px;
    width: 35px;
    vertical-align: middle;
  }
}
@media (min-width: 500px) {
  .sitewide-search button.search-close {
    position: absolute;
    inset: 1.25rem 1rem auto auto; /* top right */
  }
}
.sitewide-search button.search-close:hover {
  background-color: var(--white);
  svg {
    fill:var(--purple);
  }
}
.sitewide-search h3 {
  margin: 0;
  font-size: 1.3rem;
  text-box-trim: trim-both;
}
.sitewide-search .search-form {
  border-radius: 0;
  width: 360px;
  max-width: 100%;
}
.sitewide-search input.search-field {
  width: 100%;
  max-width: 100%;
  padding:0.3rem 0.5rem;
  font-family: var(--pcg-sans-serif);
}
.sitewide-search input.search-submit {
    display: none;
}
.nav-icons ul, 
.pcg-footer-social-list {
  list-style: none;
  margin:0;
  padding:0;
  width: fit-content;
  border-bottom: var(--pcg-border-hairline) solid var(--purple);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:var(--sm-gap);
}
.nav-icons li,
.pcg-footer-social-list li
{
  width: var(--pcg-icon-nav-social);
}
.nav-icons li:last-child,
.pcg-footer-social-list li:last-child {
  padding-bottom: 0;
}
.nav-icons li:before,
.pcg-footer-social-list li:before {
  content: '';
  display: none;
}
.nav-icons svg,
.pcg-footer-social-list svg {
  fill:var(--purple);
}
.nav-icons li:hover svg,
.pcg-footer-social-list li:hover svg {
  fill: var(--orange);
}
.rebrand-site-header .flex-box.three-column > .pc-menu-wrap .rebrand-menu-wrap .lines-wrap > span {
  /* Hamburger Menu */
  height: 3px;
  width: 35px;
  background: var(--purple);
}
input.menu-check:hover ~ .rebrand-mobile-menu .lines-wrap > span {
  background: var(--orange) !important; /* beats parent rebrand mobile menu line color */
}
/* Override Parent Styles */
.primary-nav-wrapper .inner nav.pcg-primary-nav {
  position: relative;
  bottom: unset;
}
.rebrand-site-header .flex-box.three-column > .pc-menu-wrap .rebrand-menu-wrap {
  position: relative;
  top:unset;
  right:unset;
}
/* ----------------------------------------------------------------------------
 * 08) Navigation (PCG Custom Menu) (mobile menu breakpoint = 1099/1100px)
 * ------------------------------------------------------------------------- */
/* Base typography + controls */
/* Single size lever for the whole nav: every font-size below this point is em-based,
 * so this one value scales all of it — desktop bar and mobile overlay alike. Reduce
 * here, never in the descendants, or the ratios compound. */
.main-navigation {
  width: 100%;
  font-family: var(--pcg-serif);
  font-weight: 400;
  font-size:1.485em;
}
.menu-open-container {
  display: flex;
  flex-direction: column;
}
.pcg-menu-icon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  place-items: end;
  padding: 0;
}
@media (max-width: 359px) {
  .pcg-menu-icon {
    flex-direction: row;
    justify-content: center;
    gap:var(--min-gap);
  }
}
/* Hamburger → X: the three strokes share one dash length and animate by
   redrawing the dash pattern. stroke-width is set once, on .line. */
.pcg-menu-icon .line {
  fill: none;
  stroke: var(--black);
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pcg-menu-icon .line1,
.pcg-menu-icon .line3 {
  stroke-dasharray: 80 207;
}
.pcg-menu-icon .line2 {
  stroke-dasharray: 80 60;
}
.pcg-menu-icon.toggled-on .line1,
.pcg-menu-icon.toggled-on .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -154;
}
.pcg-menu-icon.toggled-on .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -50;
}
.pcg-menu-icon .menu-text {
  font-family: var(--pcg-sans-serif);
  font-size: 1em;
  text-align: center;
  align-self: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: -0.5rem;
  vertical-align: middle;
}
.menu-opener .pcg-menu-icon .menu-text {
  margin: 0;
  width: max-content;
  max-width: 100%;
  font-size: 84%;
}
.menu-button.close-nav {
  margin-left:auto;
}
.pcg-menu-icon.toggled-on + span {
  display: none;
}
button.dropdown-toggle,
button.menu-button {
  display: inline;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  content: "";
}
button.dropdown-toggle {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 15px;
  margin-left: 15px;
  padding: 0 4px 0 0;
}
.menu-button.menu-opener {
  margin: 1.4rem 0 0;
  display: block;
}
.dropdown-toggle:after,
.dropdown-toggle.toggled-on:after {
  font-size: 1.1em;
}
.main-navigation a:focus-visible,
button.dropdown-toggle:focus-visible,
button.menu-button:focus-visible {
  outline: var(--pcg-border-hairline) solid var(--black);
  outline-offset: var(--pcg-outline-offset);
}
/* Plus symbol to expand sub-menu on mobile */
.dropdown-toggle:after {
  content: "+";
}
/* Minus symbol to collapse sub-menu on mobile */
.dropdown-toggle.toggled-on:after {
  content: "\2212";
}
/* Base menu layout + state */
.menu-container:after {
  display: table;
  clear: both;
  content: "";
}
.site-header-menu {
  display: none;
  clear: both;
}
.main-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: 0.025em;
}
.main-navigation ul :before {
  content:'';
  display: none;
}
.main-navigation ul li {
  margin-right: 40px;
  margin-bottom: 10px;
  min-height: 30px;
}
.main-navigation ul li.current-menu-item > a {
  font-style: oblique;
}
@media (min-width: 1100px) {
  .main-navigation ul li:last-child {
    margin-right: 0;
  }
}
.main-navigation ul a {
  border: none;
  position: relative;
  padding: 0 5px;
  text-decoration: none;
  border-bottom: 2px dotted transparent;
}
.main-navigation ul ul {
  display: none;
  margin-top: 0px;
  margin-left: 0;
  line-height: 1.1;
}
.main-navigation ul ul li a {
  font-size: 0.9em;
  text-transform: none;
  padding: 0;
  margin-bottom: 10px;
  border-bottom: solid 4px transparent;
  padding-bottom: 2px;
  color: var(--color-text-default);
}
.main-navigation ul ul li:last-child {
  padding-bottom: 0;
}
.main-navigation ul ul li:last-child a {
  margin-bottom: 0;
}
.main-navigation ul ul ul {
  display: none;
  margin-left: 25px;
}
/* State modifiers (no-js / toggled). The display value for these two selectors
   is set once, in "JS/no-JS fullscreen modal overrides" at the end of 08). */
.site-header-menu.toggled-on {
  padding: var(--min-gap);
  background-color: var(--white);
  min-height: 100vh;
  min-height: 100dvh; /* dynamic vh: excludes mobile URL bar so content isn't clipped (vh fallback above) */
}
.no-js .menu-button {
  display: none;
}
/* Mobile navigation layout */
@media (max-width: 1099px) {
  .menu-container {
    width: fit-content;
    max-width: 100%;
  }
  .menu-container > button {
    margin: 0.3rem 0;
  }
  .site-header-menu button:hover .line {
    stroke: var(--orange);
  }
  .site-header-menu a:hover {
    color:var(--orange);
  }
  .main-navigation ul .sub-menu.toggled-on {
    display: block;
    font-size: 0.85em;
  }
  .main-navigation ul li li {
    margin:var(--min-gap) 0 0 var(--md-gap);
    padding:0;
  }
}
/* Desktop navigation layout */
@media (min-width: 1100px) {
  .menu-button.menu-opener {
    margin: 0.3rem auto;
  }
  button.menu-button, button.menu-button.menu-opener {
    display: none;
  }
  .menu-container {
    width: var(--pcg-max-site-width);
    margin:0 auto;
    position: relative;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--min-gap);
    justify-content: center;
  }
  .site-header-menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-header-menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--bs-gutter-x) * 0.5);
    right: calc(var(--bs-gutter-x) * 0.5);
    max-width: 100%;
    height: 2px;
    background-color: #233244;
  }
  .main-navigation ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap:var(--md-gap);
    position: relative;
  }
  .main-navigation ul .sub-menu.toggled-on {
    display: block;
    border: var(--pcg-border-hairline) solid var(--black);
    margin: var(--min-gap) 0;
    border-radius: 0 0 15px 0;
  }
  .main-navigation > ul > li {
    margin: 0;
    padding: 0 var(--sm-gap) var(--min-gap);
    min-height: 0px;
    border-top: var(--pcg-border-button) solid transparent;
  }
  .main-navigation > ul > li:hover {
    border-top-color: var(--orange);
  }
  .main-navigation ul ul {
    position: absolute;
    width: fit-content;
    display: none;
    top: 100%;
    left: 0;
    padding: 0;
    z-index: 999;
    background: #fefefe;
    padding: var(--sm-gap) var(--md-gap) var(--min-gap);
    min-width: 230px;
  }
  .main-navigation ul ul li {
    float: none;
    padding: 0;
    letter-spacing: 1px;
  }
  .main-navigation ul ul li a {
    color: var(--black);
    font-size:0.65em;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
  }
  .main-navigation ul ul li a:hover {
    text-decoration-color: var(--orange);
  }
  .main-navigation ul .has-sub-menu > li {
    padding-right: 40px;
  }
  .main-navigation ul ul ul {
    top: -1px;
    left: 100%;
    margin-left: 0;
    margin-top: -5px;
  }
  ul.sub-menu .dropdown-toggle {
    position: absolute;
    right: 10px;
    top: 4px;
  }
  /* Arrow down */
  .main-navigation {
    --caret-position: translate(-13px, -1px);
    --caret-position-hover: translate(-13px, 1px);
    --caret-size: 0.7em;
    --caret-color: var(--orange);
  }
  .main-navigation ul .dropdown-toggle {
    transform: var(--caret-position);
  }
  .main-navigation ul .dropdown-toggle:after {
    content:"\25BC";
    font-size: var(--caret-size);
    color: var(--caret-color);
    display: inline-block;
    line-height: 0.9;
  }
  .main-navigation ul li .dropdown-toggle:hover {
    transform: var(--caret-position-hover);
  }
  /* Arrow right */
  .main-navigation ul ul .dropdown-toggle:after {
    content: "\25B6";
    font-weight: 400;
    font-size: var(--caret-size); /* was 0.75rem, which neither scaled with the nav nor matched the ◀ below */
  }
  /* Arrow up */
  .main-navigation ul .dropdown-toggle.toggled-on:after {
    content: "\25B2";
    font-size: var(--caret-size);
    color: var(--caret-color);
  }
  /* Arrow left */
  .main-navigation ul ul .dropdown-toggle.toggled-on:after {
    content: "\25C0";
    font-weight: 400;
  }
  button.dropdown-toggle {
    width: auto;
    height: auto;
    position: inherit;
    right: auto;
    display: inline-block;
  }
  .main-navigation ul li:hover > ul {
    display: block;
    border: var(--pcg-border-hairline) solid var(--black);
  }
}
/* JS/no-JS fullscreen modal overrides */
.no-js .site-header-menu,
.site-header-menu.toggled-on {
  display: grid;
}
.js .site-header-menu.toggled-on {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sm-gap) 0;
  font-size: 1.2em;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.js .site-header-menu.toggled-on .main-navigation {
  margin-top: var(--sm-gap);
}
/* Lock document scroll while the fullscreen menu is open so the body scrollbar
   doesn't show behind the overlay (overlay scrolls on its own). CSS-only via
   :has(), reacting to the .toggled-on class JS already sets. */
html:has(.site-header-menu.toggled-on) {
  overflow: hidden;
}
/* ----------------------------------------------------------------------------
 * 09) Singular: posts, entry content & patterns
 * ------------------------------------------------------------------------- */
/* 09a) Base blocks, heading scale, figures (homepage-specific rules live in 09k) */
pre.wp-block-verse {
  background: transparent;
  font-family: unset;
  line-height: unset;
  margin-bottom: var(--sm-gap);
  max-width: 100%;
  overflow: auto;
  padding: 0;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h1 {
  font-size: clamp(2.275rem, calc(1.992rem + 0.894vw), 4.55rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h2 {
  /* The 1.95rem floor is dead code (the preferred value clears it at every
   * viewport), kept rather than silently re-shaping this heading's curve. */
  font-size:clamp(1.95rem, calc(1.963rem + 0.716vw), 2.6rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h3 {
  font-size: clamp(1.788rem, calc(1.625rem + 0.626vw), 2.21rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h4 {
  font-size: clamp(1.625rem, calc(1.463rem + 0.537vw), 2.197rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h5 {
  font-size: clamp(1.3rem, calc(1.138rem + 0.447vw), 1.827rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content h6 {
  font-size: clamp(1.222rem, calc(1.138rem + 0.358vw), 1.463rem);
}
.entry-content figure {
  padding:0;
}
.entry-content .wp-block-columns > * {
  padding:0;
}
/* Exhibition / PAL hero: secondary h2 (dates, subtitle). */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content .pcg-exhibition-header h2.wp-block-heading,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content .pcg-post-header h2.wp-block-heading {
  font-size: clamp(1.463rem, 0.878vw + 1.008rem, 1.95rem);
}
/* 09b) Exhibition header (singular) */
.wp-block-columns.pcg-exhibition-header:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child),
.pcg-exhibition-header > .wp-block-column {
  margin-top:auto;
  border-bottom: var(--pcg-border-hairline) solid var(--light-gray);
}
.exhibition-date-range__date {
  display: block;
}
/* 09c) Collection tags (singular) */
.pcg-collection-tags {
  border-top: var(--pcg-border-hairline) solid var(--light-gray);
  margin:var(--md-gap) 0;
  padding:1rem 0 0;
}
.pcg-collection-tags ul {
  list-style: none;
  padding:0;
  margin:0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:0.5rem;
}
.pcg-collection-tags li {
  padding:0;
  margin:0;
}
.pcg-collection-tags li p:after {
  content: ', ';
}
.pcg-collection-tags li:last-child p:after {
  content: '';
}
.pcg-collection-tags li p {
  margin:0;
}
/* 09d) Post header, PAL, byline, meta, post terms */
.pcg-post-header {
  margin-bottom:var(--lg-gap);
  gap:var(--min-gap) var(--xlg-gap);
}
.wp-block-media-text {
  gap: var(--md-gap) var(--lg-gap);
}
.wp-block-media-text>.wp-block-media-text__content, /* default vertical aligment */
.wp-block-media-text>.wp-block-media-text__media 
{
  align-self: auto;
  padding: 0;
}
.wp-block-media-text__content .wp-block-post-terms__prefix {
  /* Hide the 'prefix'. Removing each instance would require manually editing ~40 posts. */
  display: none;
  visibility: hidden;
}
@media (max-width: 1099px) {
  .pcg-post-header.wp-block-media-text.is-stacked-on-mobile > [class] {
      grid-column: 1 / -1; /*override core media-text style and break wider*/
  }
  .pcg-post-header.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
    grid-row: 1 / 2;
    padding: var(--md-gap) 0 0;
  }
  .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content {
    margin-top: var(--md-gap);
    grid-row: 2;
  }
}
.pc-post-date + .wp-block-post-terms:before {
  content: '| ';
}
.pcg-exhibition-note p {
   margin-left:0 !important;
}
.pcg-exhibition-note hr {
  width:100%;
  margin-left:0 !important;
  margin-right: 0 !important;
}
.pcg-reception-info {
  border-left:6px solid var(--purple);
  border-top: var(--pcg-border-button) solid var(--purple);
  border-radius: 15px 0 0;
  padding:var(--sm-gap) 0 0 var(--sm-gap); 
  margin-bottom: var(--md-gap) ;
  width: fit-content;
  max-width: 100%;
}
/* Variation for Program (Event) Archive */
.post-type-archive-pcg_programs .pcg-reception-info {
  border-left:0;
  border-top:0;
  padding:0;
  border-radius: 0;
  margin-bottom: var(--sm-gap);
}
.post-type-archive-pcg_programs .exhibit-image--wrapper::after {
  content:'';
  display: none;
}
.pcg-program-reception-info .pcg-reception-info {
  width:100%;
}
.pcg-map-marker {
  width: 2ch;
  vertical-align: text-bottom;
  fill: var(--orange);
  margin-left: -0.35ch;
}
/* Location line on the exhibition single pattern: pin drawn via CSS mask so the
   paragraph's content stays plain text and can be bound to the ACF location field. */
.pcg-exhibition-location {
  position: relative;
  padding-left: 2ch;
}
.pcg-exhibition-location::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.8ch;
  height: 1.8ch;
  background-color: var(--orange);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M11.163 11.554c0-2.655 2.166-4.807 4.837-4.807s4.837 2.152 4.837 4.807-2.166 4.806-4.837 4.806-4.837-2.152-4.837-4.806zM7.777 12.154c0 2.011 2.454 6.25 2.454 6.25l5.769 9.614 5.438-9.613c0 0 2.785-4.27 2.785-6.25 0-4.513-3.682-8.171-8.223-8.171s-8.223 3.657-8.223 8.17z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill-rule='evenodd' d='M11.163 11.554c0-2.655 2.166-4.807 4.837-4.807s4.837 2.152 4.837 4.807-2.166 4.806-4.837 4.806-4.837-2.152-4.837-4.806zM7.777 12.154c0 2.011 2.454 6.25 2.454 6.25l5.769 9.614 5.438-9.613c0 0 2.785-4.27 2.785-6.25 0-4.513-3.682-8.171-8.223-8.171s-8.223 3.657-8.223 8.17z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.pcg-byline {
  margin:var(--lg-gap) 0 var(--sm-gap);
  border-left:4px solid var(--purple);
  padding:0 0 0 0.5rem;
  line-height: 1.3;
}
.wp-block-separator  {
  margin:var(--md-gap) 0;
  background-color: var(--light-gray);
  height: 1px;
  width:100%;
  border:0 !important;
}
.pcg-supporters.has-media-on-the-right>.wp-block-media-text__content {
  padding:0 8% 0 0;
}
.pcg-supporters.has-media-on-the-left>.wp-block-media-text__content {
  padding:0 0 0 8%;
}
.wp-block-post-terms a:not( .pcg-sticky-footer-wrapper *, header.primary *, .menu-container *, .button, .pcg-button )  {
  text-decoration-color: transparent;
  color:var(--purple);
}
.wp-block-post-terms a:not( .pcg-sticky-footer-wrapper *, header.primary *, .menu-container *, .button, .pcg-button ):hover {
  color:var(--orange);
}
.pcg-post-meta * {
  font-size:0.8em;
  letter-spacing: 1px;
}
.pcg-post-meta div + div:before {
  content: '|';
  margin:0 0.8rem 0 0rem; 
  color:var(--black);
}
p.pcg-collection-credit {
    font-style: italic;
    font-size: 0.9em;
}
/* 09e) Image captions
 * !important on both: parent rebrand compiled CSS centers captions and forces a serif on them. */
.wp-caption .wp-caption-text, .wp-caption figcaption, .wp-block-embed figcaption {
  text-align: left !important; /* beats parent rebrand caption centering */
  font-family: var(--pcg-sans-serif) !important; /* beats parent rebrand caption font-family */
  padding:0;
  margin:0.3rem 0 0;
  font-size:0.9em;
  font-weight: normal;
}
/* 09f) Gallery mods */
figure.wp-block-gallery {  
  max-width: 100%;
}
.wp-block-gallery.has-nested-images figure.wp-block-image.wp-caption figcaption {
  position: static;
  color:inherit;
  margin:0.3rem 0 var(--min-gap);
  padding:0 !important;
  text-shadow: unset !important;
  font-size: 0.75em !important;
  height: auto;
  max-height: none !important;
  background: none !important;
  font-family: var(--pcg-sans-serif) !important;
}
/* Query Block Style Variation: Rounded */
.is-style-rounded.wp-block-query li img {
	border-radius: 0 3em 0 0;
}
/* The 'scrim' added by the parent theme. */
.wp-block-gallery.has-nested-images figure.wp-block-image.wp-caption figcaption::before {
  content: none !important;
}
/* 09g) Artist image / bio box */
.entry-content > .pcg-author-box {
  margin-block-start: var(--xlg-gap);
  gap:var(--md-gap) var(--lg-gap);
  font-size: 0.9em;
  padding-left:var(--sm-gap);
  padding-right:var(--sm-gap);
  align-items: start;
}
.pcg-author-box .author-photo {
  flex:0 0 35%;
}
.pcg-author-box .author-photo img {
  border-radius:100px 0 0 0;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 1600px) {
  .entry-content > .pcg-author-box {
    display: block;
  }
  figure.author-photo {
    width: 100%;
    max-width: 100%;
    margin-bottom:var(--md-gap);
  }
}
/* 09h) PC Accordion Modifications */
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-pc-accordion-item summary {
  font-family: var(--pcg-serif);  
  padding: var(--md-gap) 0;
}
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-pc-accordion-item summary:after {
  font-family: var(--pcg-serif);
  height: 25px;
}
.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026 .wp-block-pc-accordion-item .pc_custom_accordion_block_body_text {
  font-family: var(--pcg-sans-serif);
}
/* 09i) Entry-content grid & alignwide / alignfull (widths from theme.json)
 *
 * A five-column grid whose named zones — content / wide / full — match the block
 * editor's alignment classes; direct children land in the zone their class names.
 * The same grid is re-applied to alignfull Group blocks so nested content can use
 * alignwide / alignfull too. */
.entry-content,
.entry-content .wp-block-group.alignfull {
  padding-inline: var(--sm-gap);
  /* Layout sizes from theme.json. Fallbacks match current values. */
  --content-max: var(--wp--style--global--content-size, 1150px);
  --wide-max:    var(--wp--style--global--wide-size,    1600px);
  /* Side gutter for narrow viewports — keeps text off the edges. */
  --gutter: clamp(1rem, 5vw, 2rem);
  display: grid;
  /* full edge | wide strip | readable column | wide strip | full edge.
     min(100% - gutter, content-max) insets content on small screens and caps
     it on large ones. */
  grid-template-columns:
      [full-start]    minmax(0, 1fr)
      [wide-start]    minmax(0, calc((var(--wide-max) - var(--content-max)) / 2))
      [content-start] min(100% - (var(--gutter) * 2), var(--content-max)) [content-end]
                      minmax(0, calc((var(--wide-max) - var(--content-max)) / 2)) [wide-end]
                      minmax(0, 1fr) [full-end];
}
/* Default placement: every direct child sits in the content column. */
.entry-content > *,
.entry-content .wp-block-group.alignfull > * {
  grid-column: content;
}
/* Align wide: spans the wide column zone. */
.entry-content > .alignwide,
.entry-content .wp-block-group.alignfull > .alignwide {
  grid-column: wide;
}
/* Align full: spans the full column zone — true viewport edge-to-edge. */
.entry-content > .alignfull,
.entry-content > .full-width,
.entry-content .wp-block-group.alignfull > .alignfull {
  grid-column: full;
}
/* Media fills its alignfull block, so no dead space either side of it. */
.entry-content > .alignfull > img,
.entry-content > .alignfull > figure,
.entry-content > .alignfull > video,
.entry-content .wp-block-group.alignfull > .alignfull > img,
.entry-content .wp-block-group.alignfull > .alignfull > figure,
.entry-content .wp-block-group.alignfull > .alignfull > video {
  width: 100%;
  height: auto;
}
/* Restore vertical spacing between sibling blocks. */
.entry-content > * + *:not(.pcg-post-header),
.entry-content .wp-block-group.alignfull > * + *:not(.pcg-post-header) {
  margin-block-start: var(--sm-gap);
}
.entry-content > p + p {
  margin-block-start: var(--min-gap);
}
/* 09j) Related Content */
.pcg-related-content {
  border-top:2px solid var(--orange);
  margin-top:var(--lg-gap);
  padding-top: var(--md-gap);
  grid-column: wide;
}
/* Sized against the card-title h3 below (held back from the 35% reduction at
 * 1.2em), not the sitewide scale. Keep above 1.2em or the section inverts. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .pcg-related-content h2 {
  font-size:1.35em;
  margin:0 0 var(--md-gap);
}
.pcg-related-content ul.pcg-archive-feed.pcg-grid {
  --min-grid-width: min(100%, 400px);  
  gap:var(--md-gap);
  list-style: none;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .pcg-related-content h3 {
  font-size: 1.2em;
  font-family: var(--pcg-sans-serif) !important;
}
/* 09k) Front page (main.pcg-home) */
.free-and-open { /* The purple paragraph at the top of the homepage */
  font-family: var(--pcg-sans-serif) !important;
  padding: min(1.2rem, 1%) min(1.5rem, 2%);
  text-wrap: pretty;
  margin:0 1% var(--sm-gap) auto;
  width: fit-content;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) main.pcg-home > section:not(:has(.free-and-open)) + section {
  /* Padding between homepage <section>s, excepting the section that contains .free-and-open */
  margin-top:var(--xlg-gap);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) main.pcg-home .pc-content-wrapper .inner-big {
  max-width: var(--pcg-max-site-width); /* Match max width on homepage with header width */
}
/* Section headings ("Our Collection", "News & Announcements", etc.) and Query Loop post titles. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) main.pcg-home h2.wp-block-heading {
  font-family: var(--pcg-serif) !important; /* beats parent rebrand compiled CSS */
  font-weight: 200 !important; /* beats parent rebrand !important weight on .pcg-home h2 (h3 below does not need this) */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) main.pcg-home .wp-block-query h3.wp-block-post-title {
  font-family: var(--pcg-serif) !important; /* beats parent rebrand compiled CSS */
}
/* 09l) PCG Collection Tags */
#primary .pcg_tag {
  font-family: var(--pcg-serif);
  font-size: 0.8em;
  padding-inline-start: 0.5rem;
  border-left: 3px solid var(--black);  
  letter-spacing: 0.03em;
}
/* 09m) PCG PAL Footnotes */
.wp-block-list.pcg-footnotes {
  margin-top:var(--lg-gap);
  border-top:1px solid var(--light-gray);
  padding-top: var(--md-gap);
  font-size: 0.85em;
}
/* 09n) Breadcrumbs (core/breadcrumbs), from
 * template-parts/meta-box-breadcrumbs-display.php. Replaces the parent's retired
 * .pc-breadcrumb styling, and restates core's layout + ::after separator (its
 * stylesheet loads on demand); the `nav` prefix outranks core either way, and the
 * separator comes from a `--separator` custom property set inline on the <nav>.
 * Rewriting that inline style must not split on the ";" inside the escaped
 * &quot; entities — see pcg_force_important_on_inline_styles(). */
nav.wp-block-breadcrumbs {
  max-width: 100%;
  margin:0 0 var(--md-gap);
  padding:0 0 0 var(--min-gap);
  border-left:3px solid var(--purple);
  border-radius: 3px;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color:#595959; /* matches the parent theme's former breadcrumb gray */
}
nav.wp-block-breadcrumbs ol {
  display:flex;
  flex-wrap: wrap;
  align-items: center;
  margin:0;
  padding:0;
  list-style: none;
}
nav.wp-block-breadcrumbs li {
  display:flex;
  align-items: center;
  margin:0;
  padding:0;
}
nav.wp-block-breadcrumbs li:not(:last-child)::after {
  content: var(--separator, "»");
  padding:0 var(--min-gap);
  margin:0;
  opacity: 0.7;
}
nav.wp-block-breadcrumbs a {
  color: inherit;
}
nav.wp-block-breadcrumbs [aria-current="page"] {
  font-weight: 500;
}
#primary .entry-header:has( + .pcg-post-header) {
  grid-column:wide;
  width:100%;
  max-width: 100%;
  margin:0 auto var(--sm-gap);
}
#primary.collection_item .entry-header:has(.wp-block-breadcrumbs) { /* Always fullwidth: collection item */
  grid-column: wide;
}
#primary.collection_item .wp-block-breadcrumbs {
  max-width: 100%;
  margin:0 auto var(--sm-gap);
}
.wp-block-breadcrumbs + h1 {
  margin-top:var(--md-gap);
}
/* ----------------------------------------------------------------------------
 * 10) Archives & pagination
 * ------------------------------------------------------------------------- */
h1.archive-title {
  margin:0 0 var(--md-gap);
  padding:0;
  font-family: var(--pcg-sans-serif) !important; /* overrides child 01b heading default (--pcg-serif !important) */
  font-size: clamp(2.197rem, calc(1.992rem + 0.894vw), 3.452rem);
  display: inline-block;
  position: relative;
  &:before {
    content:'';
    position: absolute;
    left:0;
    bottom:0.1em;
    display: block;
    height: 0.05em;
    background-color: var(--orange);
    width:66.66%;
  }  
}
main.pcg-archive {
  margin:var(--sm-gap) auto 0;
  --left-right-padding: var(--md-gap);
  padding:0 var(--md-gap);
  width: calc( var(--pcg-max-site-width) - (2 * var(--left-right-padding) ) );
  max-width:100%;
}
main.pcg-archive-narrow {
  --pcg-max-site-width:1800px;
}
.pcg-archive-feed.pcg-grid {
  --min-grid-width: min(100%, 370px);
  margin:0;
  width: 100%;
  max-width:100%;
  gap:var(--lg-gap);
}
ul.pcg-archive-feed.pcg-grid {
  padding:0;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-grid-width)), 1fr));
}
.pcg-archive-item {
  max-width: min(100%, 655px);
}
.pcg-archive-item a:has(h2, h3) {
    text-decoration:none;
  }
.pcg-archive-item:not( :has(img) ) {
  padding:var(--md-gap);
  border: var(--pcg-border-hairline) solid var(--light-gray);
  border-radius:var(--md-gap) 0 0;
  height: 100%;
}
.pcg-archives--details {
  font-size:1.15em;
}
.pcg-archives--meta{
  padding-top:var(--min-gap);
  border-top: var(--pcg-border-button) solid var(--light-gray);
}
.collection-meta--grid {
  margin-top:var(--min-gap);
  display: grid;
  grid-template-columns: auto 1fr;
  gap:var(--min-gap);
  font-size:0.9em;
  line-height: 1.2;
}
.collection-meta--arrow {
  padding-left:0.3em;
  float: right;
}
/* Exhibition Archive */
.post-type-archive-pcg_exhibitions .pcg-archive-feed.pcg-grid {
  gap: var(--xlg-gap) var(--lg-gap);
}
@media (max-width: 1200px) {
  .post-type-archive-pcg_exhibitions .pcg-archive-feed.pcg-grid {
    --min-grid-width: min(100%, 420px);
    gap: var(--lg-gap) var(--md-gap);
  }
  .pcg-archive-item {
    max-width: 100%;
  }
}
/* h2 or h3: exhibition cards sit directly under the h1, but event cards now sit
   inside Current/Future/Past <section>s whose headings take h2, pushing the card
   title to h3. Both levels must style identically. */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .exhibition-item :is(h2, h3) {
  font-weight: 400 !important;
}
.exhibition-item :is(h2, h3) + p {
  font-size:1.3em;
}
.exhibition-item :is(h2, h3) + p > span {
  display: inline-block;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) div.exhibition-item > a {
  text-decoration: none;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .exhibition-item > a:hover p {
  color:var(--black);
}
.exhibition-item .pcg-archives--details {
  padding:var(--sm-gap) var(--sm-gap) 0;
  font-size:1em;
}
.pcg-archives--details *:last-child {
  margin-bottom:0;
}
/* Collection Archive Thumbnail size contraints.
   The img sizes itself: auto width/height keeps its natural proportions, so
   landscape pieces run the full column width and only tall portraits meet the
   height cap. 

   The cap is proportional to the COLUMN width, not the viewport. Grid columns
   snap between ~370px and the 655px item cap as auto-fill adds and removes a
   column, so viewport media queries track the wrong variable. 100cqw is the item's own inline size, which holds the ratio steady at every width. Adjust the two variables, not the breakpoints. */
.pcg-archive--collection .pcg-archive-item {
  container-type: inline-size;
}
.pcg-archive--collection .pcg-archive-item img {
  --pcg-landscape-ratio: 1.5; /* reference landscape shape (3:2) */
  --pcg-portrait-factor: 1.4; /* portraits may be 140% as tall as that landscape */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100cqw / var(--pcg-landscape-ratio) * var(--pcg-portrait-factor));
  display: block;
  margin-bottom: var(--sm-gap);
}
/* Single column: nothing shares the row, so nothing needs evening out — let every
   piece run full width at its natural proportions.
   The item can't detect this itself (a 500px item may be one column or one of two,
   the ranges overlap), but the grid's own width determines the column count
   outright: a second column first fits at (2 x --min-grid-width) + --lg-gap =
   (2 x 370px) + 64px. Keep 804px in step with .pcg-archive-feed.pcg-grid above.
   Nesting containers is safe — 100cqw above still resolves against the nearest
   container ancestor, the item, not this named one. */
.pcg-archive--collection .pcg-archive-feed {
  container-type: inline-size;
  container-name: pcg-collection-grid;
}
@container pcg-collection-grid (width < 600px) {
  .pcg-archive--collection .pcg-archive-item img {
    max-height: none;
  }
}

/* Collection archive: mode switcher + per-mode panels */
/* Segmented mode switcher (Browse by category / Keyword search / View entire
   collection). The active mode carries aria-current and turns orange. */
.pcg-collection-archive-modes {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9em;
  gap: 0.5rem 0.75rem;
  margin: 0 0 var(--lg-gap);
}
a.pcg-collection-archive-modes__link {
  margin-bottom: 0;
}
.button-transparent-bg.pcg-collection-archive-modes__link:is([aria-current='page']) {
  background-color: transparent;
  border-width: 1px;
  font-weight: 400;
  box-shadow: var(--pcg-button-shadow-flat);
  pointer-events: none;
  cursor: default;
}
/* Shared focus ring for the controls in this section. */
.pcg-collection-archive-modes__link:focus-visible,
.pcg-collection-archive-search__input:focus-visible,
.pcg-collection-archive-sort select:focus-visible {
  outline: 2px dotted var(--orange, currentColor);
  outline-offset: var(--pcg-outline-offset);
}
/* Keyword search panel. */
.pcg-collection-archive-search-panel {
  width: 42rem;
  max-width: 100%;
  margin: 0 0 var(--lg-gap);
}
.pcg-collection-archive-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pcg-collection-archive-search__label,
.pcg-collection-archive-sort label {
  font-weight: 600;
}
.pcg-collection-archive-search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.pcg-collection-archive-search__row button.pcg-button {
  margin:-2px 0 0;
}
.pcg-collection-archive-search__input {
  font: inherit;
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.5rem 0.65rem;
}
.pcg-collection-archive-search__submit {
  flex: 0 0 auto;
  margin-bottom: 0;
}
/* Sort control (lives in the View entire collection panel, above the grid). */
.pcg-collection-archive-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  margin: 0 0 var(--sm-gap);
}
.pcg-collection-archive-sort select {
  font: inherit;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
}
/* Hide the no-JS submit button once main.js enhances the form (auto-submit on change). */
.pcg-collection-archive-sort--js .pcg-collection-archive-sort__submit {
  display: none;
}
/* 10a) Pagination */
nav.pagination {
  width:100%;
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top:var(--lg-gap);
  padding-top:var(--sm-gap);
}
nav.pagination .page-numbers {
  font-size: 1.5em;
  letter-spacing: 0.5px;
  padding:0 10px;
}
nav.pagination .page-numbers.current {
  color:var(--purple);
  pointer-events: none;
}
nav.pagination .page-numbers.prev {
  margin-right: 1rem;
}
nav.pagination .page-numbers.next {
  margin-left:1rem;
}
nav.pagination .page-numbers:first-child:not(.prev) {
  margin-left: auto;
}
nav.pagination .page-numbers:last-child:not(.next) {
  margin-right: auto;
}
/* Dated archives: Current / Future / Past sections + jump links --------------
   Rendered by template-parts/dated-archive-sections.php, shared by the events
   and exhibitions post type archives (not by pcg_exhibits_cat term archives).
   Sections with no posts are omitted entirely, and the nav only appears when
   2+ sections survive. */
.pcg-archive-jump {
  margin:0 0 var(--lg-gap);
  padding: var(--sm-gap) var(--sm-gap) 0 0;
  border-top: 3px solid var(--purple);
  border-right: 2px solid var(--purple);
  border-top-right-radius: 2em;
}
.pcg-archive-jump ul {
  display: flex;
  flex-wrap: wrap;
  gap:var(--sm-gap);
  margin:0;
  padding:0;
  list-style: none;
}
.pcg-archive-jump a {
  display: inline-block;
  padding:0.2em 0;
  font-family: var(--pcg-sans-serif);
  font-size:1.3em;
  line-height: 1.2;
}
.pcg-archive-jump a:hover,
.pcg-archive-jump a:focus-visible {
  border-bottom-color: var(--orange);
}
.pcg-archive-section {
  /* Anchor targets: keep the heading clear of the viewport edge (and the admin
     bar) when a jump link scrolls to it. */
  scroll-margin-top: calc(var(--md-gap) + var(--wp-admin--admin-bar--height, 0px) );
  margin:0 0 var(--xlg-gap);
}
.pcg-archive-section:last-of-type {
  margin-bottom: var(--lg-gap);
}
.pcg-archive-section__title {
  margin:0 0 var(--md-gap);
  font-family: var(--pcg-sans-serif) !important; /* matches h1.archive-title, overrides child 01b serif default */
  font-size: clamp(1.6rem, calc(1.4rem + 0.6vw), 2.3rem);
  display: inline-block;
  border-bottom:3px solid var(--purple);
  font-weight: 400 !important;
  padding-right: 3%;
}
.pcg-archive-section__more {
  margin:var(--md-gap) 0 0;
  font-size:1.15em;
}
.pcg-archive-empty {
  font-size:1.2em;
}
/* Two-column shell: sticky jump links beside the content --------------------
   .pcg-archive-layout wraps __nav (printed only when 2+ sections exist) and
   __content. The rules above already give narrow screens what they want — nav as
   a row above the content — so the sidebar is layered on from 901px up only.
   The grid hangs off :has() rather than a wrapper class so that no nav means no
   grid, and the content spans the full container. */
@media (min-width: 901px) {
  .pcg-archive-layout:has(.pcg-archive-layout__nav) {
    margin-top: var(--lg-gap);
    display: grid;
    /* Wide enough for the full section labels the links now carry
       ("Current Exhibitions", not "Current"). They wrap rather than overflow if
       a translation runs longer. */
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: var(--lg-gap);
    /* Required for the sticky child: grid items stretch to the row height by
       default, which would leave sticky with no room to travel. */
    align-items: start;
  }
  .pcg-archive-layout__nav {
    position: sticky;
    top: var(--md-gap);
  }
  .pcg-archive-jump {
    margin-bottom:0;
  }
  /* Stack the links vertically in the column. */
  .pcg-archive-jump ul {
    flex-direction: column;
    gap: var(--min-gap);
  }
}
/* Sectioned landing pages: full-width horizontal rows ------------------------
   Scoped to .pcg-archive-rows, used by template-parts/dated-archive-sections.php
   in place of .pcg-grid for the Current/Future/Past sections; the ?when=past list
   and the pcg_exhibits_cat term archive keep the card grid.

   Two grid children per row: __text (link, heading, meta, and exhibition
   details) and __media, omitted when there's no image. Nesting the text as ONE
   grid item is deliberate — as direct children, a tall thumbnail stretched the
   rows and prised the title and meta apart. */
.pcg-archive-rows {
  /* Keep in step with the `sizes` hint in the -row partials, or the browser
     picks its srcset candidate for the wrong slot. */
  --pcg-row-thumb: 350px;
  /* Rows break on THEIR OWN width (see the @container query below), not the
     viewport's: the sticky nav column and gutter take ~330px, so at a 1000px
     viewport a row is only ~670px wide. */
  container-type: inline-size;
  container-name: pcg-rows;
  margin:0;
  width:100%;
  max-width:100%;
}
.pcg-archive-row {
  display: grid;
  grid-template-columns: 1fr; /* no image — text takes the full width */
  column-gap: var(--lg-gap);
  align-items: start;
}
/* Only claim a thumbnail column when a thumbnail was actually rendered;
   otherwise the column gap would leave a dead gutter on the right. */
.pcg-archive-row:has(.pcg-archive-row__media) {
  grid-template-columns: 1fr var(--pcg-row-thumb);
}
.pcg-archive-rows .pcg-archive-item {
  max-width:100%; /* overrides the 655px grid-card cap */
  padding:var(--md-gap) 0;
  border-top: var(--pcg-border-hairline) solid var(--light-gray);
}
/* Neutralize the boxed treatment grid cards get when they have no image —
   in a row list that would draw a stray outline mid-column. */
.pcg-archive-rows .pcg-archive-item:not( :has(img) ) {
  padding:var(--md-gap) 0;
  border:0;
  border-top: var(--pcg-border-hairline) solid var(--light-gray);
  border-radius:0;
}
.pcg-archive-rows .pcg-archive-item:first-child {
  padding-top:0;
  border-top:0;
}
.pcg-archive-row__text > a {
  display: block;
}
.pcg-archive-row__text :is(h2, h3) {
  margin:0 0 var(--sm-gap);
  font-size: clamp(1.35rem, calc(1.15rem + 0.75vw), 2rem);
  line-height: 1.15;
}
.pcg-archive-row__text > a > p {
  margin:0;
}
/* The theme's card hover (.exhibition-item > a:hover p) targets a direct-child
   anchor; in a row the link is nested one level deeper, so restate it here. */
.pcg-archive-row__text > a:hover p {
  color: var(--black);
}
.pcg-archive-row__media img {
  display:block;
  width:100%;
  height:auto;
}
/* Excerpt is already inside the text column, so it needs no manual indent —
   just separation from the meta above it. */
.pcg-archive-rows .pcg-archives--details {
  padding:var(--sm-gap) 0 0;
}
/* Measured against the row list's own width, so rows stack when the space they
   actually have runs out — whether that is a narrow viewport or a wide one with
   the sticky nav column taking its share. */
@container pcg-rows (max-width: 780px) {
  /* Thumbnail drops below the text. */
  .pcg-archive-row,
  .pcg-archive-row:has(.pcg-archive-row__media) {
    grid-template-columns: 1fr;
    column-gap:0;
  }
  .pcg-archive-row__media {
    max-width: var(--pcg-row-thumb);
    margin-top: var(--sm-gap);
  }
}
/* ----------------------------------------------------------------------------
 * 11) Footer
 * ------------------------------------------------------------------------- */
.pcg-site-body-wrapper {
  min-height: 100vh;
  max-width: 100%;
  overflow-x: clip;
  position: relative;
  z-index: 1;
  background-color: var(--white);
}
.pcg-sticky-footer-wrapper {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
}
.pcg-sticky-footer-wrapper > .subfooter,
.pcg-sticky-footer-wrapper .site-info {
  font-size:89%;
}
.pcg-footer-wrapper {
  /* Surrounds both the PCG footer and newsletter subscription form*/
  margin-top:auto;
  padding: 0 var(--md-gap);
}
.pcg-footer.pcg-grid {
  --min-grid-width:min(100%, 250px); /* Controls the minimum size of the grid. 100% is always the max. Grid defined further down. */
  width: var(--pcg-max-site-width);
  max-width: 100%;
  gap:var(--md-gap) var(--lg-gap);
  border-top: var(--pcg-border-button) dashed var(--light-gray);
  padding:var(--lg-gap) 0 0;
  margin:0 auto;
}
.pcg-footer-contact a[href^="mailto:"] { /* Don't wrap the email address in the footer. */
  overflow-wrap: normal;
  word-break: normal;
}
.pcg-footer h3 {
  font-weight: 500;
  font-size:1.2em;
  margin-bottom:var(--min-gap);
}
.pcg-footer address {
  font-style: normal;
}
.pcg-footer .pcg-button.button-cta {
  font-size:1em;
}
/* Social icons: base styles live in 07) Header utility area. */
ul.pcg-footer-social-list {
  width:100%;
  gap:var(--sm-gap);
  border-bottom-width:0;
  margin-bottom:var(--md-gap);
}
.pcg-footer-social-list li {
  width: var(--pcg-icon-footer-social);
}
.pcg-footer-ctas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.site-footer, .subfooter { /* The Providence College footer */
  background-color: var(--black);
}
/* ----------------------------------------------------------------------------
 * 11a) Footer mailing list form
 * ------------------------------------------------------------------------- */
.pcg-newsletter-wrap-outer {
  padding: 0 var(--sm-gap) var(--lg-gap);  
}
.pcg-newsletter-wrap-inner {
  width:var(--pcg-max-site-width);
  max-width: 100%;
  margin:0 auto;
  padding-top: var(--lg-gap);
  border-top: var(--pcg-border-button) dashed var(--light-gray);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:var(--md-gap) var(--xlg-gap);
  align-items: center;
}
.pcg-footer-logos {
  flex:0 0 400px;
  max-width: 100%;
}
.pcg-footer-logos .pcg-logomarks--link svg {
  width:250px;
  max-width: 100%;
}
.pcg-logomarks a:hover svg path {
  fill: var(--orange);
}
.pcg-form-wrapper {
  --form-height: 3rem;
  flex:1 0 auto;
}
/* min() rather than clamp(): the old 2em floor was dead code, since the preferred
 * value cleared it at every viewport. */
.pcg-form-wrapper h3 {
  font-size:min(1.625em + 0.688vw, 2.6em);
}
.pcg-form-wrapper form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap:var(--min-gap);
  width: 100%;
  max-width: 100%;
}
.pcg-form-wrapper .email_wrapper {
  flex:1 1 400px;
}
.pcg-form-wrapper form button {
  flex:0 0 var(--pcg-form-submit-min-width);
  height: var(--form-height);
  margin: 0;
  font-weight: 700;
  font-size: 1.8em;
}
.pcg-form-wrapper input.email {
  width:100%;
  height: calc( var(--form-height) + var(--pcg-box-offset-shadow)); /* offset matches button shadow */
  padding:0.25em 0.75em;
  line-height: 1.1;
  font-family: var(--pcg-sans-serif);
  font-size:1.25em;
  font-style: normal;
  background-color: transparent;
  border: var(--pcg-border-hairline) solid var(--black);
  border-radius: var(--pcg-radius-field);
}
.pcg-form-wrapper input.email::placeholder {
  font-style: normal;
  letter-spacing: 1px;
}
.pcg-form-wrapper input.email:focus {
  outline-style: none;
  border-color: var(--purple);
}
/* ----------------------------------------------------------------------------
 * 12) Reusable layout-related classes
 * ------------------------------------------------------------------------- */
.pcg-fullwidth {
  width:100%;
  max-width: 100%;
}
.pcg-grid {
    --min-grid-width:min(100%, 350px);
    display: grid;
    gap: var(--sm-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-grid-width)), 1fr));
    width: 100%;
    max-width: 100%;
    align-items: start;
}
/* ----------------------------------------------------------------------------
 * 13) Block editor & front-end utilities
 * ------------------------------------------------------------------------- */
/* 13a) Preset font-size helpers  */
.has-pcg-small-font-size:not(:is(h1, h2, h3, h4, h5, h6)) {
  font-size:0.8em;
}
.has-pcg-large-font-size:not(:is(h1, h2, h3, h4, h5, h6)) {
  font-size:1.5em;
}
.has-pcg-huge-font-size:not(:is(h1, h2, h3, h4, h5, h6)) {
  font-size:2.5em;
}
/* 13b) Scoped utilities */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: pretty;
}
/* Heading size clamps (.has-pcg-*-font-size) */
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content :is(h1, h2, h3, h4, h5, h6).has-pcg-small-font-size,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6).has-pcg-small-font-size {
  /* Floor is 1.333rem = 24px, matching body copy inside #main (.wp-singular main),
   * below which a heading stops reading as one — not a straight 35% cut of the
   * original. Ramp endpoints (360px → 2532px) match the presets below. */
  font-size: clamp(1.333rem, 0.512vw + 1.23rem, 1.95rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content :is(h1, h2, h3, h4, h5, h6).has-pcg-large-font-size,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6).has-pcg-large-font-size {
  font-size: clamp(1.625rem, 1.078vw + 1.409rem, 2.925rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary .entry-content :is(h1, h2, h3, h4, h5, h6).has-pcg-huge-font-size,
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6).has-pcg-huge-font-size {
  font-size: clamp(1.95rem, 1.347vw + 1.68rem, 3.575rem);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6).has-tobias-font-family {
  font-family: var(--pcg-serif) !important; /* beats parent rebrand compiled CSS font-family on headings */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) #primary :is(h1, h2, h3, h4, h5, h6).has-space-grotesk-font-family {
  font-family: var(--pcg-sans-serif) !important; /* beats child 01b heading default (--pcg-serif !important) */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-pcg-orange-background-color {
  background-color: var(--orange);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-pcg-purple-background-color {
  background-color: var(--purple);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-pcg-bg-purple-background-color {
  background-color: var(--purple);
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-tobias-font-family {
  font-family: var(--pcg-serif) !important; /* beats Core block-library font-family rules from theme.json defaults */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-space-grotesk-font-family {
  font-family: var(--pcg-sans-serif) !important; /* beats Core block-library font-family rules from theme.json defaults */
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-text-align-center {
  text-align: center;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-text-align-left {
  text-align: left;
}
:where(.wp-child-theme-pc-ex-theme-child-for-pcgalleries-2026) .has-text-align-right {
  text-align: right;
}
/* 13c) Classic alignment (alignleft / alignwide floats, etc.) */
.alignleft,
.alignright,
.aligncenter,
a.pcg-button.aligncenter,
.alignnone {
  width:fit-content;
  max-width: 100%;
  height:auto;
}
.alignleft {
  float:left;
  clear:left;
  margin:0 2.5rem 1rem 0;
}
.alignright {
  float:right;
  clear:right;
  margin:0 0 1rem 2.5rem;
}
.aligncenter, a.pcg-button.aligncenter {
  display:block;
  margin:var(--md-gap) auto;
}
.alignnone {
  display:block;
  float:none;
  clear:both;
  margin:2rem 0;
}
/* ----------------------------------------------------------------------------
 * 14) Utility classes
 * ------------------------------------------------------------------------- */
img.scale {
  width:100%;
  max-width:100%;
}
/* The PAL label selectors are here so the visually-hidden recipe lives in one
   place; see 02) for why that label is hidden. */
.screen-reader-text,
.site-header-menu .pcg-pal-hover,
.no-js header.primary .pcg-pal .pcg-pal-hover {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* ----------------------------------------------------------------------------
 * 15) Transitions & animations
 * ------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}
header.primary a,
a,
button,
.pcg-button,
img,
svg, 
svg path,
.lines-wrap > span,
a:before,
.main-navigation > ul > li,
.main-navigation ul li *:before,
.main-navigation ul li *:after,
.dropdown-toggle,
a:after
  {
  transition:
    opacity .2s ease-in,
    color .2s ease-in,
    background-color .2s ease-in,
    fill .2s ease-in,
    stroke .2s ease-in,
    border-color .2s ease-in,
    box-shadow .2s ease-in,
    transform .2s ease-in,
    text-decoration-color .2s ease-in;
 }
/* PC Torch Flicker effect (on hover) */
@keyframes pcg-flicker {
  0% { opacity: 0.9; transform: scale(1) }
  100% { opacity: 1; transform: scale(1.05) }
}
/* Reduced-motion override */
@media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Disable cross-document view transitions for users who opt out of motion. */
  @view-transition {
    navigation: none;
  }
}