:root {
  --tidal-paper: #f8f1d7;
  --tidal-ink: #183e48;
  --tidal-line: #d8cfb3;
  --art-teal: #277e79;
  --art-yellow: #e5ba4d;
  --art-rose: #d88a87;
  --art-blue: #384d9a;
  --art-paper: #f8f1d7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; background: var(--tidal-paper); }
body { margin: 0; color: var(--tidal-ink); background: var(--tidal-paper); font-family: var(--font-sans, 'Inter', sans-serif); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border-radius: 0; }
a { color: inherit; text-decoration: none; border: 0; }
a:hover { color: inherit; border: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--tidal-ink); outline-offset: 6px; }
button:disabled { cursor: default; }
::selection { color: var(--tidal-ink); background: #e9c265; }
.visually-hidden { position: absolute; height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; left: 20px; top: -80px; padding: 12px 20px; z-index: 10; background: var(--tidal-paper); border: 1px solid var(--tidal-ink); }
.skip-link:focus { top: 20px; }
.site-header { min-height: 118px; margin: 0 4.4%; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--tidal-line); }
.identity { display: inline-flex; align-items: center; gap: 13px; }
.identity img { width: 42px; height: 45px; object-fit: contain; }
.wordmark, .footer-wordmark { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-size: 29px; line-height: 1; letter-spacing: -1.2px; font-weight: 400; }
.wordmark > span { display: block; font-family: var(--font-sans, 'Inter', sans-serif); font-size: 7px; letter-spacing: 1.65px; margin-top: 9px; line-height: 1.3; font-weight: 500; }
.site-header nav { display: flex; gap: 36px; align-items: center; font-size: 11px; }
.site-header nav a { padding: 9px 0; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-header nav .back-link { margin-left: 28px; }
.back-link span { margin-left: 9px; }
.hero { min-height: 880px; position: relative; padding: 25px 4.4% 0; overflow: hidden; isolation: isolate; }
.study-line { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1.5px; font-weight: 500; position: relative; z-index: 2; }
.study-line span:last-child { opacity: .67; }
.art-scene { position: absolute; z-index: 0; left: -5.7%; top: 37px; width: 75%; height: 750px; }
.fallback-art, .canvas-host { width: 100%; height: 100%; position: absolute; inset: 0; }
.fallback-art { display: block; transition: opacity 250ms ease; }
.canvas-host canvas { display: block; width: 100%; height: 100%; }
.art-scene[data-renderer='webgl'] .fallback-art { visibility: hidden; }
.art-teal { fill: var(--art-teal); }.art-yellow { fill: var(--art-yellow); }.art-rose { fill: var(--art-rose); }.art-blue { fill: var(--art-blue); }.art-paper { fill: var(--art-paper); }
.art-scene[data-palette='garden'] { --art-teal: #416c5e; --art-yellow: #dfc04f; --art-rose: #d49dac; --art-blue: #84b6bf; }
.art-scene[data-palette='listener'] { --art-teal: #344c87; --art-yellow: #e4cb58; --art-rose: #97c2cf; --art-blue: #bf736c; }
.hero-copy { margin-left: 60%; margin-top: 102px; position: relative; z-index: 1; }
.eyebrow { font-size: 8px; letter-spacing: 1.6px; font-weight: 500; margin: 0 0 26px; line-height: 1.6; }
h1, h2, p { color: inherit; }
h1 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-variation-settings: 'opsz' 96, 'SOFT' 50; font-size: clamp(65px, 7.3vw, 116px); font-weight: 300; line-height: .96; letter-spacing: -.055em; margin: 0 0 32px; }
h1 em { font-weight: 300; letter-spacing: -.065em; }
.hero-description { font-size: 12px; line-height: 1.75; margin: 0 0 24px; }
.text-link { font-size: 10px; display: inline-flex; gap: 26px; border-bottom: 1px solid var(--tidal-ink); padding: 0 0 7px; }
.text-link:hover { border-bottom: 1px solid var(--tidal-ink); gap: 33px; }
.scene-footer { display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; position: absolute; bottom: 44px; left: 4.4%; right: 4.4%; z-index: 2; }
.scene-caption { display: flex; gap: 20px; font-size: 9px; line-height: 1.8; margin: 0; }
.caption-index { font-size: 8px; letter-spacing: 1px; padding-top: 2px; }
.subtle { opacity: .64; font-size: 8px; }
.scene-controls { display: flex; align-items: center; gap: 23px; flex-wrap: wrap; }
.palette-picker { display: flex; gap: 15px; align-items: center; padding: 0; margin: 0; border: 0; }
.palette-picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.palette-button { background: transparent; padding: 7px 0; border: 0; border-bottom: 1px solid transparent; font-size: 9px; display: flex; align-items: center; gap: 5px; }
.palette-button[aria-pressed='true'] { border-bottom-color: var(--tidal-ink); }
.swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.swatch-tidal { background: #277e79; }.swatch-garden { background: #416c5e; }.swatch-listener { background: #344c87; }
.motion-controls { display: flex; align-items: center; gap: 18px; padding-left: 23px; border-left: 1px solid var(--tidal-line); }
.motion-controls button { background: transparent; border: 0; padding: 8px 0; font-size: 9px; display: inline-flex; align-items: center; gap: 6px; }
.motion-controls button:hover { text-decoration: underline; text-underline-offset: 4px; }
.arrangement-number { opacity: .6; font-size: 8px; font-variant-numeric: tabular-nums; }
.motion-controls .motion-icon { font-size: 8px; width: 9px; }
.motion-label { min-width: 29px; text-align: left; }
.works-section { background: #fbf7e9; padding: 88px 6.5% 108px; }
.section-heading { display: grid; grid-template-columns: 1fr 1.55fr 1fr; gap: 36px; align-items: end; margin-bottom: 64px; }
.section-heading .eyebrow { align-self: start; margin-top: 10px; }
h2 { font-family: var(--font-serif, 'Fraunces', Georgia, serif); font-variation-settings: 'opsz' 96, 'SOFT' 50; font-weight: 300; font-size: clamp(32px, 3.2vw, 50px); letter-spacing: -.04em; line-height: 1.1; margin: 0; }
.section-heading > p:last-child { margin: 0 0 3px; font-size: 10px; line-height: 1.8; }
.painting-strip { display: grid; grid-template-columns: 1.05fr 1.18fr .9fr; gap: 5.3%; align-items: start; }
.painting { margin: 0; min-width: 0; }
.painting-garden { margin-top: 62px; }
.painting-listener { margin-top: 18px; }
.painting-open { display: block; position: relative; padding: 0; background: #ede8d9; border: 0; width: 100%; overflow: hidden; }
.painting-open img { display: block; width: 100%; height: 390px; object-fit: cover; transition: transform 500ms ease; }
.painting-garden .painting-open img { height: 355px; }
.painting-listener .painting-open img { height: 315px; }
.painting-open:hover img { transform: scale(1.025); }
.image-cue { position: absolute; left: 0; right: 0; bottom: 0; background: #fbf7e9; display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; font-size: 9px; opacity: 0; transform: translateY(5px); transition: opacity 180ms ease, transform 180ms ease; }
.painting-open:hover .image-cue, .painting-open:focus-visible .image-cue { opacity: 1; transform: none; }
figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 10px; font-size: 10px; }
figcaption span:last-child { font-size: 8px; opacity: .6; }
.painting-meta { font-size: 8px; opacity: .67; line-height: 1.7; margin: 8px 0 0; }
.practice-section { padding: 92px 11% 96px 6.5%; }
.practice-section > .eyebrow { margin-bottom: 47px; }
.practice-content { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12%; }
.practice-content h2 { font-size: clamp(45px, 5.4vw, 82px); line-height: 1.04; }
.practice-note { padding-top: 6px; max-width: 360px; }
.practice-note p { font-size: 11px; line-height: 1.9; margin: 0 0 20px; }
.practice-note .artist-location { font-size: 10px; line-height: 1.8; margin-top: 36px; }
.artist-location span { opacity: .66; font-size: 9px; }
.site-footer { border-top: 1px solid var(--tidal-line); margin: 0 4.4%; padding: 37px 0 40px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 25px; align-items: center; }
.footer-wordmark { font-size: 28px; }
.site-footer p { font-size: 7px; letter-spacing: 1px; margin: 0; text-align: center; }
.site-footer nav { display: flex; justify-content: flex-end; gap: 22px; font-size: 8px; }
.site-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer nav span { margin-left: 7px; }
dialog { width: min(1100px, calc(100% - 48px)); max-height: calc(100dvh - 48px); background: #fbf7e9; color: var(--tidal-ink); padding: 56px 40px 24px; border: 0; border-radius: 0; }
dialog::backdrop { background: rgba(23, 46, 49, .76); }
.dialog-close { position: absolute; top: 18px; right: 25px; display: flex; gap: 16px; align-items: center; font-size: 10px; border: 0; padding: 3px; background: transparent; }
.dialog-close span { font-size: 24px; line-height: 1; }
.dialog-image-wrap { height: min(72dvh, 760px); display: flex; align-items: center; justify-content: center; }
.dialog-image-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dialog-caption { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; }
.dialog-caption h2 { font-size: 24px; }.dialog-caption p { font-size: 10px; margin: 0; }
body:has(dialog[open]) { overflow: hidden; }

@media (min-width: 1600px) {
  .hero { min-height: 1000px; }
  .art-scene { height: 880px; top: 30px; width: 74%; }
  .hero-copy { margin-top: 145px; }
}
@media (max-width: 1120px) {
  .hero { min-height: 790px; }
  .hero-copy { margin-left: 58%; margin-top: 110px; }
  h1 { font-size: clamp(65px, 7.6vw, 90px); }
  .art-scene { width: 79%; left: -12%; height: 660px; top: 40px; }
  .scene-controls { gap: 15px; }
  .palette-picker { gap: 10px; }
  .motion-controls { padding-left: 15px; gap: 12px; }
  .scene-caption { gap: 12px; }
  .section-heading { grid-template-columns: 1fr 1.5fr; }
  .section-heading > p:last-child { grid-column: 2; }
  .painting-open img { height: 315px; }.painting-garden .painting-open img { height: 280px; }.painting-listener .painting-open img { height: 260px; }
  .site-footer { grid-template-columns: 1fr 1fr; }.site-footer p { grid-row: 2; text-align: left; }.site-footer nav { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 760px) {
  .site-header { min-height: 91px; margin: 0 6%; gap: 20px; }
  .identity { gap: 8px; }.identity img { width: 31px; height: 34px; }.wordmark { font-size: 24px; }.wordmark > span { font-size: 5.5px; letter-spacing: 1.2px; margin-top: 6px; }
  .site-header nav { gap: 0; font-size: 9px; }.site-header nav > a:first-child, .site-header nav > a:nth-child(2) { display: none; }.site-header nav .back-link { margin: 0; }
  .hero { min-height: 1060px; padding: 22px 6% 0; }
  .study-line { font-size: 7px; letter-spacing: 1.1px; }.study-line span:last-child { display: none; }
  .hero-copy { margin: 41px 0 0 22%; }
  .hero-copy .eyebrow { margin-bottom: 17px; font-size: 7px; letter-spacing: 1.2px; }
  h1 { font-size: clamp(66px, 13vw, 96px); line-height: .97; margin-bottom: 22px; }
  .hero-description { font-size: 11px; line-height: 1.7; margin-bottom: 16px; }
  .text-link { font-size: 9px; gap: 20px; }
  .art-scene { top: 423px; left: -21%; width: 123%; height: 470px; }
  .scene-footer { bottom: 33px; left: 6%; right: 6%; display: block; }
  .scene-caption { margin-bottom: 22px; gap: 13px; font-size: 8px; }.caption-index { font-size: 7px; }.subtle { font-size: 7px; }
  .scene-controls { justify-content: space-between; gap: 8px; border-top: 1px solid var(--tidal-line); padding-top: 15px; }
  .palette-picker { gap: 12px; }.palette-button { font-size: 8px; gap: 4px; }.swatch { width: 6px; height: 6px; }
  .motion-controls { gap: 11px; padding-left: 12px; }.motion-controls button { font-size: 8px; gap: 4px; }.arrangement-number { display: none; }.motion-label { min-width: 24px; }
  .works-section { padding: 57px 6% 60px; }
  .section-heading { display: block; margin-bottom: 36px; }.section-heading .eyebrow { margin: 0 0 22px; }.section-heading h2 { font-size: 37px; }.section-heading > p:last-child { font-size: 10px; margin-top: 20px; }.desktop-break { display: none; }
  .painting-strip { display: block; }.painting { width: 86%; }.painting-garden { margin: 42px 0 0 14%; }.painting-listener { width: 76%; margin-top: 42px; }
  .painting-open img { height: auto; aspect-ratio: .84; }.painting-garden .painting-open img { height: auto; aspect-ratio: 1; }.painting-listener .painting-open img { height: auto; aspect-ratio: .9; }
  figcaption { font-size: 10px; margin-top: 12px; }.image-cue { opacity: 1; transform: none; position: static; background: transparent; padding: 11px 0 0; }.painting-open { overflow: visible; background: transparent; }.image-cue { display: none; }
  .practice-section { padding: 58px 6% 62px; }.practice-section > .eyebrow { margin-bottom: 29px; }.practice-content { display: block; }.practice-content h2 { font-size: 52px; margin-bottom: 31px; }.practice-note { margin-left: 13%; }.practice-note p { font-size: 10px; }.practice-note .artist-location { margin-top: 26px; }
  .site-footer { margin: 0 6%; padding: 30px 0; gap: 24px; display: block; }.footer-wordmark { font-size: 29px; }.site-footer p { font-size: 6px; margin-top: 17px; }.site-footer nav { justify-content: flex-start; gap: 25px; font-size: 8px; margin-top: 28px; }
  dialog { width: calc(100% - 24px); padding: 52px 16px 21px; max-height: calc(100dvh - 24px); }.dialog-image-wrap { height: 66dvh; }.dialog-close { right: 18px; }.dialog-caption h2 { font-size: 22px; }.dialog-caption p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } }