/*!
Theme Name: Mud
Theme URI: http://underscores.me/
Author: APO33
Author URI: http://apo33.org
Description: Festival Theme for PIKSEL 2025
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mud
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Mud is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* ====== APPENDED: MUD One‑page Additions ====== */

/* ===========================
   Global Theme Variables
   =========================== */

/* Base (will be overridden by [data-theme] below) */
:root{
  /* Page-wide palette */
  --mud-bg: #0f0f10;   /* dark default */
  --mud-ink: #f3f3f3;

  /* Header/Drawer derive from page vars by default */
  --nav-bg: var(--mud-bg);
  --nav-fg: var(--mud-ink);
  --drawer-bg: rgba(10,10,10,.96);

  /* UI accents */
  --nav-accent: #ff4d00;
  --ring: rgba(255,255,255,.2);
  --tick: rgba(255,255,255,.35);
  --pointer: #fff;
}

/* DARK */
html[data-theme="dark"]{
  --mud-bg: #0f0f10;
  --mud-ink: #f3f3f3;

  --nav-bg: var(--mud-bg);
  --nav-fg: var(--mud-ink);
  --drawer-bg: rgba(10,10,10,.96);

  --ring: rgba(255,255,255,.2);
  --tick: rgba(255,255,255,.35);
  --pointer: #fff;
}

/* LIGHT */
html[data-theme="light"]{
  --mud-bg: #ffffff;
  --mud-ink: #111;

  --nav-bg: #f5f5f7;
  --nav-fg: #111;
  --drawer-bg: rgba(255,255,255,.95);

  --ring: rgba(0,0,0,.2);
  --tick: rgba(0,0,0,.35);
  --pointer: #000;
}

/* Make sure key surfaces actually use the variables */
html, body{ background: var(--mud-bg); color: var(--mud-ink); }
a{ color: var(--mud-ink); }
a:hover, a:focus{ opacity:.85; }

/*----------------------------------
	HEADER
--------------------------------------------*/

/* Header + Drawer can live here too if you prefer centralizing */
.site-header{ background: var(--nav-bg); color: var(--nav-fg); z-index: 901;}
.site-title{
  font-family:
    "Arial Narrow", "Arial Nova Condensed", "Helvetica Neue Condensed Bold",
    Arial, Helvetica, sans-serif;
  font-stretch: condensed;       /* modern way to condense if supported */
	font-size: xxx-large;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;     /* optional; remove if not desired */
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Keep it visually on top if content scrolls under */
  position: relative;
  z-index: 901;
}


/*---------------------------------------------
 * FRONT PAGE
-------------------------------------------------*/

.primary-nav{ background: var(--drawer-bg); color: var(--nav-fg); }
.primary-nav .menu a{ color: var(--nav-fg); }

.mud-section{ padding:3rem 1rem; }
.mud-section-title{ font-size:1.5rem; letter-spacing:.06em; margin:0 0 1rem; }

.mud-frame{ border:2px solid var(--mud-line); position:relative; padding:1rem; }

.mud-intro .mud-title{ font-family:"Courier New", ui-monospace, monospace; font-weight:600; letter-spacing:.06em; margin:0 0 .25rem; }
.mud-intro .mud-meta{ font-family:"Courier New", ui-monospace, monospace; opacity:.85; margin:0 0 1rem; }
.mud-intro-body{ display:grid; grid-template-columns:1fr; gap:1rem; }

.mud-circle, .mud-card-circle{
  width:68vw; max-width:520px; aspect-ratio:1/1; border-radius:50%;
  background-size:cover; background-position:center;
  position:relative; margin-left:-22vw;
  border:1px solid var(--mud-line);
  box-shadow:0 0 0 8px var(--mud-bg);
}

.mud-text{ max-width:100%; font-family:"Courier New", ui-monospace, monospace; }

.mud-venuelabel{
  position:absolute; right:.5rem; bottom:-.2rem; transform:translateY(100%);
  font-family:"Courier New", ui-monospace, monospace;
  font-size:clamp(2rem,10vw,5rem); letter-spacing:.08em; opacity:.9;
}

.mud-cards,.mud-grid{ list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:1.25rem; }
.mud-card-frame{ border:2px solid var(--mud-line); padding:1rem; position:relative; overflow:visible; }
.mud-card-circle{ width:60vw; max-width:360px; margin-left:-20vw; margin-bottom:1rem; }
.mud-card-title{ margin:0 0 .5rem; font-weight:600; letter-spacing:.04em; }
.mud-card-text{ opacity:.9; }

.mud-tablist{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.75rem; }
.mud-tab{ background:transparent; color:var(--mud-ink); border:1px solid var(--mud-line); padding:.45rem .7rem; letter-spacing:.04em; }
.mud-tab.is-active{ outline:2px solid var(--mud-ink); }
.mud-tabpanel{ display:none; }
.mud-tabpanel.is-active{ display:block; }

.mud-logos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.mud-logo img{ max-width:100%; height:auto; display:block; filter:grayscale(100%) contrast(110%); }
.mud-logo-fallback{ border:1px solid var(--mud-line); padding:.75rem; display:block; text-align:center; }

.mud-toggle{ position:fixed; right:1rem; top:1rem; background:transparent; border:1px solid var(--mud-line); color:var(--mud-ink); padding:.5rem .6rem; border-radius:999px; }


