/* ================================================================
   Dr. Caryn McAllister Gallery
   ================================================================ */

/* --- self-hosted fonts (latin subsets, OFL) ------------------------ */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-italic-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-normal-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-normal-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-normal-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-normal-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-normal-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --paper: #f6f4ef;
  --paper-deep: #efece4;
  --ink: #1c1a17;
  --ink-soft: #43403a;
  --muted: #6b655a;
  --line: rgba(28, 26, 23, 0.14);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad-x: clamp(1.2rem, 5vw, 4.5rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lightbox :focus-visible { outline-color: var(--paper); }

img { display: block; max-width: 100%; height: auto; }   /* width/height attrs reserve space; CSS keeps ratio */

/* --- paper grain -------------------------------------------------- */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 3%); }
  40% { transform: translate(3%, -2%); }
  60% { transform: translate(-3%, -3%); }
  80% { transform: translate(2%, 2%); }
}

/* --- intro: ink-splatter track matte (canvas) ---------------------- */
#intro {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 3000;
  display: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body.intro-on { overflow: hidden; }
body.intro-on #intro { display: block; }
body.intro-fade #intro { opacity: 0; }

/* --- header ------------------------------------------------------- */
#site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: 1.4rem var(--pad-x);
  transition: padding 0.4s var(--ease), background 0.4s, box-shadow 0.4s;
}
#site-header.scrolled {
  padding: 0.8rem var(--pad-x);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.small-c { font-size: 0.72em; vertical-align: 0.28em; }
.gallery-tag {
  margin-left: 0.85em;
  padding-left: 0.85em;
  border-left: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.56em;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: 0.14em;
}
#site-header nav { display: flex; gap: clamp(0.9rem, 3vw, 2.4rem); }
#site-header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 3px;
  white-space: nowrap;
}
#site-header nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
#site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- hero --------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: clamp(5.5rem, 11vh, 8rem) 0 0;
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 0 var(--pad-x);
  width: 100%;
  flex: 1;
}
.eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 7.3vw, 5.9rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.chip {
  display: inline-block;
  width: 1.55em; height: 0.74em;
  border-radius: 999px;
  overflow: hidden;
  vertical-align: -0.06em;
  box-shadow: 0 6px 18px -6px rgba(28, 26, 23, 0.5);
  transform: rotate(-2deg);
  transition: transform 0.5s var(--ease);
}
.hero h1:hover .chip { transform: rotate(4deg) scale(1.06); }
.chip img { width: 100%; height: 100%; object-fit: cover; }
.lede {
  max-width: 34rem;
  margin-top: 1.8rem;
  font-size: clamp(0.95rem, 1.4vw, 1.08rem);
  color: var(--ink-soft);
}
.hero-cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--ink);
  transition: all 0.35s var(--ease);
}
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.hero-art { position: relative; }
.hero-main { position: relative; z-index: 2; }
.hero-main img {
  width: 100%;
  max-height: 66vh;
  object-fit: contain;
  box-shadow: 0 30px 70px -20px rgba(28, 26, 23, 0.45);
}
.hero-main figcaption {
  margin-top: 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.hero-main figcaption em { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-soft); }
.hero-float {
  position: absolute;
  z-index: 3;
  top: -7%;
  right: -4%;
  width: clamp(90px, 24%, 170px);
  transform: rotate(5deg);
  box-shadow: 0 20px 44px -14px rgba(28, 26, 23, 0.5);
  border: 5px solid #fff;
  background: #fff;
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(6.5deg) translateY(-10px); }
}

/* --- ticker ------------------------------------------------------- */
.ticker {
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding: 0.95rem 0;
  margin-top: clamp(2rem, 6vh, 4rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-row {
  display: flex;
  align-items: baseline;
  gap: 2.6rem;
  width: max-content;
  animation: tick 36s linear infinite;
  white-space: nowrap;
}
.ticker-row > span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-row > .tk-serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-soft);
}
.ticker-row > .tk-dot { font-size: 0.6rem; color: var(--muted); letter-spacing: 0; }
@keyframes tick { to { transform: translateX(-50%); } }

