/* SPACE · San Patricio Art Center — v1 */
:root {
  --ground: #f4f3f0;
  --ink: #1f1f1f;
  --muted: #8c8c8c;
  --hairline: #e2e0db;
  --accent: #ec4c21;
  --font: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 64px);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(17px, 1.1vw + 12px, 19px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1.2em; max-width: var(--measure); }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.005em; line-height: 1.1; }

/* ---------- shared pieces ---------- */
.wordmark {
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: 0.8rem;
  text-indent: 0.32em; /* optical centre with the trailing tracking */
}
.dot {
  display: inline-block;
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  flex: none;
}
.nav {
  display: flex;
  gap: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  font-weight: 500;
}
.nav a {
  padding: 0.6em 0;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.eyebrow {
  display: flex; align-items: center; gap: 0.7em;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.74rem; font-weight: 500;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.eyebrow .dot { width: 0.6em; height: 0.6em; }

.button {
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 0.95em 1.4em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 500;
  transition: background 160ms ease, color 160ms ease;
}
.button:hover, .button:focus-visible { background: var(--ink); color: var(--ground); }
.button small { letter-spacing: 0.05em; text-transform: none; color: inherit; opacity: 0.6; font-size: 0.9em; }

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35em 2em;
  margin: 0;
  max-width: var(--measure);
}
.meta dt { color: var(--muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.14em; padding-top: 0.2em; }
.meta dd { margin: 0; }
.meta a:hover { border-bottom: 1px solid var(--accent); }

.placeholder {
  background: #e9e7e2;
  border: 1px dashed #cfcdc7;
  display: grid; place-items: center;
  color: var(--muted); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 1em;
}

/* the eight worldly winds, set off from the exhibition text */
.winds {
  list-style: none;
  margin: 0.4em 0 1.6em;
  padding: 0.2em 0 0.2em 1.1em;
  border-left: 2px solid var(--accent);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ---------- home ---------- */
.home {
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* soft, slowly drifting glow behind the stage */
.home::before, .home::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.home::before {
  top: -20vmax; left: -15vmax;
  background: radial-gradient(closest-side, rgba(236, 76, 33, 0.085), rgba(236, 76, 33, 0));
  animation: drift-a 26s ease-in-out infinite alternate;
}
.home::after {
  bottom: -25vmax; right: -20vmax;
  background: radial-gradient(closest-side, rgba(140, 150, 170, 0.14), rgba(140, 150, 170, 0));
  animation: drift-b 32s ease-in-out infinite alternate;
}
.home-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  text-align: center;
}
.home-logo {
  width: min(62vw, 400px);
  aspect-ratio: 1;
  position: relative;
  container-type: inline-size;
  filter: drop-shadow(0 18px 30px rgba(31, 31, 31, 0.10)) drop-shadow(0 2px 4px rgba(31, 31, 31, 0.06));
  animation: rise 900ms cubic-bezier(.2,.7,.2,1) both;
}
/* Each ring is the same PNG masked to one ring's annulus (geometry measured
   on the 880px source), so the three can breathe independently. Amplitude
   stays tiny because the masks overlap where the rings interlock. */
.home-logo .ring-base { position: relative; width: 100%; height: 100%; }
.home-logo .ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  --cx: 50%; --cy: 50%; --ri: 15cqw; --ro: 36cqw;
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy),
    transparent calc(var(--ri) - 1cqw), #000 var(--ri), #000 var(--ro), transparent calc(var(--ro) + 1cqw));
  mask-image: radial-gradient(circle at var(--cx) var(--cy),
    transparent calc(var(--ri) - 1cqw), #000 var(--ri), #000 var(--ro), transparent calc(var(--ro) + 1cqw));
  will-change: transform;
}
.home-logo .ring-top   { --cx: 49.9%; --cy: 40.2%; --ro: 37cqw; animation: breathe 6.8s 900ms ease-in-out infinite; }
.home-logo .ring-left  { --cx: 37.2%; --cy: 61.8%; animation: breathe 8.1s 2.6s ease-in-out infinite; }
.home-logo .ring-right { --cx: 62.8%; --cy: 58.5%; animation: breathe 7.4s 4.3s ease-in-out infinite; }
.home-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.2rem, 4vw, 2.2rem);
  text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(0.82rem, 1.2vw, 0.95rem); font-weight: 500;
  animation: fade 900ms 250ms ease both;
}
.home-nav a {
  padding: 0.75em 0.25em;
  text-indent: 0.3em;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}
.home-nav a:first-child { justify-self: end; }
.home-nav a:last-child { justify-self: start; }
.home-nav a:hover, .home-nav a:focus-visible { border-bottom-color: var(--accent); }
.home-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.home-nav .dot { width: 0.55em; height: 0.55em; }
.home-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 2em;
  color: var(--muted); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  animation: fade 900ms 400ms ease both;
}
.home-foot a:hover { color: var(--ink); }

@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes drift-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(10vmax, 8vmax) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate(0, 0) scale(1.08); }
  to   { transform: translate(-9vmax, -10vmax) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .home-logo, .home-logo .ring, .home-nav, .home-foot, .home::before, .home::after { animation: none; }
}

/* ---------- inner pages ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: calc(var(--gutter) * 0.6) var(--gutter);
}
.brand { display: flex; align-items: center; gap: 0.9em; }
.brand img { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(31,31,31,.10)); }
.brand .wordmark { color: var(--ink); }

main.page {
  flex: 1;
  padding: clamp(2rem, 7vh, 5rem) var(--gutter) clamp(3rem, 10vh, 7rem);
}
.page > section + section {
  margin-top: clamp(3rem, 8vh, 5.5rem);
  padding-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--hairline);
}
.title {
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  font-weight: 300;
  max-width: 18ch;
  margin-bottom: 0.3em;
}
.subtitle { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 400; color: var(--ink); }
.dates { color: var(--muted); margin-top: 0.4em; font-size: 1.05em; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; }
h2.section-title {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; color: var(--muted);
  margin-bottom: 1.6rem;
}
.figure { margin: clamp(2rem, 5vh, 3.5rem) 0; max-width: 1100px; }
.figure .placeholder { aspect-ratio: 3 / 2; }
.figure img { display: block; width: 100%; max-width: 640px; height: auto; }
.figure figcaption { margin-top: 0.8em; color: var(--muted); font-size: 0.85em; }
.actions { margin: 2.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.split {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 760px) { .split { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } }
.portrait { aspect-ratio: 1; width: 100%; max-width: 300px; object-fit: cover; object-position: 50% 15%; }

.site-footer {
  padding: calc(var(--gutter) * 0.8) var(--gutter);
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6em 2em;
  color: var(--muted); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.site-footer a:hover { color: var(--ink); }

/* ---------- 404 ---------- */
.lost { flex: 1; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.lost img { width: min(40vw, 180px); margin: 0 auto 2rem; opacity: 0.9; }
.lost p { margin: 0 auto 1.5rem; color: var(--muted); }