@media (min-width:900px){
  .mud-section{ padding:6rem 4rem; }
  .mud-intro-body{ grid-template-columns:1fr 1fr; align-items:center; gap:3rem; }
  .mud-circle{ width:560px; margin-left:-160px; }
  .mud-text{ justify-self:end; }
  .mud-venuelabel{ right:1rem; }
  .mud-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mud-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mud-card-circle{ width:300px; margin-left:-120px; }
}

/* ======================================================
   MOBILE FIX: keep knobs fully visible on small screens
   ====================================================== */
@media (max-width: 900px) {
  .header-controls {
    position: fixed !important;
    top: 0.75rem;
    right: 0.75rem;
    transform: none !important;
    display: flex;
    gap: 0.4rem;
    z-index: 100050; /* above drawer/scrim */
  }

  /* Make sure buttons remain clickable */
  .header-controls,
  .header-controls * {
    pointer-events: auto;
  }

  /* Reduce size for mobile */
  .theme-toggle,
  .pot-toggle {
    width: 42px;
    height: 42px;
  }

  /* Add space in header so text doesn't overlap */
  .site-header {
    padding-right: 4.5rem;
  }
}






/* =============================================================
   MUD — One-page additions (mobile-first)
   Palette: #b2b3af (bg light), #676964 (lines), #000000 (ink)
   ============================================================= */

/* Theme tokens + dark mode */
:root{
  --mud-bg:#b2b3af;
  --mud-ink:#000000;
  --mud-line:#676964;
}
html.is-dark{
  --mud-bg:#000000;
  --mud-ink:#b2b3af;
  --mud-line:#b2b3af;
}

/* Base overrides (non-destructive; later in cascade) */
html,body{ background:var(--mud-bg); color:var(--mud-ink); }
a{ color:var(--mud-ink); }
a:hover,a:focus{ opacity:.85; }

/* Sections */
.mud-section{ padding:3rem 1rem; }
@media (min-width:900px){ .mud-section{ padding:1rem 4rem; } }
.mud-section-title{ font-size:1.5rem; letter-spacing:.06em; margin:0 0 1rem; font-family: "Courier New",ui-monospace,monospace; }

/* Framed container (becomes a container for sizing the circle) */
.mud-frame{
  border:2px solid var(--mud-line);
  position:relative;
  padding:1rem;
  max-width:min(92vw, 1100px);
  margin-inline:auto;
  /* Container queries: tie circle sizing to frame width */
  container-type:inline-size;
}

/* INTRO */
.mud-intro .mud-title{
  font-family:"Courier New",ui-monospace,monospace;
  font-weight:600; letter-spacing:.06em; margin:0 0 .25rem;
}
.mud-intro .mud-meta{
  font-family:"Courier New",ui-monospace,monospace;
  opacity:.85; margin:0 0 1rem;
}
.mud-intro-body{
  display:grid; grid-template-columns:1fr; gap:1rem;
}
@media (min-width:900px){
  .mud-intro-body{
    grid-template-columns:1fr 1fr; align-items:center; gap:3rem;
  }
}



.mud-circle, .mud-card-circle{
  aspect-ratio:1/1;
  border-radius:50%;
  background-size:cover; background-position:center;
  position:relative;
  border:1px solid var(--mud-line);
  /* Container query units */
  width:clamp(240px, 68cqi, 560px);!important;
  margin-left:calc(-1 * clamp(32px, 7cqi, 160px));
  /* creates a “cut-out” so the circle appears half outside the frame,
     without overlapping adjacent content */
  box-shadow:0 0 0 8px var(--mud-bg);
  margin-bottom:1rem;
}

/* =========================================
   Responsive: center the circle on small screens
   ========================================= */
@media (max-width: 768px) {
  .mud-circle,
  .mud-card-circle {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: clamp(160px, 70vw, 75%); /* smaller, fits viewport */
    box-shadow: 0 0 0 4px var(--mud-bg); /* optional smaller halo */
  }
}


/* Intro text column */
.mud-text{ 
	max-width:100%; 
	font-family:"Courier New",ui-monospace,monospace;
	max-height: 500px;
	overflow:scroll;
}
@media (min-width:900px){ .mud-text{ justify-self:end; } }

/* === Intro: put title+date outside the frame but aligned left === */

/* The frame stays the sizing anchor (container queries etc.) */
.mud-intro .mud-frame{
  position: relative;
  /* give a little room above because the heading now sits outside */
  margin-top: 4.5rem;
}

/* Visually lift the heading outside the frame and align to its left edge */
.mud-intro .mud-intro-head{
  position: absolute;
  left: 0;             /* align to the frame's left edge */
  bottom: 100%;        /* place it just above the frame */
  transform: translateY(-0.75rem); /* small gap above the frame line */
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background: transparent;
}

/* Keep your existing typographic vibe */
.mud-intro .mud-title{
  font-family:"Courier New", ui-monospace, monospace;
  font-weight:600; letter-spacing:.06em; margin:0;
}
.mud-intro .mud-meta{
  font-family:"Courier New", ui-monospace, monospace;
  opacity:.9; margin:0;
}

/* Make sure circles don't overlap the lifted header */
.mud-circle{ z-index: 1; }

