/* Precision × signal noise: a static, bounded layer over the original grid. */
.hero-art::after, .about-art::after, .session-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E") repeat;
}

.header {
  background: transparent;
  border-bottom: 0;
  color: #fff;
  mix-blend-mode: difference;
}
.header a, .header a:hover { color: inherit; }
.header a:hover { opacity: .7; }

/* One blurred chromatic field; the exact record geometry stays in front. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 10% -6% 6% -10%;
  background:
    radial-gradient(ellipse at 34% 32%, #98abb4 0, transparent 48%),
    radial-gradient(ellipse at 70% 60%, #b47551 0, transparent 43%),
    radial-gradient(ellipse at 30% 77%, #a3a083 0, transparent 39%),
    conic-gradient(from 38deg at 54% 49%, #e5d4ad, #f5f2ec 28%, #adb8bb 48%, #d8c4ab 73%, #e5d4ad);
  filter: blur(46px);
  opacity: .3;
  border-radius: 50%;
}

/* One typographic aperture. Dark pigments keep large lettering readable. */
.signal-type { color: #805b43; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .signal-type {
    background-image:
      radial-gradient(ellipse 18% 34% at 7% 65%, #803f2c 0%, transparent 100%),
      radial-gradient(ellipse 17% 32% at 27% 61%, #263238 0%, transparent 100%),
      radial-gradient(ellipse 18% 34% at 43% 78%, #b4a17c 0%, transparent 100%),
      conic-gradient(from 55deg at 46% 54%, #793e2b, #20282b, #b5a17d, #384548, #793e2b);
    background-size: 100vw 100vh;
    background-attachment: scroll;
    background-position: 0 var(--signal-y, 0px);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.about-art .signal-echo {
  width: 118%;
  height: 118%;
  left: -8%;
  top: -1%;
}

@media (max-width: 700px) {
  .hero-art::after, .about-art::after { opacity: .11; }
  .hero-art::before { opacity: .22; filter: blur(25px); }
  .signal-type { background-attachment: scroll; background-size: 130% 160%; background-position: 50% 65%; }
  .about-art .signal-echo { width: 130%; height: 195%; left: -12%; top: -7%; }
}
/* Touch Safari does not reliably combine fixed backgrounds and text clipping. */
@supports (-webkit-touch-callout: none) {
  .signal-type { background-attachment: scroll; background-size: 130% 160%; background-position: 50% 65%; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-type { background-attachment: scroll; background-size: 130% 160%; }
}
@media (forced-colors: active) {
  .hero-art::after, .about-art::after, .hero-art::before { display: none; }
  .header { mix-blend-mode: normal; color: CanvasText; }
  .signal-type { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

/* A shared editorial canvas: geometry is positioned, never a second column. */
.hero.split { display: block; position: relative; min-height: clamp(850px, 83vw, 1190px); }
.hero-copy { min-height: clamp(850px, 83vw, 1190px); padding: clamp(105px, 9vw, 150px) var(--gutter) clamp(35px, 4vw, 64px); }
.hero .artist { padding: 0; margin: clamp(86px, 10vw, 160px) 0 auto; }
.hero h1 { font-size: clamp(64px, 17.4vw, 250px); letter-spacing: -.06em; }
.hero-bottom { width: min(100%, 510px); max-width: none; background: transparent; }
.hero-art { position: absolute; inset: 80px -15% 170px 28%; border: 0; background: transparent; opacity: .78; z-index: 0; }
.hero-record { width: 140%; height: 125%; right: -30%; bottom: -12%; }
.hero-art .figure { display: none; }
.hero-art::before { opacity: .34; filter: blur(clamp(25px, 3vw, 46px)); }

.about.split { display: block; position: relative; overflow: hidden; }
.about-copy { position: relative; z-index: 2; padding: clamp(65px, 7vw, 110px) var(--gutter) clamp(380px, 31vw, 470px); }
.about h2 { font-size: clamp(66px, 12vw, 170px); margin: 24px 0 36px; }
.about .bio, .about-link { width: min(100%, clamp(340px, 48vw, 650px)); max-width: 650px; }
.about .bio { font-size: 15px; }
.about-art { position: absolute; width: clamp(440px, 78vw, 1200px); height: clamp(390px, 65vw, 940px); bottom: 0; right: clamp(-100px, -5vw, -20px); border: 0; background: transparent; }
.about-art .signal-echo { width: 120%; height: 155%; left: -8%; top: -6%; }
.about-art .figure { right: clamp(65px, 9vw, 150px); }
.practice-copy h2 { position: relative; z-index: 3; margin-left: clamp(-95px, calc((700px - 100vw) * .13), 0px); color: #fff; mix-blend-mode: difference; }
.practice-copy h2 .accent { color: #42b2d7; }
/* Feather the material itself so it never reads as a rectangular panel. */
.hero-art::after, .about-art::after { mask-image: radial-gradient(ellipse at 60% 55%, #000 10%, transparent 72%); }
.hero-art { mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent); }
.about-art { mask-image: linear-gradient(transparent, #000 15%); }
.practice-copy h2 .accent { display: inline-block; transform: translateX(clamp(0px, calc((100vw - 700px) * .13), 95px)); }

/* Final material balance: paper grain only in the existing artwork zones. */
.hero-art::after { opacity: .025; }
.session-art::after { opacity: .04; }
.about-art::after { opacity: .05; }

/* Public contact hierarchy; long booking address fits the existing narrow column. */
.contact-links small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.contact-links .contact-primary { font-size: clamp(17px, 1.6vw, 25px); letter-spacing: -.025em; }
.contact-links > a > span { min-width: 0; overflow-wrap: anywhere; }