/* Amaranth UNM — Restrained Dark Theme with UNM Brand Colors */

/* Fonts loaded via <link> in header-default.html:
   Space Grotesk (headings), Inter (body), Asimovian (hero title only) */

/*****************************************************
COLOR PALETTE — UNM Brand + Amaranth Plant Family
*****************************************************/
:root {
  /* UNM Primary */
  --unm-cherry: #ba0c2f;
  --unm-turquoise: #007a86;
  --unm-turquoise-light: #2ab0be;  /* brightened for text/hover on dark bg */
  --unm-silver: #a7a8aa;
  --unm-lobo-gray: #63666a;
  --unm-lobo-gray-dark: #2a2d31;

  /* UNM Secondary — Southwest */
  --unm-high-noon: #ffc600;
  --unm-sandia-sunset: #ed8b00;
  --unm-terra: #c05131;
  --unm-mesa: #d6a461;

  /* Amaranth Plant Color Family */
  --amaranth: #e52b50;           /* vivid base — standard amaranth */
  --amaranth-bright: #f0607a;    /* lightened for heading text on dark bg */
  --amaranth-red: #cf1b24;       /* deeper crimson — borders, structural */
  --amaranth-purple: #9f2b68;    /* deep magenta-purple — decorative */
  --amaranth-muted: #b87098;     /* muted rose-purple — h4, subtle accents */
  --amaranth-pink: #f19cbb;      /* soft warm pink — hover, highlights */

  /* Semantic */
  --primary: var(--unm-turquoise);
  --surface: #3a3d40;
  --surface-hover: #4a4d51;
  --text-primary: #e8e8e8;
  --text-secondary: #b8b8b8;
  --text-muted: #888;
  --border-color: #3a3a3a;

  /* Shadows — neutral, no color tint */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --transition: all 0.25s ease;
}


/*****************************************************
BASE
*****************************************************/
* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 17px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--unm-lobo-gray-dark) !important;
  color: var(--text-primary);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
}


/*****************************************************
TYPOGRAPHY
*****************************************************/
h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: 0.01em;
}

h1 {
  font-size: clamp(1.8rem, 4.5vw, 2.5rem);
  color: var(--unm-cherry);
  margin-top: 3rem;
  margin-bottom: 0.8rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.4rem, 2.85vw, 1.95rem);
  color: var(--amaranth-bright);
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 500;
  color: var(--amaranth);
  margin-top: 2rem;
  margin-bottom: 0.7rem;
}

h4 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  color: var(--amaranth-muted);
  margin-top: 1.75rem;
  margin-bottom: 0.65rem;
}

h5 {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

h6 {
  font-size: clamp(0.875rem, 1.25vw, 1.125rem);
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

strong, b {
  color: var(--text-primary);
  font-weight: 600;
}


/*****************************************************
LAYOUT
*****************************************************/
.container {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Prose containers (direct children of body) are narrower for readability.
   Feature blocks live inside .section-alt > .container, which is NOT a direct
   child of body, so they stay at 60rem. */
body > .container {
  max-width: 52rem;
}

/* Homepage intro paragraphs — larger lead text.
   Targets the intro container specifically: it's the only .container
   that has .showcase-strip as a subsequent sibling. */
.container:has(~ .showcase-strip) p {
  font-size: 1.15rem;
  line-height: 1.65;
}

/* Hero tier: flex centering in viewport */
.header-studio--hero {
  display: flex;
  align-items: flex-start;
  padding-top: 22vh;
  padding-bottom: 0;
}

.header-studio--hero .header-studio-content {
  height: auto;
}

/* Reduce gap between studio header and first content */
.header-studio ~ .container h1:first-child {
  margin-top: 1rem;
}

.header-studio--section ~ .container h2:first-child {
  margin-top: 1.5rem;
}

.header-studio--banner ~ .container h2:first-child {
  margin-top: 1.5rem;
}

.section { padding: 4rem 0; }
.section-title { text-align: center; margin-bottom: 3rem; }

/* Full-width alternating section backgrounds for visual rhythm */
.section-alt {
  background-color: var(--surface);
  margin-top: 3rem;
  padding: 5rem 0 2rem;
}

.section-alt h2 {
  color: var(--amaranth); /* slightly darker than --amaranth-bright; holds weight on lighter bg */
}

.section-alt h2:first-child,
.section-alt .container > h2:first-child {
  margin-top: 0;
}

.section-alt h3 {
  margin-top: 2.5rem;
}

.section-alt h3:first-of-type {
  margin-top: 1rem;
}

/* Feature blocks — image + text rows with alternating layout */
.feature-block {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 2.5rem 0;
  border-top: 2px solid var(--border-color);
}

.feature-block:first-of-type {
  border-top: none;
}

.feature-block-reverse {
  flex-direction: row-reverse;
}

.feature-block-image {
  flex: 0 0 45%;
  height: 280px;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-lg);
}

/* Woodcut filter — subtle warmth for European woodcuts */
.feature-block-image.filter-woodcut {
  filter: sepia(0.2);
}

.feature-block-text {
  flex: 1;
}

.feature-block-text h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.6rem);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: -0.0em;
  margin-top: 0;
}