/* Desktop: add a touch more breathing space above the frame */
@media (min-width:900px){
  .mud-intro .mud-frame{ margin-top: 5.5rem; }
  .mud-intro .mud-intro-head{ transform: translateY(-1rem); }
}


/* Big VENUE label */
.mud-venuelabel{
  position:absolute; right:.5rem; bottom: -0.5rem; transform:translateY(100%);
  font-family:"Courier New",ui-monospace,monospace;
 font-size: clamp(1rem,3vw,2rem); letter-spacing:.08em; opacity:.9;
}
@media (min-width:900px){ .mud-venuelabel{ right: -0.5rem; } }


/* ================================================
   MUD THEME — CLEAN UNIFIED GRID + CARD SYSTEM
   ================================================ */

/* ----------------------------------------------
 *  GLOBAL POST GRIDS
 * ----------------------------------------------- */

.mud-cards,
.mud-grid {
  list-style: none;
  padding: 0;
  margin: 2rem auto 0;
  display: grid;
  gap: 2rem;
  max-width: min(92vw, 1100px);
}

.mud-cards {
  grid-template-columns: 1fr; /* mobile: single column */
}

/* 2 columns for archives / search / index, etc. */
@media (min-width: 900px) {
  .mud-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Program or artist grids may use 3 columns if needed */
@media (min-width: 1200px) {
  .mud-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each card item uses container units for circle sizing */
.mud-cards > li {
  container-type: inline-size;
}

/* ----------------------------------------------
 *  CARD FRAME + CONTENT
 * ----------------------------------------------- */

.mud-card-frame {
  border: 2px solid var(--mud-line);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 2rem;
  position: relative;              /* keep everything inside */
  font-family: "Courier New", ui-monospace, monospace;
  height: 100%;                    /* equal height in grid rows */
  box-sizing: border-box;
}

/* Circle on the left — background image */
.mud-card-circle {
  grid-column: 1;
  grid-row: 1 / span 2;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--mud-line);
  box-shadow: 0 0 0 8px var(--mud-bg);
  width: clamp(180px, 44cqi, 280px);
  margin-left: calc(-1 * clamp(16px, 4vw, 120px));
  flex-shrink: 0;
}

/* Text on the right */
.mud-card-title,
.mud-card-text {
  grid-column: 2;
  text-align: left;
  width: 100%;
}

/* Title — wrap properly inside frame */
.mud-card-title {
  margin: 0 0 .5rem;
  font-weight: 600;
  letter-spacing: .04em;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.25;
  font-family: inherit;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

/* Excerpt — truncated to 4 lines to prevent tall cards */
.mud-card-text {
  opacity: .9;
  max-width: 45ch;
  font-family: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 5;          /* number of visible lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  margin-top: .25rem;
}

/* Optional hover animation */
.mud-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .2s ease;
}
.mud-card-link:hover .mud-card-frame {
  transform: scale(1.01);
}



/* ----------------------------------------------
 *  PROGRAM SECTION (inherits from global styles)
 * ----------------------------------------------- */

#program .mud-section-title,
#program .mud-tablist,
#program .mud-tabpanel,
#program .mud-cards {
  max-width: min(92vw, 1100px);
  margin-left: auto;
  margin-right: auto;
  font-family: "Courier New", ui-monospace, monospace;
}

/* Tabs */
.mud-tablist {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.mud-tab {
  background: transparent;
  color: var(--mud-ink);
  border: 1px solid var(--mud-line);
  padding: .45rem .7rem;
  letter-spacing: .04em;
}
.mud-tab.is-active {
  outline: 2px solid var(--mud-ink);
}
.mud-tabpanel {
  display: none;
}
.mud-tabpanel.is-active {
  display: block;
}

/* ----------------------------------------------
 *  RESPONSIVE FIXES
 * ----------------------------------------------- */
@media (max-width:700px){
  /* Stack content inside each card */
  .mud-card-frame{
    grid-template-columns: 1fr;   /* one column instead of auto 1fr */
    gap: 1.25rem;
    text-align: center;
    padding: 1.5rem 1rem;
  }

  /* Circle on top, centered */
  .mud-card-circle{
    grid-column: 1;
    grid-row: 1;
    width: clamp(180px, 70vw, 320px);
    margin: 0 auto .75rem;
    margin-left: 0;               /* cancel negative offset */
  }

  /* Title + text underneath */
  .mud-card-title,
  .mud-card-text{
    grid-column: 1;
    text-align: center;
    max-width: 90%;
    margin-inline: auto;
    margin-bottom: .5rem;
  }
}


/* ----------------------------------------------
 *  FALLBACKS
 * ----------------------------------------------- */

@supports not (container-type: inline-size) {
  .mud-card-circle {
    width: clamp(200px, 44vw, 320px);
    margin-left: calc(-1 * clamp(16px, 4vw, 120px));
  }
}

/* ----------------------------------------------
 *  OPTIONAL: HIGHLIGHT ACTIVE / NOW CARDS
 * ----------------------------------------------- */
.mud-template.is-now .mud-card-frame {
  border-color: var(--mud-accent, currentColor);
  box-shadow: 0 0 12px var(--mud-accent, currentColor);
}


/*-------------------------------------------------------
 * 	Artist Layout
 * -----------------------------------------------------*/

.mud-meta {
  font-family: "Courier New", ui-monospace, monospace;
  margin-bottom: 1rem;
}

.mud-project-divider {
  border: 0;
  border-top: 1px solid var(--mud-line);
  margin: 2rem 0 1rem;
}

.mud-project-bio {
  font-family: "Courier New", ui-monospace, monospace;
  line-height: 1.4;
  opacity: .9;
}


/* Projects shown under a single post/event frame */
.mud-projects-under {
  max-width: min(92vw, 1100px);
  margin: 2.5rem auto 0;    /* space under the frame + centred */
}

/* Tighten the nested section from [mud_projects] */
.mud-projects-under > section {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0;                /* let .mud-projects-under handle centering */
}


/*----------------------------------------------------
 * 	 Partners 
 * ----------------------------------------------------*/


.mud-logos{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.mud-logo img{ max-width:100%; height:auto; display:block; filter:grayscale(100%) contrast(110%); }
.mud-logo-fallback{ border:1px solid var(--mud-line); padding:.75rem; display:block; text-align:center; }

/* Partners: tiny, uniform logos (~20px), centered in a grid */
#partners .mud-logos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:1.5rem 2rem;
  align-items:center;
}
#partners .mud-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  /* optional breathing room for touch / visual consistency */
  padding:.5rem;
}
#partners .mud-logo img{
  max-height:80px;   /* cap height */
  max-width:150px;    /* cap width (prevents tall-thin logos from dominating) */
  height:auto;
  width:auto;
  object-fit:contain;
  display:block;
  filter:grayscale(100%) contrast(110%); /* keep your existing vibe */
}

