/* ------------------------------------------------------------------
   The site behaves like paper.
   Warm paper-white ground, ink-gray chrome, zero decorative color —
   each painting supplies the page's accent via --accent inline style.
   ------------------------------------------------------------------ */

:root {
  --paper: #faf7f2;
  --paper-deep: #f3eee5;
  --ink: #2b2723;
  --ink-soft: #6b6259;
  --ink-faint: #9a9083;
  --line: #e6dfd3;
  --accent: #5b6e7c; /* fallback; overridden per painting */
  --shadow: 0 2px 24px rgba(60, 50, 35, 0.10), 0 1px 4px rgba(60, 50, 35, 0.06);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Karla", -apple-system, "Helvetica Neue", sans-serif;
  --ease-wash: cubic-bezier(0.25, 0.46, 0.2, 1);
}

/* The gallery is always daylight: true galleries hang work on warm white
   walls, and the paintings' colors are only honest on paper. */

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

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Cold-press paper grain, almost imperceptible */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
main { position: relative; z-index: 1; }

/* ---------- the living sheet ----------
   Glaze pools bleed each painting's wash into the page as it approaches
   the viewport center. Multiply = transparent pigment over paper; the
   pools sit behind the content layer so mats and text stay dry. */

.sheet {
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: clip;
  pointer-events: none;
}

.pool {
  position: absolute;
  mix-blend-mode: multiply;
  opacity: calc(var(--s, 0) * 0.62);
  transform: translate(-50%, calc(-50% + var(--dy, 0px)));
  will-change: opacity, transform;
}

/* Each layer is its own silhouette; the bloom grows from a seed (--g 0→1)
   with layers unveiling at staggered thresholds — the frontier creeps as
   fingers, not as a uniform zoom. */
.pool-layer {
  position: absolute;
  inset: 0;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  will-change: opacity, transform;
}
.pool-layer.blob-1 { mask-image: url('/images/wash/blob-1.svg'); }
.pool-layer.blob-2 { mask-image: url('/images/wash/blob-2.svg'); }
.pool-layer.blob-3 { mask-image: url('/images/wash/blob-3.svg'); }

/* base: the pool itself, seeded small, fed by scroll */
.base-wet, .base-dry {
  transform: scale(calc(0.5 + var(--g, 0) * 0.95 + var(--w, 0) * 0.08));
}
.base-wet { opacity: calc(0.35 + var(--w, 0) * 0.65); }
.base-dry { opacity: calc(1 - var(--w, 0) * 0.85); }

/* fingers: reach past the base as the frontier advances; louder while wet */
.finger.f1 {
  transform: rotate(115deg) scale(calc(0.45 + var(--g, 0) * 1.25));
  opacity: calc(clamp(0, (var(--g, 0) - 0.3) * 2.8, 1) * (0.4 + var(--w, 0) * 0.45));
}
.finger.f2 {
  transform: rotate(230deg) scale(calc(0.4 + var(--g, 0) * 1.45));
  opacity: calc(clamp(0, (var(--g, 0) - 0.55) * 3, 1) * (0.35 + var(--w, 0) * 0.45));
}

/* granulation: the paper's tooth, slightly louder inside the bloom */
.pool-layer.grain {
  transform: scale(calc(0.5 + var(--g, 0) * 0.95));
  opacity: calc(0.02 + var(--g, 0) * 0.045);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

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

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 380;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.voice {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 340;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 26em;
}

/* ---------- layout ---------- */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4.5vw, 3.5rem);
}

/* ---------- header ---------- */

/* The header stays: navigation is always within reach, floating on a
   translucent wash of the paper itself. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 1.4rem 0 1.2rem;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 430;
  letter-spacing: 0.005em;
}
.wordmark span {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.site-nav {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.site-nav a {
  color: var(--ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s var(--ease-wash), border-color 0.5s var(--ease-wash);
}
.site-nav a:hover { color: var(--ink); border-color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

/* The quiet menu: the rest of the rooms, folded away to keep the header
   focused. A details element, so it works without any script. */