/* Showcase strip — homepage gallery preview */
/* Hidden for now — remove display:none to restore */
.showcase-strip {
  display: none;
  padding: 4.5rem 0 4rem;
  margin: 1.5rem 0;
  background-color: rgba(186, 12, 47, 0.25);
  border-top: 3px solid rgba(186, 12, 47, 0.7);
  border-bottom: 3px solid rgba(186, 12, 47, 0.7);
}

.showcase-strip h2 {
  margin-top: 0;
}

.showcase-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.showcase-thumb {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.showcase-thumb:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}

.showcase-thumb img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: top;
  display: block;
  margin: 0;
}

.showcase-thumb span {
  display: block;
  padding: 0.5rem 0.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: transparent;
  letter-spacing: 0.02em;
}

.showcase-thumb:hover span {
  color: var(--text-secondary);
}

.showcase-link {
  margin-top: 1rem;
  margin-bottom: 0;
}

.showcase-link a {
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .showcase-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .showcase-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .showcase-thumb img {
    height: 100px;
  }
}


/* Warm accent section — for invitations and calls to action */
.section-warm {
  background-color: rgba(186, 12, 47, 0.06);
  border-top: 3px solid var(--unm-cherry);
  border-bottom: 3px solid var(--unm-cherry);
  padding: 3rem 0 2rem;
}

.section-warm h2:first-child,
.section-warm .container > h2:first-child {
  margin-top: 0;
}

main {
  margin-top: 0;
  padding: 0;
  min-height: calc(100vh - 200px);
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
}

main .container { display: block; }

.site-footer .container { display: block !important; }
.site-footer .row { display: flex !important; }


/*****************************************************
LINKS
*****************************************************/
a {
  color: var(--amaranth-pink);
  text-decoration: none;
  transition: var(--transition);
  font-size: inherit;  /* explicitly inherit to maintain context size */
}

a:hover {
  color: var(--unm-turquoise-light);
  text-decoration: underline;
}


/*****************************************************
NAVBAR — Bootstrap overrides
Aesthetic: specimen-sheet lightness, cherry-tinted dark
*****************************************************/
.navbar {
  background-color: rgba(20, 5, 10, 0.97) !important;
  border-bottom: 1px solid rgba(186, 12, 47, 0.25) !important;
  padding: 0 !important;
  height: 52px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  margin-bottom: 0 !important;
}