/* Theme toggle button */
.mud-toggle{
  position:fixed; right:1rem; top:1rem; z-index:10;
  background:transparent; border:1px solid var(--mud-line);
  color:var(--mud-ink); padding:.5rem .6rem; border-radius:999px;
}

/* --------- Progressive enhancement fallback ----------
   If a browser doesn’t support container queries,
   this keeps layouts sensible (uses viewport widths). */
@supports not (container-type: inline-size){
  .mud-frame{ max-width:min(92vw, 1100px); }
  .mud-circle, .mud-card-circle{
    width:clamp(240px, 68vw, 560px);
    margin-left:calc(-1 * clamp(32px, 22vw, 160px));
  }
  .mud-card-circle{
    width:clamp(200px, 44vw, 300px);
    margin-left:calc(-1 * clamp(28px, 18vw, 120px));
  }
}

/* =========================================
   VENUES — FINAL PASS
   ========================================= */

#venues {
  scroll-margin-top: 110px;
}

.mud-venues-intro {
  background: var(--page-bg);
  color: var(--page-fg);
  font-family: "Courier New", ui-monospace, monospace;
  padding: 3rem 1rem;
}

/* title above frame */
.mud-venues-intro .mud-venues-title {
  max-width: min(92vw, 1100px);
  margin: 0 auto 1rem;
  font-size: 1.2rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* FRAME
   → left col is a fixed pixel width so the circle can never be “a dot”
*/
.mud-venues-intro .mud-venues-frame {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr); /* ← key line */
  gap: 25%;
  align-items: flex-start;
  max-width: min(92vw, 1100px);
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.05);
}

html[data-theme="light"] .mud-venues-intro .mud-venues-frame {
  border-color: rgba(0,0,0,.2);
  background: rgba(255,255,255,.5);
}

/* we had an old absolute-position wrapper in earlier versions → kill it */
.mud-venues-intro .mud-venues-circle {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  display: flex;
  justify-content: center;
}

/* column that holds the circle */
.mud-venues-intro .mud-venues-media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 360px; /* ← matches grid left col */
}

/* =========================================
   THE CIRCLE STACK (4 levels)
   we force ALL of them to the same size
   ========================================= */

.mud-venues-map-wrap,
.mud-venues-map-circle {
  width: 100% !important;
  max-width: 360px;
}

/* actual circle */
.mud-venues-map-circle {
  position: relative !important;
  border-radius: 9999px !important;
  overflow: hidden !important;
  /* ignore shortcode aspect ratio */
  aspect-ratio: auto !important;
  border: 1px solid rgba(255,255,255,.2);
}

/* keep it square */
.mud-venues-map-circle::before {
  content: "";
  display: block;
  padding-top: 100%; /* 1:1 */
}

/* iframe fills the circle */
.mud-venues-map-circle iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

html[data-theme="light"] .mud-venues-map-circle {
  border-color: rgba(0,0,0,.2);
}

/* right column (list) */
.mud-venues-intro .mud-venues-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mud-venues-intro .mud-venues-heading {
  margin: 0;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .04em;
}

.mud-venues-intro .venues-list {
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.4;
}

.mud-venues-intro .venues-list li {
  margin-bottom: .35rem;
}

/* =========================================
   TABLET
   ========================================= */