/* --- sections ----------------------------------------------------- */
section { position: relative; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.4rem;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.01em;
}
.num {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--muted);
  vertical-align: 1.6em;
  margin-right: 0.9em;
  position: relative;
}
.num::before {
  content: "";
  position: absolute;
  left: -2em; top: -2.1em;
  width: 6.2em; height: 4.6em;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 120 60%22%3E%3Cpath fill=%22%23AAB27E%22 d=%22M88.9 33.0C87.6 37.8 76.6 39.4 72.4 42.5C68.1 45.7 67.0 51.3 63.4 51.8C59.8 52.4 54.7 47.8 50.8 45.7C46.8 43.6 41.7 42.8 39.6 39.2C37.5 35.5 36.7 27.6 38.4 23.7C40.0 19.8 45.1 18.4 49.5 15.8C53.9 13.3 59.8 8.9 64.9 8.5C70.0 8.1 76.1 9.1 80.1 13.2C84.1 17.3 90.2 28.1 88.9 33.0ZM64.0 -0.6m-1.2 0a1.2 1.2 0 1 0 2.3 0a1.2 1.2 0 1 0 -2.3 0ZM39.1 52.5m-1.4 0a1.4 1.4 0 1 0 2.9 0a1.4 1.4 0 1 0 -2.9 0Z%22/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.5;
  z-index: -1;
}
.section-note { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }

/* --- featured (On View) ------------------------------------------- */
.featured { padding: clamp(4rem, 9vh, 7rem) 0 0; }
.featured .section-head { margin: 0 var(--pad-x) 2.4rem; }
.feat-track {
  display: flex;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad-x);
  padding: clamp(2.4rem, 4.5vw, 3.4rem) var(--pad-x) 1.6rem;
  scrollbar-width: none;
  cursor: grab;
}
.feat-track::-webkit-scrollbar { display: none; }
.feat-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.feat-card {
  flex: 0 0 min(74vw, 560px);
  scroll-snap-align: start;
  position: relative;
}
.feat-card .feat-img {
  position: relative;
  overflow: hidden;
  background: var(--wash, var(--paper-deep));
  box-shadow: 0 22px 50px -18px rgba(28, 26, 23, 0.4);
  aspect-ratio: 4 / 3;
}
.feat-card .feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease);
  -webkit-user-drag: none;
  user-select: none;
}
.feat-card:hover .feat-img img { transform: scale(1.05); }
.feat-no {
  position: absolute;
  top: -0.65em;
  left: -0.06em;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3.4rem, 7vw, 5.4rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.9;
  text-shadow: 0 2px 14px rgba(246, 244, 239, 0.9);
  pointer-events: none;
}
.feat-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
}
.feat-caption .t {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 500;
}
.feat-caption .m {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.feat-head-right { display: flex; align-items: baseline; gap: 1.4rem; }
.feat-arrows { display: flex; gap: 0.5rem; }
.fa-prev, .fa-next {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 2.6rem; height: 2.6rem;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.fa-prev:hover, .fa-next:hover { border-color: var(--ink); }

/* --- works grid --------------------------------------------------- */
.works { padding: clamp(4rem, 9vh, 7rem) var(--pad-x); }

.filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 3rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
}
.filters::-webkit-scrollbar { display: none; }
.filter {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: all 0.3s var(--ease);
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.grid {
  columns: 3 300px;
  column-gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.work {
  break-inside: avoid;
  margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}
body.bubble-on .work { cursor: none; }
body.bubble-on .work .work-caption { cursor: auto; }
@media (hover: none) { .work { cursor: pointer; } }
.work.is-hidden { display: none; }
.work-frame {
  position: relative;
  overflow: hidden;
  background: var(--wash, var(--paper-deep));
  box-shadow: 0 18px 40px -18px rgba(28, 26, 23, 0.35);
  transition: box-shadow 0.45s var(--ease);
}
.work:hover .work-frame { box-shadow: 0 28px 60px -18px rgba(28, 26, 23, 0.5); }
.work-frame img {
  width: 100%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.8s ease, transform 1.4s var(--ease);
}
.work-frame img.loaded { opacity: 1; }
.work:hover .work-frame img { transform: scale(1.045); }
.work-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0 0.15rem;
}
.work-caption .t {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
}
.work-caption .t .idx {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--muted);
  vertical-align: 0.5em;
  margin-right: 0.7em;
}
.work-caption .m {
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

/* --- salon -------------------------------------------------------- */
.salon { padding-top: 0; }
.salon .work-frame { box-shadow: 0 22px 44px -20px rgba(28, 26, 23, 0.45); }

/* --- per-work pages (generated by build_pages.py) ------------------ */
.work-page { background: var(--paper); }
.wp-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(6.5rem, 12vh, 8.5rem) var(--pad-x) 3rem;
}
.wp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.wp-art img {
  width: 100%;
  background: var(--wash, var(--paper-deep));
  box-shadow: 0 30px 70px -20px rgba(28, 26, 23, 0.45);
}
.wp-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-top: 0.4rem;
}
.wp-info .artist-facts { margin-top: 2rem; }
.wp-info .hero-cta { margin-top: 2.2rem; }
.wp-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(3.5rem, 8vh, 5.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.wp-adj {
  display: flex; align-items: center; gap: 1.1rem;
  text-decoration: none; color: var(--ink);
}
.wp-adj:last-child { flex-direction: row-reverse; text-align: right; }
.wp-adj img {
  width: 86px; height: 86px;
  object-fit: cover;
  flex: 0 0 86px;
  box-shadow: 0 10px 24px -10px rgba(28, 26, 23, 0.4);
}
.wp-adj small {
  display: block;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.wp-adj em { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.wp-adj:hover em { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.work-page footer { margin-top: 3rem; }
@media (max-width: 880px) {
  .wp-cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* crawlable caption links in the grids */
.work-caption .t a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(28, 26, 23, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.work-caption .t a:hover { text-decoration-color: var(--ink); }

/* --- quote band --------------------------------------------------- */
.quote-band {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(6rem, 14vh, 10rem) clamp(1.2rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* rough painted edges — the dark band reads as a brush stroke laid on the paper */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 400%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M0 6.9 L18 9.9 L36 2.7 L54 5.8 L72 5.7 L90 2.9 L108 5.4 L126 8.5 L144 0.6 L162 7.3 L180 4.1 L198 7.2 L216 2.0 L234 5.1 L252 11.2 L270 5.5 L288 14.0 L306 8.0 L324 10.7 L342 9.2 L360 7.1 L378 8.5 L396 5.2 L413 4.1 L431 8.5 L449 13.7 L467 16.8 L485 10.8 L503 14.5 L521 12.9 L539 15.9 L557 15.2 L575 9.5 L593 14.9 L611 16.2 L629 20.0 L647 19.4 L665 15.3 L683 17.7 L701 8.8 L719 11.0 L737 12.5 L755 14.6 L773 9.7 L791 12.6 L809 4.8 L827 5.8 L845 9.3 L863 6.7 L881 14.2 L899 6.0 L917 6.8 L935 2.2 L953 6.6 L971 4.8 L989 1.9 L1007 5.5 L1025 3.7 L1043 6.0 L1061 8.3 L1079 10.8 L1097 10.4 L1115 6.0 L1133 7.2 L1151 10.5 L1169 9.7 L1187 8.6 L1204 3.5 L1222 3.2 L1240 3.5 L1258 6.2 L1276 6.0 L1294 8.4 L1312 4.8 L1330 5.9 L1348 7.1 L1366 3.3 L1384 6.0 L1402 2.1 L1420 5.4 L1438 5.9 L1456 2.2 L1474 5.0 L1492 8.2 L1510 1.8 L1528 3.9 L1546 3.8 L1564 0.5 L1582 5.8 L1600 6.9 L1600 383.0 L1582 387.4 L1564 389.6 L1546 395.6 L1528 387.6 L1510 391.9 L1492 394.9 L1474 398.0 L1456 394.9 L1438 397.7 L1420 393.6 L1402 390.6 L1384 397.1 L1366 394.9 L1348 397.8 L1330 395.0 L1312 392.7 L1294 393.3 L1276 393.5 L1258 398.2 L1240 395.8 L1222 391.2 L1204 389.7 L1187 398.2 L1169 391.9 L1151 392.8 L1133 388.7 L1115 388.6 L1097 390.2 L1079 385.1 L1061 379.8 L1043 380.4 L1025 375.6 L1007 372.9 L989 377.3 L971 376.3 L953 378.1 L935 373.0 L917 378.0 L899 378.5 L881 381.8 L863 385.8 L845 383.2 L827 386.8 L809 386.0 L791 387.2 L773 392.4 L755 388.7 L737 389.1 L719 390.9 L701 385.0 L683 390.0 L665 387.0 L647 385.5 L629 381.7 L611 376.6 L593 379.3 L575 384.2 L557 383.3 L539 380.1 L521 385.4 L503 378.8 L485 375.8 L467 380.5 L449 381.9 L431 377.3 L413 375.9 L396 378.1 L378 374.7 L360 378.0 L342 375.4 L324 377.1 L306 387.0 L288 381.8 L270 389.6 L252 382.0 L234 384.7 L216 387.0 L198 390.2 L180 386.8 L162 389.5 L144 387.9 L126 386.2 L108 387.5 L90 383.2 L72 387.4 L54 389.3 L36 392.6 L18 387.3 L0 386.0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1600 400%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M0 6.9 L18 9.9 L36 2.7 L54 5.8 L72 5.7 L90 2.9 L108 5.4 L126 8.5 L144 0.6 L162 7.3 L180 4.1 L198 7.2 L216 2.0 L234 5.1 L252 11.2 L270 5.5 L288 14.0 L306 8.0 L324 10.7 L342 9.2 L360 7.1 L378 8.5 L396 5.2 L413 4.1 L431 8.5 L449 13.7 L467 16.8 L485 10.8 L503 14.5 L521 12.9 L539 15.9 L557 15.2 L575 9.5 L593 14.9 L611 16.2 L629 20.0 L647 19.4 L665 15.3 L683 17.7 L701 8.8 L719 11.0 L737 12.5 L755 14.6 L773 9.7 L791 12.6 L809 4.8 L827 5.8 L845 9.3 L863 6.7 L881 14.2 L899 6.0 L917 6.8 L935 2.2 L953 6.6 L971 4.8 L989 1.9 L1007 5.5 L1025 3.7 L1043 6.0 L1061 8.3 L1079 10.8 L1097 10.4 L1115 6.0 L1133 7.2 L1151 10.5 L1169 9.7 L1187 8.6 L1204 3.5 L1222 3.2 L1240 3.5 L1258 6.2 L1276 6.0 L1294 8.4 L1312 4.8 L1330 5.9 L1348 7.1 L1366 3.3 L1384 6.0 L1402 2.1 L1420 5.4 L1438 5.9 L1456 2.2 L1474 5.0 L1492 8.2 L1510 1.8 L1528 3.9 L1546 3.8 L1564 0.5 L1582 5.8 L1600 6.9 L1600 383.0 L1582 387.4 L1564 389.6 L1546 395.6 L1528 387.6 L1510 391.9 L1492 394.9 L1474 398.0 L1456 394.9 L1438 397.7 L1420 393.6 L1402 390.6 L1384 397.1 L1366 394.9 L1348 397.8 L1330 395.0 L1312 392.7 L1294 393.3 L1276 393.5 L1258 398.2 L1240 395.8 L1222 391.2 L1204 389.7 L1187 398.2 L1169 391.9 L1151 392.8 L1133 388.7 L1115 388.6 L1097 390.2 L1079 385.1 L1061 379.8 L1043 380.4 L1025 375.6 L1007 372.9 L989 377.3 L971 376.3 L953 378.1 L935 373.0 L917 378.0 L899 378.5 L881 381.8 L863 385.8 L845 383.2 L827 386.8 L809 386.0 L791 387.2 L773 392.4 L755 388.7 L737 389.1 L719 390.9 L701 385.0 L683 390.0 L665 387.0 L647 385.5 L629 381.7 L611 376.6 L593 379.3 L575 384.2 L557 383.3 L539 380.1 L521 385.4 L503 378.8 L485 375.8 L467 380.5 L449 381.9 L431 377.3 L413 375.9 L396 378.1 L378 374.7 L360 378.0 L342 375.4 L324 377.1 L306 387.0 L288 381.8 L270 389.6 L252 382.0 L234 384.7 L216 387.0 L198 390.2 L180 386.8 L162 389.5 L144 387.9 L126 386.2 L108 387.5 L90 383.2 L72 387.4 L54 389.3 L36 392.6 L18 387.3 L0 386.0 Z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.quote-band::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/art/mirror-lake.jpg") center 30% / cover no-repeat;
  opacity: 0.18;
  filter: saturate(0.8);
}
.quote-band blockquote { position: relative; max-width: 60rem; margin: 0 auto; }
.quote-band p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  line-height: 1.25;
}
.quote-band cite {
  display: block;
  margin-top: 2.2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* --- the gallery (about) ------------------------------------------ */
.artist { padding: clamp(4rem, 9vh, 7rem) var(--pad-x); }
.artist-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.artist-fig { position: sticky; top: 7rem; }
.artist-fig img { box-shadow: 0 24px 50px -20px rgba(28, 26, 23, 0.4); }
.artist-fig figcaption {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.artist-fig figcaption em { font-family: var(--serif); font-size: 1.02rem; color: var(--ink-soft); }
.artist-body p {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--ink-soft);
  max-width: 40rem;
}
.artist-body p strong { font-weight: 500; color: var(--ink); }
.artist-body p + p { margin-top: 1.6rem; }
.artist-facts {
  list-style: none;
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}
.artist-facts li {
  display: flex; gap: 1.2rem 2rem; align-items: baseline;
  flex-wrap: wrap;
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.artist-facts li span {
  flex: 0 0 9rem;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.artist-facts a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* --- inquire ------------------------------------------------------ */
.inquire {
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  padding: clamp(5rem, 12vh, 9rem) var(--pad-x);
  text-align: center;
}
.inquire-inner { max-width: 46rem; margin: 0 auto; }
.inquire .eyebrow { margin-bottom: 1.2rem; }
.inquire .num { display: block; margin: 0 auto 1rem; }
.inquire .num::before { left: 50%; margin-left: -3.1em; }
.inquire-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
}
.inquire-title em { font-style: italic; font-weight: 400; }
.inquire .lede { margin: 1.6rem auto 0; }
.inquire .hero-cta { justify-content: center; margin-top: 2.6rem; }

/* --- footer ------------------------------------------------------- */
footer {
  padding: 3rem var(--pad-x) 3.4rem;
  text-align: center;
  border-top: 1px solid var(--line);
}
.foot-mark { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; }
.foot-mark em { font-weight: 400; }
.foot-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.4rem 2.2rem; margin-top: 1.1rem; }
.foot-social a {
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.foot-social a:hover { border-color: var(--ink); }
.foot-note { margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }

/* --- lightbox ----------------------------------------------------- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 2400;   /* above the grain overlay (2000) */
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* the viewer opens as an ink blot blooming across the page (transform only — composited) */
.lb-ink {
  position: absolute;
  left: 50%; top: 50%;
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  background: #100f0d;
  clip-path: path("M71.9 49.1C71.6 52.6 69.1 58.0 67.2 61.9C65.2 65.8 63.0 70.0 60.0 72.4C57.0 74.8 53.1 76.6 49.0 76.3C45.0 76.1 38.7 74.0 35.6 70.9C32.5 67.9 32.9 62.8 30.4 58.0C28.0 53.2 20.2 46.0 20.7 42.0C21.3 38.0 29.3 38.1 33.6 34.2C37.9 30.3 41.9 19.5 46.4 18.4C51.0 17.2 57.1 23.7 60.8 27.5C64.5 31.3 66.6 37.3 68.5 40.9C70.3 44.5 72.1 45.6 71.9 49.1ZM41.2 84.6m-1.5 0a1.5 1.5 0 1 0 2.9 0a1.5 1.5 0 1 0 -2.9 0ZM33.8 92.0m-1.6 0a1.6 1.6 0 1 0 3.1 0a1.6 1.6 0 1 0 -3.1 0ZM12.9 29.1m-1.9 0a1.9 1.9 0 1 0 3.8 0a1.9 1.9 0 1 0 -3.8 0ZM16.9 39.8m-1.4 0a1.4 1.4 0 1 0 2.7 0a1.4 1.4 0 1 0 -2.7 0Z");
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.3, 0.6, 0.3, 1);
  will-change: transform;
}
.lightbox.open .lb-ink { transform: scale(130); }
.lightbox .lb-stage,
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.open .lb-stage { opacity: 1; transition-delay: 0.32s; }
.lightbox.open .lb-close, .lightbox.open .lb-prev, .lightbox.open .lb-next { opacity: 0.65; transition-delay: 0.4s; }
.lightbox.open .lb-close:hover, .lightbox.open .lb-prev:hover, .lightbox.open .lb-next:hover { opacity: 1; transition-delay: 0s; }
.lb-stage {
  position: relative;
  z-index: 1;               /* above the ink blot, which is a positioned sibling */
  max-width: min(88vw, 1100px);
  max-height: 88vh;
  display: flex; flex-direction: column;
}
.lb-stage img {
  transition: opacity 0.25s ease;
  max-width: 100%;
  max-height: calc(88vh - 7rem);
  object-fit: contain;
  margin: 0 auto;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
}
.lb-stage figcaption { padding: 1.2rem 0.2rem 0; }
.lb-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; }
#lb-title { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--paper); }
#lb-medium { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 244, 239, 0.6); }
.lb-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 0.5rem; }
#lb-count { font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(246, 244, 239, 0.62); }
#lb-inquire, #lb-page {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid rgba(246, 244, 239, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
#lb-page { color: rgba(246, 244, 239, 0.66); border-color: rgba(246, 244, 239, 0.22); }
#lb-inquire:hover, #lb-page:hover { border-color: var(--paper); }
.lb-close, .lb-prev, .lb-next {
  position: fixed;
  background: none; border: none;
  color: var(--paper);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  padding: 1rem;
  opacity: 0.65;
  transition: opacity 0.3s, transform 0.3s var(--ease);
  z-index: 510;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { opacity: 1; }
.lb-close { top: 1.2rem; right: 1.6rem; font-size: 2.2rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) translateX(-4px); }
.lb-next:hover { transform: translateY(-50%) translateX(4px); }

/* --- cursor view bubble ------------------------------------------- */
#cursor-view {
  position: fixed; top: 0; left: 0; z-index: 400;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
@media (hover: none) { #cursor-view { display: none; } }

/* --- back to top --------------------------------------------------- */
#to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 300;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease), border-color 0.3s;
}
#to-top.show { opacity: 1; pointer-events: auto; transform: none; }
#to-top:hover { border-color: var(--ink); }

/* --- reveal animations -------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain, .ticker-row, .hero-float { animation: none; }
  .work-frame img, .work:hover .work-frame img { transform: none; }
  .feat-card:hover .feat-img img { transform: none; }
  .chip, .hero h1:hover .chip { transform: none; transition: none; }
  .lb-ink { transition: none; }
  #intro, body.intro-on #intro { display: none; }
}

/* --- responsive --------------------------------------------------- */
@media (max-width: 880px) {
  .wordmark { font-size: 1.05rem; }
  .gallery-tag { display: none; }
  #site-header nav { gap: 1rem; }
  #site-header nav a { font-size: 0.62rem; letter-spacing: 0.14em; }

  .hero { min-height: auto; padding-top: 6rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 3.2rem; }
  .hero h1 { font-size: clamp(3rem, 13vw, 4.4rem); }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-art { margin-top: 0.6rem; padding-right: 6%; }
  .hero-main img { max-height: none; width: 100%; }
  .hero-float { top: -6%; right: -2%; width: 30%; }
  .ticker { margin-top: 3rem; }

  .feat-card { flex-basis: 82vw; }
  .feat-caption .t { font-size: 1.3rem; }

  .grid { columns: 1; }
  .work-caption .t { font-size: 1.3rem; }

  .artist-cols { grid-template-columns: 1fr; }
  .artist-fig { position: static; max-width: 440px; }
  .artist-facts li span { flex-basis: 100%; }

  .lb-stage { max-width: 94vw; padding-top: 2.6rem; }
  .lb-stage img { max-height: calc(88vh - 12rem); }

  /* comfortable tap targets */
  #site-header nav a { padding: 0.6rem 0.15rem; }
  .filter { padding: 0.75rem 1.3rem; }
  .foot-social a { padding: 0.6rem 0.2rem; }
  #lb-inquire { padding: 0.7rem 0 0.5rem; }
  .lb-prev, .lb-next {
    top: auto; bottom: 1.1rem;
    transform: none;
    font-size: 1.5rem;
    padding: 0.9rem 1.4rem;
    border: 1px solid rgba(246, 244, 239, 0.35);
    border-radius: 999px;
  }
  .lb-prev { left: calc(50% - 4.6rem); }
  .lb-next { right: calc(50% - 4.6rem); }
  .lb-prev:hover, .lb-next:hover { transform: none; }
  .lb-close { top: 0.6rem; right: 0.6rem; }
}

@media (min-width: 600px) and (max-width: 880px) {
  .grid { columns: 2 260px; }
}

@media (min-width: 881px) and (max-width: 1100px) {
  .grid { columns: 2 300px; }
}

@media (max-width: 480px) {
  #site-header { flex-wrap: wrap; row-gap: 0; padding-top: 0.85rem; padding-bottom: 0.55rem; }
  #site-header nav { width: 100%; justify-content: space-between; gap: 0.4rem; }
  #site-header nav a { letter-spacing: 0.1em; }
}