.navbar > .container,
.navbar > .container-fluid {
  align-items: center !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  height: 100% !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.navbar + *,
.navbar ~ * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Brand — Space Mono with bracket treatment */
.navbar-brand {
  font-family: 'Space Mono', monospace !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  color: white !important;
  text-decoration: none !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.navbar-brand span {
  color: var(--unm-cherry) !important;
}

.navbar-brand:hover {
  color: white !important;
}

.navbar-brand:hover span {
  color: var(--unm-cherry) !important;
}

/* Nav links — DM Sans, light and thin */
.navbar-nav {
  margin-bottom: 0 !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.navbar-nav .nav-link {
  font-family: 'DM Sans', sans-serif !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 400 !important;
  font-size: 0.92rem !important;
  padding: 0.4rem 1rem !important;
  border-radius: 0 !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.navbar-nav .nav-link.dropdown-toggle {
  padding-right: 0.6rem !important;
}

.navbar-nav .nav-link.dropdown-toggle::after {
  margin-left: 0.15em !important;
  opacity: 0.4;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
}

.navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
}

.navbar li {
  margin-bottom: 0;
}

/* Dropdown menus */
.dropdown-menu {
  background-color: rgba(20, 5, 10, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 0.25rem !important;
  margin-top: 0 !important;
}

.dropdown-item {
  font-family: 'DM Sans', sans-serif !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  padding: 0.6rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  letter-spacing: 0.02em !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: rgba(255, 255, 255, 0.85) !important;
  background-color: transparent !important;
  border-left-color: var(--unm-cherry) !important;
}

.dropdown-item.disabled {
  color: var(--text-muted) !important;
  opacity: 0.5 !important;
}

.navbar-toggler {
  border: 1px solid rgba(186, 12, 47, 0.3) !important;
  padding: 0.4rem !important;
  border-radius: var(--radius-sm) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 2px rgba(186, 12, 47, 0.25) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile: collapsed nav needs explicit background — background-color is not inherited */
@media (max-width: 991px) {
  .navbar-collapse {
    background-color: rgba(20, 5, 10, 0.99) !important;
    padding: 0.5rem 0 0.75rem;
    border-top: 1px solid rgba(186, 12, 47, 0.2);
  }

  .dropdown-menu {
    border: none !important;
    box-shadow: none !important;
    padding-left: 1rem !important;
  }
}

.mb-2, .mb-lg-0, .me-auto { margin-bottom: 0 !important; }


/*****************************************************
CARDS
*****************************************************/
.card {
  background: #30343799;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 2rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card:hover {
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--unm-turquoise);
}

.card:hover .card-title {
  color: var(--unm-turquoise-light);
}

.card a { text-decoration: none; }
.card a:hover { text-decoration: none; }

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--amaranth-bright);
  margin-top: 1rem;
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.card-img-top + .card-body { padding-top: 0.75rem; }

.card-content {
  color: var(--text-muted);
  line-height: 1.4;
  flex-grow: 1;
  font-size: 0.85rem;
  transition: color 0.25s ease;
}

.card:hover .card-content {
  color: var(--text-secondary);
}

.card .row { display: flex; align-items: center; }

.card .card-body {
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 120px;
}

/* Card images */
.card-img-top {
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: 0 0 1rem 0;
  width: 100%;
  transition: transform 0.3s ease;
}

.card:hover .card-img-top {
  transform: scale(1.03);
}

.card:has(.card-img-top) {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.card-img-top + .card-body {
  padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Team cards (About page) */
.card-horizontal .card-subtitle {
  color: var(--text-secondary) !important;
  margin-bottom: 0.1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.card-horizontal .card-title {
  color: var(--amaranth-bright) !important;
  margin-top: 0.2rem !important;
  margin-bottom: 1rem !important;
}

.card-horizontal .card-text {
  color: #d0d0d0 !important;
}


/*****************************************************
EVENTS — botanical specimen aesthetic
*****************************************************/

/* Section label: "Upcoming" / "Past" — thin rule, monospace, all caps */
.event-section-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--amaranth);
  border-bottom: 1px solid var(--amaranth);
  padding-bottom: 0.4rem;
  margin: 3rem 0 0;
}

/* Event row: date column | body */
.event-entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0 2.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.event-entry:last-child { border-bottom: none; }

/* Date column: month / day / weekday stacked, right-aligned */
.event-date {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

.event-month {
  font-family: 'Space Mono', monospace;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amaranth);
  line-height: 1.4;
}

.event-day {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3.2rem;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.event-weekday {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Annotation line: time · place */
.event-meta {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

/* Speaker name (for talk-style events) */
.event-speaker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 0.2rem;
}

.event-title { margin-top: 0; }
.event-title a { color: inherit; text-decoration: none; }
.event-title a:hover { text-decoration: underline; }

/* Abstract: body text, not dominant */
.event-abstract {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.65;
}

.event-abstract p { margin-bottom: 0.4rem; }
.event-abstract p:last-child { margin-bottom: 0; }

.event-download {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  margin-top: 0.5rem;
}

/* Past events: subdued */
.event-past { opacity: 0.8; }


/*****************************************************
GRIDS
*****************************************************/
.grid { display: grid; gap: 2rem; margin: 2rem 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.image-gallery figure {
  margin: 0;
  float: none !important;
}


/*****************************************************
BUTTONS
*****************************************************/
.btn-primary {
  background: var(--unm-turquoise);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: #008f9d;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-secondary:hover {
  background: var(--primary);
  color: white;
}

.btn-cta {
  background-color: var(--unm-turquoise) !important;
  color: white !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  padding: 1rem 3.5rem !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: var(--transition) !important;
}

.btn-cta:hover {
  background-color: #008f9d !important;
  transform: translateY(-1px) !important;
}

.btn-cta:focus {
  background-color: var(--unm-turquoise) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 134, 0.4) !important;
}

.btn-cta-nav {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  padding: 0.3rem 0.85rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-left: 0.75rem !important;
  border-radius: 2px !important;
  background-color: transparent !important;
  border: 1px solid rgba(186, 12, 47, 0.4) !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

.btn-cta-nav:hover {
  background-color: rgba(186, 12, 47, 0.12) !important;
  border-color: var(--unm-cherry) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}


/*****************************************************
CODE
*****************************************************/
code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: var(--surface);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--unm-mesa);
  border: 1px solid var(--border-color);
}

pre {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  margin: 1.5rem 0;
}

pre code {
  background: none;
  padding: 0;
  border: none;
  color: var(--text-secondary);
}


/*****************************************************
BLOCKQUOTES
*****************************************************/
blockquote {
  border-left: 4px solid var(--unm-turquoise);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-secondary);
}


/*****************************************************
LISTS
*****************************************************/
ul, ol { margin-left: 1.5rem; margin-bottom: 1.5rem; font-size: 1rem; }
li { color: var(--text-secondary); margin-bottom: 0.5rem; font-size: 1rem; }


/*****************************************************
IMAGES & FIGURES
*****************************************************/
img { margin-bottom: 0.25rem; }
figure { margin-bottom: 2rem; }

figcaption {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.25rem;
  margin-bottom: 0;
  line-height: 1.4;
  text-align: left;
}

figcaption p { margin-bottom: 0.5rem; font-size: inherit; color: inherit; }
figcaption a { color: var(--text-muted); text-decoration: underline; }
figcaption a:hover { color: var(--primary); }

figure.left { float: left; margin-right: 1rem; margin-bottom: 1rem; width: 33%; }
figure.right { float: right; margin-left: 2rem; margin-bottom: 1.5rem; max-width: 45%; }
figure.center { display: block; margin: 0 auto 2rem auto; text-align: center; clear: both; }

.clear { clear: both; }


/*****************************************************
TABLES
*****************************************************/
.table-responsive {
  margin-bottom: 2rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table {
  background-color: var(--surface);
  border-color: var(--border-color);
  color: var(--text-primary);
  margin-bottom: 0;
}

.table th {
  background-color: var(--unm-turquoise);
  color: white;
  border-color: var(--border-color);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 1rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table td {
  background-color: var(--surface);
  border-color: var(--border-color);
  color: var(--text-primary);
  padding: 0.75rem;
  vertical-align: top;
  font-size: 0.9rem;
  line-height: 1.5;
}

.table tbody tr:hover td { background-color: var(--surface-hover); }
.table-bordered, .table-bordered th, .table-bordered td { border: 1px solid var(--border-color); }
.table img { max-width: 120px; height: auto; border-radius: var(--radius-sm); }


/*****************************************************
CAROUSEL
*****************************************************/
.carousel {
  margin: 2rem auto;
  max-width: 70%;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.carousel img { height: 400px; object-fit: cover; object-position: center; }
.carousel-control-prev, .carousel-control-next { width: 5%; }
.carousel-indicators { margin-bottom: 1rem; }


/*****************************************************
HEADER — STUDIO (Option 3)
Typography-forward dark header with line grid + cherry bar
*****************************************************/
.header-studio {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #161618;
  box-sizing: content-box;
  padding-bottom: 120px;
}

.header-studio::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 350px;
  background: linear-gradient(to bottom, transparent, #2a2d31);
  pointer-events: none;
  z-index: 5;
}

.header-studio-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  opacity: 0.28;
}

.header-studio-grid {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 40px 40px;
}

.header-studio-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--unm-cherry);
}

.header-studio-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 3rem 5rem;
  margin-left: 3rem;
  border-left: 2px solid rgba(186, 12, 47, 0.4);
}

.header-studio-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  color: var(--unm-cherry);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.header-studio h1 {
  font-family: 'IM Fell English', serif !important;
  font-size: clamp(4.8rem, 10.8vw, 7.8rem) !important;
  font-weight: 400 !important;
  color: white !important;
  line-height: 1.0;
  margin-bottom: 0.4rem !important;
  text-shadow: none !important;
  text-indent: -0.06em; /* optical alignment — serif overhang */
  letter-spacing: 0 !important;
}

.header-studio-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.header-studio-divider-line {
  height: 1px;
  width: 60px;
  background: rgba(255,255,255,0.12);
}

.header-studio-divider span {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
}

.header-studio p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-bottom: 0;
  max-width: 540px;
}

/* --- Tier: Section (mid-level pages) --- */
.header-studio--section {
  height: 60vh;
  padding-bottom: 60px;
}

.header-studio--section::after {
  height: 180px;
}

.header-studio--section .header-studio-content {
  margin-left: 2rem;
  padding: 2rem 3rem;
  max-width: 40%;
  border-left-width: 2px;
}

.header-studio--section h1 {
  font-size: clamp(3.5rem, 3.2vw, 2.4rem) !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  text-shadow:
    0 0 25px rgba(0, 0, 0, 0.95),
    0 0 55px rgba(0, 0, 0, 0.75),
    0 0 90px rgba(0, 0, 0, 0.45) !important;
}

.header-studio--section .header-studio-grid {
  opacity: 0.015;
}

.header-studio--section .header-studio-bg {
  opacity: 0.18;
}


/* --- Tier: Banner (internal pages) --- */
.header-studio--banner {
  height: 22vh;
  padding-bottom: 0;
}

.header-studio--banner::after {
  height: 100px;
}

.header-studio--banner .header-studio-content {
  margin-left: 2rem;
  padding: 1rem 2rem;
  max-width: none;
  border-left-width: 2px;
}

.header-studio--banner h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-indent: 0;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.header-studio--banner .header-studio-grid {
  opacity: 0.01;
}

.header-studio--banner .header-studio-bg {
  opacity: 0.10;
}

.header-studio--banner .header-studio-bar {
  width: 3px;
}


/*
  ┌─────────────────────────────────────────────────────────────────────────┐
  │ Header filter system                                                    │
  │                                                                         │
  │ botanical  Line-art engravings on white background (processed images,   │
  │            botanical illustrations, fine hatching). Core effect:        │
  │            invert → dark lines become glowing red lines; white bg       │
  │            becomes transparent via mix-blend-mode: screen.              │
  │            Requires: dark lines on a white or near-white background.    │
  │                                                                         │
  │ woodcut    Early modern woodcuts on off-white/cream paper. Same         │
  │            mechanism as botanical but contrast(3) pre-boost pushes      │
  │            cream paper → white before inverting, preventing the         │
  │            off-white from showing through as a dim haze.                │
  │            Requires: high-contrast black printing on paper.             │
  │                                                                         │
  │ etching    Color photos → silhouette/stencil aesthetic. grayscale +     │
  │            threshold (contrast 5+) collapses continuous tone to         │
  │            hard-edged black/white shapes, then inverts + tints red.     │
  │            NOTE: produces bold shapes, not fine lines — reads as a      │
  │            different aesthetic than botanical/woodcut. For photos that   │
  │            need to match line-art visually, pre-process the image       │
  │            (threshold + edge detection in Photoshop/GIMP, or AI)       │
  │            and use the botanical filter instead.                        │
  │            Tune: pre-brightness 1.0–1.8, contrast 4–8, post-brightness │
  │            0.4–0.7.                                                      │
  │                                                                         │
  │ photo      Color photos kept photographic — darkened and desaturated    │
  │            slightly. No inversion. Use when you want the image to read  │
  │            as a photo rather than a graphic treatment.                  │
  └─────────────────────────────────────────────────────────────────────────┘
*/

/* --- Filter: Botanical (line-art engravings on white background) --- */
.header-studio-bg--botanical {
  filter: invert(1) sepia(0.6) hue-rotate(320deg) saturate(2.5);
  mix-blend-mode: screen;
}


/* --- Filter: Sketch (thin line drawings on white background)
     Like botanical but pre-contrast boost darkens faint lines before inverting,
     so they emerge as brighter red rather than dim. Then brightness() lifts the
     result further. Tune: contrast (2–4, higher = thicker/bolder lines),
     brightness at end (1.5–2.5, higher = more vivid red). --- */
.header-studio-bg--sketch {
  filter: grayscale(1) contrast(2.5) invert(1) sepia(0.6) hue-rotate(320deg) saturate(3) brightness(2);
  mix-blend-mode: screen;
}

.header-studio--section .header-studio-bg--sketch {
  opacity: 0.55;
}

.header-studio--banner .header-studio-bg--sketch {
  opacity: 0.35;
}


/* --- Filter: Woodcut (historical images with natural color preserved)
     No color transformation: the image shows as-is, slightly darkened for text legibility.
     Use for color manuscripts, color woodcuts, medieval illuminations, and any historical
     image whose natural color is worth keeping. Tune brightness and opacity to balance
     image presence vs. text readability. --- */
.header-studio-bg--woodcut {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.75;
}

.header-studio--section .header-studio-bg--woodcut {
  opacity: 0.65;
}

.header-studio--banner .header-studio-bg--woodcut {
  opacity: 0.45;
}


/* --- Filter: Etching (color photos → high-contrast silhouette with red tint)
     Produces bold shapes with hard edges, not fine hatching lines.
     Pipeline: grayscale → pre-brighten → threshold contrast → post-darken → invert → tint
     contrast(5+) acts as a threshold, collapsing continuous tone to black/white.
     Pre-brightness(1.3) shifts which tones fall above threshold (raise = show more detail).
     Post-brightness(0.55) controls darkness of the inverted result before tinting. --- */
.header-studio-bg--etching {
  filter: grayscale(1) brightness(1.3) contrast(5) brightness(0.55) invert(1) sepia(0.5) hue-rotate(320deg) saturate(3);
  mix-blend-mode: screen;
}

.header-studio--section .header-studio-bg--etching {
  opacity: 0.40;
}

.header-studio--banner .header-studio-bg--etching {
  opacity: 0.25;
}


/* --- Filter: Photo (color photos, photographic aesthetic)
     saturate(1.05) gives a slight color lift; brightness(0.85) darkens just enough
     for text legibility without washing out color. Opacity lets the dark background
     create depth at edges. Tune opacity up if image is too faint, down if text
     becomes hard to read. --- */
.header-studio-bg--photo {
  filter: saturate(1.05) brightness(0.85);
  mix-blend-mode: normal;
  opacity: 0.80;
}

.header-studio--section .header-studio-bg--photo {
  opacity: 0.72;
}

.header-studio--banner .header-studio-bg--photo {
  opacity: 0.50;
}


@media (max-width: 768px) {
  .header-studio-content {
    padding: 2rem 1.5rem;
  }
  .header-studio--section {
    height: 30vh !important;
  }
  .header-studio--section .header-studio-content {
    padding: 1.5rem 1.5rem;
    margin-left: 1rem;
  }
  .header-studio--banner .header-studio-content {
    padding: 0.75rem 1rem;
    margin-left: 1rem;
  }
}


/*****************************************************
SECTION LINK BAR
Section-end navigation link — cherry left bar with woven link text.
Usage: <p class="section-link-bar"><a href="...">text →</a></p>
*****************************************************/
.section-link-bar {
  border-left: 3px solid rgba(186, 12, 47, 0.55);
  padding-left: 1rem;
  margin-top: 0.75rem;
  font-family: 'Space Mono', monospace;
  color: var(--text-secondary);
}


/*****************************************************
FEATURE LIST
*****************************************************/
.feature-list { list-style: none; margin: 0; }

.feature-list li {
  background: var(--surface);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--unm-turquoise);
  transition: var(--transition);
}

.feature-list li:hover {
  background: var(--surface-hover);
  transform: translateX(4px);
}


/*****************************************************
FOOTER
*****************************************************/
.site-footer {
  margin-top: 4rem !important;
  clear: both !important;
}

.footer-list { list-style: none; padding-left: 0; margin-left: 0; }
.footer-list li { margin-bottom: 0.5rem; }
.footer-list li a { color: var(--text-secondary); text-decoration: none; }
.footer-list li a:hover { color: var(--unm-turquoise-light); text-decoration: none; }
.footer-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.footer-brand {
  font-family: 'Space Grotesk', sans-serif;
  color: var(--unm-cherry);
  font-size: 1.1rem;
  font-weight: 700;
}

.footer-bottom {
  text-align: center;
}

.footer-bottom-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.footer-bottom-contact {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-bottom-contact a {
  color: var(--text-muted);
  text-decoration: none;
}

.footer-bottom-contact a:hover {
  color: var(--unm-turquoise-light);
}

.footer-sep {
  color: var(--text-muted);
  padding: 0 0.1rem;
}


/*****************************************************
UTILITY
*****************************************************/
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.accent-line { height: 3px; background: var(--unm-turquoise); border-radius: 2px; margin: 2rem 0; }
.highlight { background: rgba(186, 12, 47, 0.15); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); color: var(--text-primary); }
.fade-in { animation: fadeInUp 0.6s ease-out; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


/*****************************************************
RESPONSIVE
*****************************************************/
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
  .section { padding: 2rem 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 1.25rem; }
  .card-title { font-size: 1.2rem; }
  main { margin-top: 60px; padding: 2rem 0; }

  figure, figure.left, figure.right {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto 2rem auto !important;
    padding: 0 !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .carousel { max-width: 95%; }
  .carousel img { height: 250px; }

  .feature-block,
  .feature-block.feature-block-reverse {
    flex-direction: column;
  }
  .feature-block-image {
    flex: none;
    width: 100%;
  }
}

@media (max-width: 700px) {
  .event-entry { grid-template-columns: 3.5rem 1fr; gap: 0 1.5rem; }
  .event-day { font-size: 2rem; }
  .event-title { font-size: clamp(1.1rem, 4vw, 1.35rem); }
}


/*****************************************************
ALERTS & CALLOUTS
*****************************************************/

/* Studio Hours Callout — Amaranth-themed with gradient */
.alert-studio-hours {
  position: relative;
  padding: 2rem 2rem 2rem 2.5rem;
  margin: 2.5rem 0;
  border-left: 6px solid var(--amaranth-red);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg,
    rgba(229, 43, 80, 0.12) 0%,      /* amaranth base, subtle */
    rgba(186, 12, 47, 0.15) 50%,     /* UNM cherry */
    rgba(159, 43, 104, 0.12) 100%    /* amaranth purple */
  );
  box-shadow: var(--shadow-md);
}

.alert-studio-hours .alert-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--unm-cherry);  /* bold UNM red, distinct from page h2s (amaranth-bright) */
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.alert-studio-hours p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--amaranth-pink);  /* soft warm pink for readability on gradient */
  margin-bottom: 0.5rem;
}

.alert-studio-hours ul {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
}

.alert-studio-hours li {
  font-size: 1.15rem;
  line-height: 2;
  color: var(--amaranth-pink);  /* matches paragraph text */
  padding-left: 1.5rem;
  position: relative;
}

.alert-studio-hours li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--amaranth-pink);
  font-weight: bold;
}

.alert-studio-hours a {
  color: var(--unm-turquoise-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: var(--transition);
}

.alert-studio-hours a:hover {
  color: var(--amaranth-pink);
  text-decoration-color: var(--amaranth-pink);
}

@media (max-width: 768px) {
  .alert-studio-hours {
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-left-width: 4px;
  }

  .alert-studio-hours .alert-heading {
    font-size: 1.3rem;
  }

  .alert-studio-hours p,
  .alert-studio-hours li {
    font-size: 1rem;
  }
}