@media (max-width: 1023px) {
  .mud-venues-intro .mud-venues-frame {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2.5rem;
    padding: 2rem 1.5rem;
  }

  .mud-venues-intro .mud-venues-media,
  .mud-venues-map-wrap,
  .mud-venues-map-circle {
    max-width: 300px;
  }
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 720px) {
  #venues {
    scroll-margin-top: 140px;
  }

  .mud-venues-intro {
    padding: 2.5rem 1rem 3rem;
  }

  .mud-venues-intro .mud-venues-frame {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    max-width: 100%;
    overflow: visible;
  }

  .mud-venues-intro .mud-venues-media {
    max-width: none;
    justify-content: center;
  }

  .mud-venues-map-wrap,
  .mud-venues-map-circle {
    max-width: min(78vw, 320px);
    margin: 0 auto;
  }
}



/* =========================
   SCHEDULE SECTION
   ========================= */

/* === Schedule grid (front page) — mockup look === */
.mud-schedule-grid .mud-section-title{
  font-family: "Courier New", ui-monospace, monospace;
  max-width: min(92vw, 1100px);
  margin-left:auto; margin-right:auto;
}

/* 4-column day grid on desktop, 2 on tablets, 1 on phones */
.mud-sched-wrap{
  max-width: min(92vw, 1100px);
  margin: 1rem auto 0;
  display: grid;
  gap: 2rem clamp(1rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  font-family: "Courier New", ui-monospace, monospace;
}
@media (min-width: 720px){ .mud-sched-wrap{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .mud-sched-wrap{ grid-template-columns: repeat(4, 1fr); } }

/* Day heading (monospace, all-caps) */
.mud-sched-day{
  margin: 0 0 .75rem;
  font-family: "Courier New", ui-monospace, monospace;
  letter-spacing: .06em;
  font-weight: 700;
  text-transform: none;
}

/* Cards stack */
.mud-sched-cards{ list-style:none; margin:0; padding:0; display:grid; gap:1.25rem; }

/* Card frame */
.mud-sched-card{
  border: 2px solid var(--mud-line);
  padding: 1rem 1.1rem 1.1rem;
  min-height: 110px;
  display: grid;
  gap: .25rem;
  background: transparent;
}

/* Typographic hierarchy inside a card */
.mud-sched-time{
  font-family:"Courier New", ui-monospace, monospace;
  font-size: 0.9rem;
  opacity:.9;
}
.mud-sched-title{
  font-weight: 700;
  letter-spacing:.02em;
}
.mud-sched-venue{
  font-family:"Courier New", ui-monospace, monospace;
  opacity:.8;
}

/* “Happening now!” highlight (grey box in dark mode mockup) */
.mud-sched-card.is-now{
  background: #b2b3af;
  border-color: #b2b3af;
  color: #000;
}
html:not(.is-dark) .mud-sched-card.is-now{
  /* in light mode keep readable but still visible */
  background: #67696415;  /* very light tint */
  border-color: var(--mud-line);
  color: var(--mud-ink);
}


/* =========================
   ALIGN SCHEDULE SECTION
   ========================= */

/* Match the Intro/Program container width & centering */
#schedule .mud-section-title,
#schedule .mud-tablist,
#schedule .mud-tabpanel,
#schedule .mud-list {
  max-width: min(92vw, 1100px);
  margin-left: auto;
  margin-right: auto;
}

/* States */
/* 1) Ongoing (and also used by “is-now”) — strong highlight like mockup */
.mud-sched-card.is-ongoing,
.mud-sched-card.is-now{
  background: #b2b3af;
  border-color: #b2b3af;
  color: #000;
}
html:not(.is-dark) .mud-sched-card.is-ongoing,
html:not(.is-dark) .mud-sched-card.is-now{
  background: #67696415;  /* light-mode subtle tint */
  border-color: var(--mud-line);
  color: var(--mud-ink);
}

/* 2) Happening (festival days) — medium highlight in dark; gentle tint in light */
.mud-sched-card.is-happening:not(.is-now):not(.is-ongoing){
  background: transparent;
  border-color: #676964;
  color: #fff;
}
html:not(.is-dark) .mud-sched-card.is-happening:not(.is-now):not(.is-ongoing){
  background: #67696420;
  border-color: var(--mud-line);
  color: var(--mud-ink);
}

/* 3) After — neutral frame (or dim slightly if you like) */
.mud-sched-card.is-after{
  /* keep framed look; uncomment to dim:
  opacity:.85;
  */
}

/* === Schedule states === */
/* Ongoing (multi-day and active now) and explicit "now" */
.mud-sched-card.is-ongoing,
.mud-sched-card.is-now{
  background: #b2b3af;
  border-color: #b2b3af;
  color: #000;
}
html:not(.is-dark) .mud-sched-card.is-ongoing,
html:not(.is-dark) .mud-sched-card.is-now{
  background: #67696415;
  border-color: var(--mud-line);
  color: var(--mud-ink);
}

/* Happening (festival days) */
.mud-sched-card.is-happening:not(.is-now):not(.is-ongoing){
  background: #676964;
  border-color: #676964;
  color: #fff;
}
html:not(.is-dark) .mud-sched-card.is-happening:not(.is-now):not(.is-ongoing){
  background: #67696420;
  border-color: var(--mud-line);
  color: var(--mud-ink);
}

/* After (starts after festival) — neutral frame */
.mud-sched-card.is-after{}

/* Past (finished) — slightly dim */
.mud-sched-card.is-past{
  opacity: .75;
}




/* Optional: add a frame around each active day (uncomment if wanted) */

#schedule .mud-tabpanel.is-active {
  border: 2px solid var(--mud-line);
  padding: 1.25rem;
}