.nav-more { position: relative; }
.nav-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 2px;
}
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink-soft);
  transition: background 0.4s;
}
.nav-more summary:hover span { background: var(--accent); }
.nav-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.9rem);
  min-width: 10rem;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 0.6rem 0;
  display: flex;
  flex-direction: column;
  animation: menublot 0.5s var(--ease-wash);
}
.nav-menu a {
  padding: 0.55rem 1.2rem;
  border-bottom: none;
}
.nav-menu a:hover { color: var(--accent); }
@keyframes menublot { from { opacity: 0; } to { opacity: 1; } }

/* ---------- hero ---------- */

.hero {
  padding: clamp(3rem, 9vh, 7rem) 0 clamp(3rem, 8vh, 6rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  max-width: 11em;
}
.hero h1 em {
  font-style: italic;
  font-weight: 340;
  color: var(--accent);
}
.hero .voice { margin-top: 1.6rem; }

/* the artist's name resolves from a soft blur, like pigment finding its edge */
.hero-resolve {
  animation: resolve 1.6s var(--ease-wash) both;
}
@keyframes resolve {
  from { opacity: 0; filter: url(#aqua-edge) blur(14px); }
  to   { opacity: 1; filter: url(#aqua-edge) blur(0); }
}

/* ---------- aquarelle type ----------
   Display type composed of the watercolor surfaces themselves: pigment
   gradient and paper-tooth granulation clipped inside the glyphs, edges
   pulled organic by turbulence, a soft bleed breathing behind the strokes,
   and the pigment drifting too slowly to watch. */
.aquarelle-type {
  --t1: #2e6f9d;
  --t2: #34606d;
  --t3: #b07a2a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23g)' opacity='0.13'/%3E%3C/svg%3E"),
    linear-gradient(107deg,
      color-mix(in srgb, var(--t1) 88%, var(--ink)) 0%,
      color-mix(in srgb, var(--t1) 72%, var(--paper)) 26%,
      color-mix(in srgb, var(--t2) 90%, var(--ink)) 52%,
      color-mix(in srgb, var(--t3) 82%, var(--paper)) 78%,
      color-mix(in srgb, var(--t3) 92%, var(--ink)) 100%);
  background-size: auto, 170% 120%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: url(#aqua-edge);
  text-shadow: 0 0 30px color-mix(in srgb, var(--t1) 22%, transparent);
  animation: resolve 1.6s var(--ease-wash) both, aqua-drift 46s ease-in-out 1.6s infinite alternate;
}
.aquarelle-type em { color: transparent; }

/* Once the type-painter has painted, the CSS costume comes off: the real
   text stays (transparent, selectable, spoken) while the canvas is the
   paint itself, multiplied into the paper like every other glaze. */
.aquarelle-type.painted {
  background: none;
  filter: none;
  text-shadow: none;
  animation: none;
  position: relative;
  display: block;
}
.aquarelle-type.painted .aqua-src {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.aqua-paint {
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@keyframes aqua-drift {
  from { background-position: 0 0, 0% 20%; }
  to   { background-position: 0 0, 100% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .aquarelle-type { animation: none; }
}

/* ---------- curated flow (home) ---------- */

.flow { padding-bottom: 5rem; }

.flow-piece {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: end;
  margin: clamp(4rem, 12vh, 9rem) 0;
}
.flow-piece .frame-link { grid-column: 1 / span 8; }
.flow-piece.alt .frame-link { grid-column: 5 / span 8; }
.flow-piece .caption {
  grid-column: 9 / span 4;
  padding-bottom: 0.5rem;
}
.flow-piece.alt .caption {
  grid-column: 1 / span 4;
  grid-row: 1;
  text-align: right;
}
.flow-piece.quiet .frame-link { grid-column: 3 / span 6; }
.flow-piece.quiet .caption { grid-column: 9 / span 4; }

.flow-line {
  margin: clamp(5rem, 14vh, 10rem) auto;
  text-align: center;
}
.flow-line .voice { margin: 0 auto; }

.caption h3 {
  font-size: 1.4rem;
  margin-bottom: 0.4rem;
}
.caption .meta {
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.caption .thread {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- frames (the mat around every painting) ---------- */

.frame {
  position: relative;
  background: var(--paper-deep);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: auto;
}
a.frame-link { display: block; }
a.frame-link .frame {
  transition: box-shadow 0.7s var(--ease-wash);
}
a.frame-link:hover .frame {
  box-shadow: 0 6px 42px rgba(60, 50, 35, 0.18), 0 2px 8px rgba(60, 50, 35, 0.08);
}

/* blur-up: tinted wash resolves to the painting */
.wash {
  background-color: var(--wash, var(--paper-deep));
}
.wash img {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.1s var(--ease-wash), filter 1.4s var(--ease-wash);
}
.wash img.settled {
  opacity: 1;
  filter: blur(0);
}

/* scroll reveal — everything blooms, nothing slides */
.bloom {
  opacity: 0;
  transition: opacity 1.2s var(--ease-wash);
}
.bloom.in { opacity: 1; }

/* ---------- collections index ---------- */

.page-head { padding: clamp(2rem, 6vh, 4.5rem) 0 2.5rem; }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-head p {
  margin-top: 1rem;
  color: var(--ink-soft);
  max-width: 38em;
}

.rooms {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: 6rem;
}
.room {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  align-items: center;
}
.room .frame-link { grid-column: 1 / span 7; }
.room:nth-child(even) .frame-link { grid-column: 6 / span 7; }
.room .room-text { grid-column: 8 / span 5; }
.room:nth-child(even) .room-text { grid-column: 1 / span 5; grid-row: 1; text-align: right; }
.room h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0.5rem 0 0.7rem; }
.room p { color: var(--ink-soft); font-size: 0.98rem; }

/* Courting a doorway: the room's atmosphere deepens when you consider it. */
.room .frame-link { position: relative; }
.room .frame-link::before {
  content: "";
  position: absolute;
  inset: -7% -9%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, var(--paper)) 0%, transparent 76%);
  mix-blend-mode: multiply;
  filter: blur(16px);
  opacity: 0.35;
  transition: opacity 1.4s var(--ease-wash);
}
.room:hover .frame-link::before { opacity: 0.85; }

/* ---------- the threshold (collections index) ----------
   Two rooms' washes reach toward each other as the reader passes between
   them; the reserve of dry paper narrows but never closes. */
.threshold {
  position: relative;
  height: 175px;
  margin: -0.5rem 0;
  pointer-events: none;
}
.th-above, .th-below {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 72px;
  mix-blend-mode: multiply;
  filter: blur(10px);
  will-change: transform, opacity;
}
.th-above {
  top: 0;
  transform: translateY(calc(var(--meet, 0) * 14px));
  opacity: calc(0.35 + var(--meet, 0) * 0.6);
  background:
    radial-gradient(30% 100% at 16% 0%, color-mix(in srgb, var(--above) 30%, var(--paper)) 0%, transparent 74%),
    radial-gradient(20% 58% at 43% 0%, color-mix(in srgb, var(--above) 24%, var(--paper)) 0%, transparent 68%),
    radial-gradient(26% 86% at 66% 0%, color-mix(in srgb, var(--above) 28%, var(--paper)) 0%, transparent 72%),
    radial-gradient(18% 52% at 90% 0%, color-mix(in srgb, var(--above) 22%, var(--paper)) 0%, transparent 66%);
}
.th-below {
  bottom: 0;
  transform: translateY(calc(var(--meet, 0) * -14px));
  opacity: calc(0.35 + var(--meet, 0) * 0.6);
  background:
    radial-gradient(22% 62% at 10% 100%, color-mix(in srgb, var(--below) 24%, var(--paper)) 0%, transparent 68%),
    radial-gradient(28% 100% at 34% 100%, color-mix(in srgb, var(--below) 30%, var(--paper)) 0%, transparent 74%),
    radial-gradient(19% 55% at 60% 100%, color-mix(in srgb, var(--below) 22%, var(--paper)) 0%, transparent 66%),
    radial-gradient(27% 90% at 85% 100%, color-mix(in srgb, var(--below) 27%, var(--paper)) 0%, transparent 72%);
}

/* ---------- collection (masonry that respects aspect ratios) ---------- */

.masonry {
  columns: 2;
  column-gap: 2.2rem;
  padding-bottom: 5rem;
}
@media (min-width: 900px) { .masonry { columns: 3; } }
.masonry .piece {
  break-inside: avoid;
  margin-bottom: 2.2rem;
}
.piece .caption { padding: 0.8rem 0.2rem 0; }
.piece .caption h3 { font-size: 1.08rem; }
.piece .caption .meta { font-size: 0.8rem; }
.piece .sold {
  color: var(--ink-faint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- work detail ---------- */

.work {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 4vh, 3rem) 0 5rem;
}
.work .stage { grid-column: 1 / span 7; }
.work .panel { grid-column: 8 / span 5; }

/* ---------- the easel (work page) ----------
   One painting's presence fills its corner of the gallery: its own pigment
   breathes slowly around the frame, its accent is pulled once beneath its
   name like a curator's underline, and the wall label settles like a wash
   drying. The walk carries a daub of the neighboring paintings' pigment. */
.stage { position: relative; }
.stage::before, .stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(26px);
  pointer-events: none;
}
.stage::before {
  inset: -12% -18% auto -14%;
  height: 70%;
  background: radial-gradient(closest-side at 40% 45%, color-mix(in srgb, var(--accent) 16%, var(--paper)) 0%, transparent 75%);
  animation: soup-drift 23s ease-in-out infinite alternate;
}
.stage::after {
  inset: auto -16% -14% 30%;
  height: 65%;
  background: radial-gradient(closest-side at 55% 55%, color-mix(in srgb, var(--accent) 12%, var(--paper)) 0%, transparent 72%);
  animation: soup-drift 29s ease-in-out infinite alternate;
  animation-delay: -11s;
}

.brush-pull {
  display: block;
  width: min(240px, 62%);
  height: 12px;
  margin: 0.7rem 0 0.1rem;
  overflow: visible;
}
.brush-pull path {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 75%, var(--paper));
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.55;
  filter: blur(0.4px);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: brushpull 1.5s var(--ease-wash) 1.1s forwards;
}
@keyframes brushpull { to { stroke-dashoffset: 0; } }

.panel .meta div {
  opacity: 0;
  filter: blur(3px);
  animation: labelset 1s var(--ease-wash) forwards;
}
.panel .meta div:nth-child(1) { animation-delay: 0.45s; }
.panel .meta div:nth-child(2) { animation-delay: 0.62s; }
.panel .meta div:nth-child(3) { animation-delay: 0.8s; }
.panel .meta div:nth-child(4) { animation-delay: 0.98s; }
@keyframes labelset { to { opacity: 1; filter: blur(0); } }

.walk-daub {
  display: inline-block;
  width: 13px;
  height: 12px;
  margin: 0 0.55rem;
  vertical-align: -1px;
  mask-image: url('/images/wash/blob-1.svg');
  mask-size: 100% 100%;
  background: color-mix(in srgb, var(--n-accent, var(--accent)) 48%, var(--paper));
  mix-blend-mode: multiply;
  transition: transform 0.8s var(--ease-wash);
}
.work-nav a:hover .walk-daub { transform: scale(1.4); }

.stage .frame { cursor: zoom-in; }
.stage .hint {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.panel h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.panel .meta {
  margin: 1.1rem 0 1.8rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.9;
}
.panel .meta strong {
  color: var(--ink-faint);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  width: 7.5em;
}
.panel .story {
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  white-space: pre-line;
}

.acquire { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.85rem 1.7rem;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  transition: background 0.5s var(--ease-wash), color 0.5s var(--ease-wash);
}
.btn:hover { background: var(--accent); color: var(--paper); }
.btn.solid { background: var(--accent); color: var(--paper); }
.btn.solid:hover { opacity: 0.88; }

.status-sold {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.provenance {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.provenance a { border-bottom: 1px solid var(--line); }

.work-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 1.6rem 0 4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.work-nav a:hover { color: var(--accent); }

/* ---------- zoom overlay (standing close) ---------- */

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  display: none;
  overflow: auto;
  cursor: zoom-out;
}
.zoom-overlay.open { display: block; animation: zoomfade 0.6s var(--ease-wash); }
@keyframes zoomfade { from { opacity: 0; } to { opacity: 1; } }

/* the wet lens: standing close begins soft, settles sharp as you hold still */
.zoom-overlay.open img { animation: settle 1.3s var(--ease-wash) both; }
@keyframes settle {
  from { filter: blur(14px) saturate(1.12); opacity: 0.65; }
  to   { filter: blur(0) saturate(1); opacity: 1; }
}
.zoom-overlay img {
  width: 170%;
  max-width: none;
  margin: 3vh auto;
  display: block;
}
.zoom-overlay .zoom-close {
  position: fixed;
  top: 1.2rem; right: 1.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
}

/* ---------- about / commissions ---------- */

.prose {
  max-width: 42em;
  padding-bottom: 5rem;
}
.prose p { margin-bottom: 1.4rem; color: var(--ink-soft); }
.prose p:first-of-type {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--ink);
}
.prose h2 {
  font-size: 1.6rem;
  margin: 2.6rem 0 1rem;
}
.prose a { color: var(--accent); border-bottom: 1px solid var(--line); }

/* ---------- the distill carousel (about page) ----------
   Transitions arrive as runny pigment: drops of the incoming painting's
   colors gather, merge, and resolve into the actual work. */

.studio-carousel { margin: 2.5rem auto 4rem; max-width: 980px; }

/* The stage has no hard frame: all four edges fade to paper around 12px
   corners, and a slow soup of the resident painting's colors drifts around
   it, a frame that is fluid instead of built. */
.distill {
  position: relative;
}
.distill-soup {
  position: absolute;
  inset: -9% -12%;
  pointer-events: none;
}
.distill-soup div {
  position: absolute;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(26px);
  opacity: 0.4;
  animation: soup-drift var(--soup-dur, 20s) ease-in-out infinite alternate;
}
.distill-soup div:nth-child(1) { left: -4%; top: 2%; --soup-dur: 19s; }
.distill-soup div:nth-child(2) { right: -6%; top: 12%; --soup-dur: 26s; animation-delay: -8s; }
.distill-soup div:nth-child(3) { left: 20%; bottom: -8%; --soup-dur: 22s; animation-delay: -13s; }
.distill-soup div:nth-child(4) { right: 14%; bottom: -4%; --soup-dur: 17s; animation-delay: -5s; }
.distill-soup div:nth-child(5) { left: 42%; top: -8%; --soup-dur: 29s; animation-delay: -19s; }
@keyframes soup-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, -5%) scale(1.14); }
  100% { transform: translate(-5%, 4%) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .distill-soup div { animation: none; }
}

.distill-mat {
  position: relative;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Every painting fades to true transparent at its own content edges,
   whatever its aspect ratio. The clip trims the photographed paper borders
   some source images carry (which were stopping the fade short of full
   transparency); the mask then feathers from the clip line inward. */
.distill-img, .distill-fadebox {
  border-radius: 12px;
  clip-path: inset(2.6% round 12px);
  mask-image:
    linear-gradient(to right, transparent 2.6%, #000 14%, #000 86%, transparent 97.4%),
    linear-gradient(to bottom, transparent 2.6%, #000 15%, #000 85%, transparent 97.4%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.distill-link { display: contents; }
.distill-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  cursor: pointer;
}

/* The incoming painting condenses out of staggered pigment pools inside a
   fade box fitted (by JS) to exactly the box the new image will occupy.
   The pigment layer leads and yields to the true image as it sharpens. */
.distill-fadebox {
  position: absolute;
  pointer-events: none;
}
.distill-incoming, .distill-pigment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.distill-incoming { object-fit: fill; }
.distill-pigment {
  mix-blend-mode: multiply;
  filter: blur(10px);
}

/* During a pour, one continuous pool of the incoming palette floods the
   sheet and past its border, swirls, and then yields as the next painting
   congeals inside it. Two counter-drifting pigment sheets keep the pool's
   interior alive; the organic mask keeps its boundary from being a box. */
.distill-flood {
  position: absolute;
  inset: -30% -22%;
  mask-image: url('/images/wash/blob-2.svg');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: blur(22px);
  opacity: 0;
  pointer-events: none;
}
.flood-a, .flood-b {
  position: absolute;
  inset: -12%;
  will-change: transform;
}

/* Navigation lives under the sheet, beside the dots: it never covers art. */
.distill-arrow {
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  transition: color 0.4s;
}
.distill-arrow:hover { color: var(--accent); }

.distill-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 0.2rem 0;
}
.distill-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.distill-caption {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.distill-dots { display: flex; gap: 0.7rem; }
.distill-dots button {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.5s var(--ease-wash), border-color 0.5s;
}
.distill-dots button[aria-current="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- studio quotes ---------- */

.studio-quote {
  margin: 3rem 0 3.2rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--accent);
}
.studio-quote .voice { font-size: 1.25rem; }
.studio-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- the dissolve (about page) ----------
   The title's pigment comes undone as the reader scrolls and runs to the
   margins as meandering runnels, developing down the whole page. */

.about-margins {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: clip;
  z-index: 0;
}
.runnels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
/* The runnels are the title's own ink: what leaves the letters is what
   runs down the margins. Path geometry and dash lengths are computed in
   pixel space by about.js so every engine draws them identically. */
.runnel path {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 62%, var(--paper));
  stroke-linecap: round;
}
.runnel { filter: blur(2.5px); }
.runnel .w1 { stroke-width: 30px; opacity: 0.1; }
.runnel .w2 { stroke-width: 13px; opacity: 0.16; }
.runnel .w3 { stroke-width: 7px; opacity: 0.26; }
.runnel .w4 { stroke-width: 2.5px; opacity: 0.5; filter: blur(0.5px); }

.about-head { position: relative; }
/* The title carries its own liquid state: a twin of the letters that sags,
   stretches, and runs downward into the pool as the crisp ink fades, so the
   words and the paint are one continuous event. */
.dissolve-title { position: relative; }
.dissolve-crisp { will-change: filter, opacity; }
.dissolve-liquid {
  position: absolute;
  inset: 0;
  color: color-mix(in srgb, var(--ink) 78%, var(--paper));
  opacity: 0;
  transform-origin: 30% 0%;
  mix-blend-mode: multiply;
  pointer-events: none;
  will-change: filter, opacity, transform;
}
/* The pool the letters dissolve into: it deepens as the ink leaves the
   words, stretches toward both margins to feed the drips, and never
   reaches below the heading block (the carousel stays dry). */
.dissolve-halo {
  position: absolute;
  top: -12%;
  left: -6%;
  width: 112%;
  height: 108%;
  background:
    radial-gradient(closest-side at 50% 48%, color-mix(in srgb, var(--ink) 22%, var(--paper)) 0%, color-mix(in srgb, var(--ink) 10%, var(--paper)) 50%, transparent 74%),
    radial-gradient(closest-side at 14% 60%, color-mix(in srgb, var(--ink) 14%, var(--paper)) 0%, transparent 66%),
    radial-gradient(closest-side at 86% 60%, color-mix(in srgb, var(--ink) 14%, var(--paper)) 0%, transparent 66%);
  mix-blend-mode: multiply;
  filter: blur(16px);
  opacity: 0;
  pointer-events: none;
}
/* Ink daubs that spread the way paint spreads when it hits wet paper:
   irregular silhouettes, a soft traveling body, and the darker rim a
   settling wash leaves at its frontier. They bloom slowly, from a drop. */
.margin-daub {
  position: absolute;
  width: clamp(24px, 2.6vw, 42px);
  aspect-ratio: 1.08;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background:
    radial-gradient(closest-side at 46% 44%,
      color-mix(in srgb, var(--ink) 32%, var(--paper)) 0%,
      color-mix(in srgb, var(--ink) 16%, var(--paper)) 52%,
      transparent 76%),
    radial-gradient(closest-side,
      transparent 54%,
      color-mix(in srgb, var(--ink) 42%, var(--paper)) 68%,
      transparent 80%);
  mix-blend-mode: multiply;
  filter: blur(0.6px);
  opacity: 0;
  transform: scale(0.2) rotate(var(--rot, 0deg));
  transition: opacity 2s var(--ease-wash), transform 2.8s var(--ease-wash);
}
.margin-daub.in { opacity: 0.9; transform: scale(1) rotate(var(--rot, 0deg)); }
.margin-daub.d1 { --rot: 24deg; mask-image: url('/images/wash/blob-1.svg'); left: clamp(12px, 1.8vw, 32px); top: 34%; }
.margin-daub.d2 { --rot: 150deg; mask-image: url('/images/wash/blob-3.svg'); right: clamp(12px, 1.8vw, 32px); top: 56%; }
.margin-daub.d3 { --rot: 275deg; mask-image: url('/images/wash/blob-2.svg'); left: clamp(16px, 2.2vw, 38px); top: 78%; }

@media (max-width: 1100px) {
  .about-margins { display: none; }
}

/* ---------- the blank sheet (commissions) ----------
   A study pinned beside the prose that comes into being as you read:
   paper, pencil, washes, signature. */
.commissions-layout {
  display: grid;
  grid-template-columns: minmax(0, 42em) 1fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.study {
  position: sticky;
  top: 130px;
  justify-self: center;
  padding-top: 1.2rem;
}
.study-sheet {
  display: block;
  width: min(400px, 30vw);
  height: auto;
  filter: drop-shadow(0 3px 20px rgba(60, 50, 35, 0.13));
}
@media (max-width: 1080px) {
  .commissions-layout { display: block; }
  .study { display: none; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2.6rem 0 3rem;
  position: relative;
  z-index: 1;
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.site-footer a:hover { color: var(--accent); }
.site-footer nav { display: flex; gap: 1.6rem; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .flow-piece, .work, .room { display: block; }
  .flow-piece .caption, .flow-piece.alt .caption { text-align: left; padding-top: 1rem; }
  .room .room-text, .room:nth-child(even) .room-text { text-align: left; padding-top: 1rem; margin-bottom: 3rem; }
  .room { margin-bottom: 2.5rem; }
  .masonry { columns: 1; }
  .panel { padding-top: 2rem; }
  .studio-strip { display: block; }
  .studio-strip .frame { margin-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bloom, .hero-resolve { animation: none; transition: none; opacity: 1; filter: none; }
  .wash img { transition: none; }
  .zoom-overlay.open img { animation: none; }
  .sheet { display: none; }
  .stage::before, .stage::after { animation: none; }
  .brush-pull path { animation: none; stroke-dashoffset: 0; }
  .panel .meta div { animation: none; opacity: 1; filter: none; }
}