.mud-venues-map-wrap{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}

.mud-venues-map-title{
  margin:0;
  font-weight:600;
  color:var(--page-fg, #fff);
}

.mud-venues-map-circle{
  --circle-size: 360px;
  width: min(100%, var(--circle-size));
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  background: #000;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

/* kill any intrinsic height and force fill */
.mud-venues-map-circle iframe{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  border:0;
  display:block;
}

html[data-theme="light"] .mud-venues-map-circle{
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
  background:#fff;
}

@media (max-width:600px){
  .mud-venues-map-circle{
    --circle-size: 300px;
  }
}

/* Wrapper (optional title etc.) */
.mud-venues-map-wrap{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}

/* The actual circle */
.mud-venues-map-circle{
  /* responsive-ish: min 240, max 420 */
  --circle-size: clamp(clamp(280px, 45vw, 360px));
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;           /* IMPORTANT:  */
  background: #000;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

/* Make the iframe fill the circle */
.mud-venues-map-circle iframe{
  position: absolute;
  inset: 0;                     /* top:0; right:0; bottom:0; left:0 */
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* Light theme tweak */
html[data-theme="light"] .mud-venues-map-circle{
  background:#fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.08);
}

/* wrapper */
.mud-venues-map-wrap{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* force circle even if WP adds <p> or <figure> */
.mud-venues-map-wrap .mud-venues-map-circle,
.mud-venues-map-circle{
  border-radius:9999px !important;
  overflow:hidden !important;
  position:relative !important;
}

/* make sure iframe sits inside */
.mud-venues-map-wrap .mud-venues-map-circle iframe,
.mud-venues-map-circle iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
}



/* Make entire card clickable */
.mud-card-link{ display:block; color:inherit; text-decoration:none; }
.mud-card-link:focus-visible{ outline:2px solid var(--mud-ink); outline-offset:4px; }

.mud-card-link:hover .mud-card-title{ text-decoration: underline; }
.mud-card-link:hover .mud-card-frame{ border-color: var(--mud-ink); }

/* Ensure the circle still sits above the frame edge 
.mud-card-frame{ position:relative; transition: border-color .2s ease; }*/


/* =========================================================
   PROGRAM — HARD MOBILE OVERRIDE (stack, center, auto-height)
   ========================================================= 


  /* 2) Circle centered on top, no left bite  */
  #program .mud-card-circle{
    width:clamp(180px, 7vw, 360px) !important;
    margin:0 auto 1rem !important;
    margin-left:0 !important;     /* cancel earlier negative offset */
    justify-self:center !important;
    align-self:center !important;
  }

  /* 3) Title/meta/extract beneath, full width */
  #program .mud-card-title,
  #program .mud-card-text,
  #program .mud-card-meta{
    grid-column:auto !important;
    max-width:90% !important;
    text-align:center !important;
    margin:0 0 .5rem !important;
  }
}
/*------------------------------------------------
 * 	ALIGNMENTS
 * -----------------------------------------------*/


/* Wrapper aligns the outside heading to the frame's left edge */
.mud-wrap{
  position: relative;
  max-width: min(92vw, 1100px);
  margin: 0 auto 3rem;

}

/* Force title and frame to share the same left boundary */
.mud-template > .mud-wrap {
  max-width: min(92vw, 1100px);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Make sure the frame follows the same container width */
.mud-template > .mud-wrap > .mud-frame {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Align the title with the frame’s inner padding (1rem) */
.mud-intro-head--outside {
  position: relative;
  margin: 0 0 1rem 0;
  padding-left: 0rem;   /* same as .mud-frame padding */
  padding-right: 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-family: "Courier New",ui-monospace,monospace;
  top: 2rem;
}



@media (min-width:900px){
  .mud-intro-head--outside{ transform: translateY(-1rem); }
}


/* Make room below the outside header so the frame doesn't collide 
.mud-wrap .mud-frame{
  margin-top: 4.5rem;
}
@media (min-width:900px){
  .mud-wrap .mud-frame{ margin-top: 5.5rem; }
}

/* =========================================
   MUD NAVIGATION — responsive SVG buttons
   ========================================= */

/* Sizing variables — scale smoothly with screen */
:root {
  --nav-size:   clamp(44px, 7vmin, 64px);   /* button diameter */
  --nav-icon:   clamp(14px, 2.8vmin, 24px); /* triangle size */
  --nav-border: clamp(1.5px, 0.3vmin, 2px); /* outline thickness */
  --nav-gap:    clamp(8px, 1.5vmin, 18px);  /* gap from frame edge */

  /* Pot look */
  --pot-fill:   var(--mud-bg);                       /* solid interior, follows theme */
  --pot-edge:   color-mix(in oklab, var(--mud-ink) 32%, transparent);
  --pot-accent: var(--mud-accent, #ccc);
  --pot-glow:   color-mix(in oklab, var(--pot-accent) 36%, transparent);
}

/*  .dark class or data-theme, the fill/ink will already swap via vars.
   This block is only needed if your variables don't change automatically. */
:root.dark,
[data-theme="dark"] {
  /* optional: slightly stronger edge on dark */
  --pot-edge:   color-mix(in oklab, var(--mud-ink) 55%, transparent);
}

/* container to hold the buttons relative to the frame */
.mud-post-nav {
  position: absolute;
  inset: 0;
  pointer-events: none; /* only buttons clickable */
  z-index: 10;
}

/* ===== Base button (unified) ===== */
.mud-nav {
  position: absolute;
  top: 50%;
  /* transform pipeline via variable to avoid hover “bounce” */
  --nav-t: translateY(-50%);
  --knob-rot: 0deg;
  transform: var(--nav-t) rotate(var(--knob-rot));
  transform-origin: center;

  width: var(--nav-size);
  height: var(--nav-size);
  display: grid;
  place-items: center;

  /* Solid interior fill (pot) */
  background: var(--pot-fill);
  border-radius: 50%;

  /* Replace flat border with edge + bevels */
  border: 0;
  box-shadow:
    /* outer ring/edge */
    0 0 0 var(--nav-border) var(--pot-edge),
    /* subtle inner bevels */
    inset 0 2px 4px color-mix(in oklab, black 10%, transparent),
    inset 0 -3px 6px color-mix(in oklab, white 18%, transparent);

  color: var(--mud-ink);
  text-decoration: none;
  pointer-events: auto;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  z-index: 11;
  margin: 0; /* remove misalignment */
}

/* Knurled rim (edge ticks), masked to the rim only */
.mud-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in oklab, var(--pot-edge) 65%, transparent) 0 3deg,
    transparent 3deg 9deg
  );
  mask: radial-gradient(circle, transparent 62%, black 63%);
  pointer-events: none;
  filter: blur(.2px);
}

/* LED indicator */
.mud-nav::after {
  content: "";
  position: absolute;
  top: 14%;
  left: 50%;
  width: calc(var(--nav-size) * 0.10);
  height: calc(var(--nav-size) * 0.10);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pot-accent) 0 45%, var(--pot-glow) 46% 100%);
  opacity: 0; /* off by default */
  transition: opacity .2s ease;
  pointer-events: none;
}

/* SVG arrow stays above the cap */
.mud-nav svg {
  position: relative;
  z-index: 1;
  width: var(--nav-icon);
  height: var(--nav-icon);
  display: block;
  fill: currentColor;
}

/* Hover/focus: light up LED + tiny “turn” */
.mud-nav:hover,
.mud-nav:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 var(--nav-border) var(--pot-edge),
    inset 0 2px 6px color-mix(in oklab, black 14%, transparent),
    inset 0 -3px 8px color-mix(in oklab, white 24%, transparent);
  transform: var(--nav-t) rotate(var(--knob-rot)) scale(1.05);
}
.mud-nav:hover::after,
.mud-nav:focus-visible::after { opacity: .9; }

/* Directional micro-rotation */
.mud-nav--next:hover,
.mud-nav--next:focus-visible { --knob-rot: 8deg; }
.mud-nav--prev:hover,
.mud-nav--prev:focus-visible { --knob-rot: -8deg; }

/* ===== Positioning ===== 
/* Outside frame edges on desktop/tablet */
.mud-nav--prev {
  left: calc(-1 * (clamp(32px, 5cqi, 160px) + var(--nav-gap) + (var(--nav-size) / 2)));
}
.mud-nav--next {
  right: calc(-1 * (var(--nav-gap) + (var(--nav-size) / 2)));
}

/* Fallback when container units aren't supported */
@supports not (width: 1cqi) {
  .mud-nav--prev {
    left: calc(-1 * (32px + var(--nav-gap) + (var(--nav-size) / 2)));
  }
}

/* ===== Small screens ===== */
@media (max-width: 900px) {
  .mud-frame {
    position: relative;
    overflow: visible;
    z-index: 0;
  }
  .mud-nav {
    top: 30vh;              /* your chosen vertical anchor on mobile */
    --nav-t: translateY(0); /* keep transforms consistent (no jump)  */
  }
  .mud-nav--prev { left: 0.25rem; }
  .mud-nav--next { right: 0.25rem; }
}

/* Reduced motion  */
@media (prefers-reduced-motion: reduce) {
  .mud-nav,
  .mud-nav::after { transition: none !important; }
  .mud-nav { transform: var(--nav-t); } /* no rotation/scale */
}

/* ===== POT SPIN — press-and-spin (no JS) ===== */
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* 1) Make spin part of the transform pipeline everywhere */
.mud-nav{
  --spin: 0deg;
  transform: var(--nav-t) rotate(var(--knob-rot)) rotate(var(--spin));
  transition:
    border-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    /* animate the custom property */
    --spin 600ms cubic-bezier(.25,.8,.25,1);
}

/* 2) Ensure HOVER keeps the spin in the transform (no bounce) */
.mud-nav:hover,
.mud-nav:focus-visible{
  transform: var(--nav-t) rotate(var(--knob-rot)) rotate(var(--spin)) scale(1.05);
}

/* 3) Rim + LED use the spin, and LED orbits from center */
.mud-nav::before{
  transform: rotate(var(--spin));
  transform-origin: 50% 50%;
}
.mud-nav::after{
  top: 50%; left: 50%;                 /* override any earlier 14% rule */
  transform:
    translate(-50%, -50%)
    rotate(var(--spin))
    translateY(calc(-0.36 * var(--nav-size)));
  transform-origin: 50% 50%;
}

/* 4) Spin while pressed */
.mud-nav:active { --spin: 360deg; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mud-nav{
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
  }
}




/* Make sure arrows never overlap the lifted header */
.mud-post-nav{ z-index: 3; }

/* Visually hidden utility for a11y */
.vh{
  position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* RESET any previous fixed/overlay rules for the credit */
.site-footer,
.site-info{
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* Sticky-footer layout (footer sits at bottom when page is short,
   and scrolls normally on long pages) */
#page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-footer{
  margin-top: auto;          /* push footer to the bottom */
  display: flex;
  justify-content: flex-end; /* align credit to the right */
  padding: .75rem 1rem;
  box-sizing: border-box;
}

/* Style of the credit (no overlay) */
.site-info{
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--mud-ink);
  opacity: .85;
  background: transparent;          /* no box behind; no overlap look */
  border: 0;                        /* remove the badge border */
	margin-top: 5rem;
}
.site-info a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Do NOT move the VENUE label; just add space AFTER the article */
.mud-template{
  margin-bottom: 1rem;   /* space between the page/post and the footer */
}
@media (min-width:900px){
  .mud-template{ margin-bottom: 1rem; }
}

/* Keep footer at the bottom on short pages without overlapping content */
#page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-footer{ margin-top: auto; }


/* Simple page (no featured image): one-column text in the frame */
.mud-template--simple .mud-frame { padding: 1.25rem; }
@media (min-width:900px){
  .mud-template--simple .mud-frame { padding: 1.75rem; }
}
.mud-template--simple .mud-intro-body { display: block; } /* not used but safe */
.mud-template--simple .mud-post-nav,
.mud-template--simple .mud-circle,
.mud-template--simple .mud-venuelabel { display: none !important; }

/*menu*/
.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden!important;white-space:nowrap!important}

/* Mobile: drawer scrolls, with extra space at bottom */
@media (max-width: 900px) {

  /* Make the whole drawer scrollable */
  .primary-nav {
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 4rem;   /* space after the last item */
  }

  /* Ensure the inner menu + submenus don't become scroll containers */
  .primary-nav .menu,
  .primary-nav .menu ul {
    max-height: none;
    overflow: visible;
    padding-bottom: 0;
  }
}



/* =========================================
   SHORTCODE PROJECT CARDS INSIDE POSTS
   Show: Image + Title + Artist
   Hide: Everything else
   ========================================= */

/* Wrap cards in one clean column inside posts */
.single-post .entry-content .mud-cards,
.single-mud_event .entry-content .mud-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 48rem;      /* fits in your Perma/Soils right-side frame */
  margin: 2rem auto 0;
}

/* Card layout: image left, text right (desktop) */
.single-post .entry-content .mud-card,
.single-mud_event .entry-content .mud-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 0;
  border: none;          /* optional: remove boxes */
  background: none;
}

/* ---- IMAGE ---- */
.single-post .entry-content .mud-card .mud-card-image,
.single-mud_event .entry-content .mud-card .mud-card-image {
  flex-shrink: 0;
  width: 150px;          /* adjust as you wish */
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
}

/* ---- TITLE ---- */
.single-post .entry-content .mud-card .mud-card-title,
.single-mud_event .entry-content .mud-card .mud-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
}

/* ---- ARTIST NAME ---- */
.single-post .entry-content .mud-card .mud-card-author,
.single-mud_event .entry-content .mud-card .mud-card-author {
  font-size: 1rem;
  opacity: 0.8;
  margin: 0;
}

/* ---- HIDE EVERYTHING ELSE ---- */
/* =========================================
   SHORTCODE CARDS INSIDE POSTS:
   keep ONLY title + artist
   (hide venue, time, desc, card text)
   ========================================= */

.single-mud_event .entry-content .mud-card .mud-sched-venue,
.single-mud_event .entry-content .mud-card .mud-sched-time,
.single-mud_event .entry-content .mud-card .mud-sched-desc,
.single-mud_event .entry-content .mud-card .mud-card-text,
.single-post      .entry-content .mud-card .mud-sched-venue,
.single-post      .entry-content .mud-card .mud-sched-time,
.single-post      .entry-content .mud-card .mud-sched-desc,
.single-post      .entry-content .mud-card .mud-card-text {
  display: none !important;
}



/* =========================================
   MOBILE LAYOUT
   ========================================= */
@media (max-width: 700px) {
  .single-post .entry-content .mud-card,
  .single-mud_event .entry-content .mud-card {
    flex-direction: column;
    text-align: center;
  }

  .single-post .entry-content .mud-card .mud-card-image,
  .single-mud_event .entry-content .mud-card .mud-card-image {
    width: 200px;
    height: 200px;
  }
}

/* Projects section title + description container */
.mud-section-head{
  max-width: min(92vw, 1100px);
  margin: 0 auto 1.5rem;
  text-align: center;
}

/* Description under the section title */
.mud-term-description{
  margin-top: .5rem;
  max-width: 100ch;
  margin-left: auto;
  margin-right: auto;
  font-family: "Courier New", ui-monospace, monospace;
}

/* Ensure project sections don't hide under the fixed header */
#projects,
[id^="projects-"] {
  scroll-margin-top: 110px; /* tweak to your header height */
}