/* Pinuut V255. Layer coordinates use the approved 971 × 1565 composition. */

:root {
  --accent: #ac2925;
  --cream: #f3dfb8;
  scroll-behavior: smooth;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #151410;
  color: var(--cream);
  font-family: Georgia,serif;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 8% 25%,#504b2524,transparent 42%),radial-gradient(ellipse at 96% 74%,#76412621,transparent 38%),url("assets/outer-texture.webp") center/475px 1350px;
  opacity: .48;
}

button,a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  cursor: pointer;
  color: inherit;
}

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

button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.sr,.dialog-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
}

.skip:focus {
  top: 15px;
  background: #111;
  padding: 15px;
}

.page {
  width: min(1440px,calc(100% - 128px));
  margin: 24px auto 0;
  position: relative;
}

.scene {
  aspect-ratio: 971/1565;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
}

.artwork {
  position: absolute;
  inset: 0;
  z-index: -1;
  mask-image: url("assets/outer-mask.svg");
  mask-size: 100% 100%;
  -webkit-mask-image: url("assets/outer-mask.svg");
  -webkit-mask-size: 100% 100%;
}

.layer {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

.hero {
  top: 0;
  height: 30.671%;
}

.gallery-art {
  top: 27.476%;
  height: 26.198%;
  mask-image: linear-gradient(transparent,#000 3%,#000);
}

.portrait-art {
  top: 51.118%;
  height: 35.144%;
  mask-image: linear-gradient(transparent,#000 3%,#000);
}

.contact-art {
  top: 81.789%;
  height: 18.211%;
  mask-image: url("assets/contact-edge.svg"); mask-size: 100% 100%;
}

.main-nav {
  position: absolute;
  top: 0;
  left: 50.5%;
  right: 1.3%;
  height: 3.2%;
  background: none;
  display: flex;
  align-items: flex-start;
  padding-top: .9cqw;
  justify-content: space-evenly;
  gap: 1cqw;
  font: 1.35cqw/1.3 Georgia,serif;
  text-transform: uppercase;
  letter-spacing: .055em;
  z-index: 8;
  padding-right: 2%;
}

.main-nav a,.main-nav button {
  position: relative;
  border: 0;
  background: none;
  padding: .3cqw 0;
}

.main-nav a:after,.main-nav button:after,.artist-tabs button:after {
  content: "";
  position: absolute;
  bottom: -.28em;
  left: 3%;
  width: 94%;
  height: .16em;
  background: var(--accent);
  clip-path: polygon(0 60%,100% 0,96% 65%,2% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}

.main-nav a:hover:after,.main-nav button:hover:after,.artist-tabs button:hover:after,.artist-tabs button[aria-pressed=true]:after {
  transform: scaleX(1);
}

.hero-request,.talk-request {
  position: absolute;
  background: none;
  border: 0;
  color: transparent;
  font: 3.4cqw/1 PinuutBrush,cursive;
  padding: 1.6cqw 2.8cqw;
  clip-path: none;
  transform: rotate(-6deg);
  transition: filter .2s,translate .2s;
}

.hero-request {
  left: 57%;
  top: 19.55%;
  width: 37%;
  height: 5.5%;
  font-size: 3.45cqw;
}

.hero-request:hover,.talk-request:hover {
  filter: none;
  translate: none;
  background: #ffffff0b;
}

.gallery-ui {
  position: absolute;
  left: 2.5%;
  top: 42.5%;
  width: 36%;
  height: 10%;
  color: #181610;
  background: url("assets/paper-tile.webp") center/120px 80px;
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 8%,#000 88%,transparent);
  padding: .7cqw 1cqw;
  z-index: 6;
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 8%,#000 88%,transparent);
  -webkit-mask-composite: source-in;
  background-size: 100% 100%;
  padding-left: 2.3cqw;
  padding-right: 2.3cqw;
  display: contents;
}

.artist-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}

.artist-tabs button {
  position: relative;
  background: none;
  border: 0;
  font: 2.5cqw/1.3 Georgia,serif;
  padding: 0 .4cqw .25cqw;
  color: inherit;
}

.artist-tabs button[data-artist=selina] {
  --accent: #ac2925;
}

.artist-tabs button[data-artist=kris] {
  --accent: #498bae;
}

.artist-tabs button[data-artist=vii] {
  --accent: #aa69bf;
}

.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 2.1cqw;
  position: absolute;
  left: 5.6%;
  top: 45.8%;
  width: 28%;
  height: 3.9%;
  z-index: 6;
}

.gallery-controls button {
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  width: 4.9cqw;
  height: 4.9cqw;
  font: 4cqw/.8 Arial;
  transition: background .2s,transform .2s;
}

.gallery-controls button:hover {
  background: #0002;
  transform: scale(1.05);
}

.instagram-more {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font: 1.8cqw/1.15 Georgia,serif;
  position: absolute;
  left: 6.4%;
  top: 49.5%;
  width: 28%;
  height: 3.2%;
  z-index: 6;
  opacity: 0;
}

.instagram-more svg {
  width: 3.8cqw;
  height: 3.8cqw;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.instagram-more:hover {
  color: var(--accent);
  opacity: 0;
}

.photo-layout {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  transition: opacity .3s;
}

.photo-slot {
  pointer-events: all;
  cursor: zoom-in;
  transition: filter .2s;
}

.photo-slot:hover {
  filter: brightness(1.08);
}

.artist-copy { display: contents; }

.artist-copy p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.artist-copy .artist-tabs { position: absolute; left: 65.4%; top: 77.9%; width: 24%; height: 3%; margin: 0; z-index: 6; }

.artist-copy .artist-tabs button { color: transparent; flex: 1; height: 100%; padding: 0; }
.artist-copy .artist-tabs button[aria-pressed=true]:after { opacity: 0; }
.artist-copy .artist-tabs button:hover:after { opacity: 1; }
[data-artist=vii] .artist-copy .artist-tabs { top: 80.3%; }

.artist-arrow {
  position: absolute;
  top: 64.5%;
  z-index: 7;
  font: 3cqw/1 Georgia;
  border: 0;
  background: #17161266;
  color: var(--cream);
  width: 4.5cqw;
  height: 5cqw;
  transition: color .2s,transform .2s;
}

.artist-arrow:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

.previous {
  left: -4.8cqw;
}

.next {
  right: -4.8cqw;
}

.talk-request {
  top: 92.6%;
  left: 5%;
  width: 29%;
  height: 3.4%;
  font-size: 2.4cqw;
  padding: .7cqw;
}

.event-request {
  position: absolute;
  left: 53%;
  top: 84%;
  width: 39%;
  height: 13%;
  background: none;
  border: 0;
  border-radius: 10px;
  transition: box-shadow .2s;
}

.event-request:hover {
  box-shadow: inset 0 0 0 2px #eed7b866;
}

.contact-small {
  position: absolute;
  left: 11.8%;
  top: 96.7%;
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 1.2cqw;
  background: none;
  padding: 0;
  color: transparent;
}

.contact-small button {
  border: 0;
  background: none;
  color: #201910;
  border-bottom: 1px solid #201910;
  display: none;
}

.site-footer { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; gap: 4%; padding: 30px 7% 42px; margin-top: -1px; font-size: clamp(13px,1.2vw,17px); }
.site-footer:before { content: ""; position: absolute; z-index: -1; inset: -70px 0 -8px; background: radial-gradient(ellipse at 5% 58%,#66252225,transparent 42%),radial-gradient(ellipse at 96% 80%,#7971431c,transparent 36%); mask-image: linear-gradient(transparent,#000 27%,#000 80%,transparent),linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-composite: intersect; }
.footer-brand { display: block; max-width: 250px; }
.footer-brand img { display: block; width: 100%; height: auto; }
.footer-details { text-align: center; line-height: 1.8; }
.footer-place { text-transform: uppercase; letter-spacing: .16em; font-size: .7em; }
.footer-details nav { display: flex; justify-content: center; gap: 1em; margin: 10px 0 3px; }
.footer-details small { font-size: .67em; opacity: .65; }
.site-footer a { transition: color .2s,filter .2s; }
.site-footer a:hover { color: var(--accent); filter: brightness(1.15); }
.site-footer .credit img { width: 100%; max-width: 210px; }
.site-footer .credit span { font-size: 11px; letter-spacing: .08em; opacity: .75; }
@media(max-width:700px) { .site-footer { grid-template-columns: 1fr 1fr; padding: 25px 8% 30px; }.footer-details { grid-column: 1/-1; grid-row: 2; }.footer-brand { max-width: 170px; }.site-footer .credit img { max-width: 150px; } }

.site-footer a:hover {
  color: #fff;
}

.credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.credit span {
  font-size: 13px;
}

.credit img {
  width: clamp(150px,19vw,240px);
  height: auto;
}

.pinuut-dialog .contact-shell {
  background-image: url("assets/contact-paper-2188.webp");
}

.pinuut-dialog .lightbox-shell {
  background-image: url("assets/gallery-paper-2172.webp");
}

.pinuut-dialog .contact-shell:before,.pinuut-dialog .lightbox-shell:before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ba87231c;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page [aria-busy=true] {
  cursor: progress;
}

.photo-layout.is-changing {
  opacity: .35;
  transition: opacity .15s;
}

.layer-outgoing {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  animation: layer-out .48s ease both;
}

@keyframes layer-out{to{opacity:0}}

@media(min-width:1500px){.page{width:min(1440px,calc(100% - 128px))}}

@media(max-width:1100px){.page{width:calc(100% - 32px);margin-top:12px}.artist-arrow{width:4cqw;background:#161511c0}.previous{left:.5%}.next{right:.5%}}

@media(max-width:700px){.page{width:100%;margin-top:0}.site-footer{gap:5%;padding-bottom:30px}.main-nav{font-size:1.8cqw}.credit img{width:150px}.pinuut-dialog#info,.pinuut-dialog#lightbox{width:min(740px,96vw);max-height:96dvh}.scene{scroll-margin-top:0}}

@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.gallery-ui>.artist-tabs {
  position: absolute;
  left: 6.3%;
  top: 42.1%;
  width: 27.8%;
  height: 2.8%;
  z-index: 6;
}

.gallery-ui>.artist-tabs button {
  color: transparent;
  width: 30%;
  height: 100%;
  padding: 0;
}

.gallery-ui>.artist-tabs button:after {
  bottom: 2px;
}

.gallery-ui>.artist-tabs button[aria-pressed=true]:not(:hover):after {
  transform: scaleX(0);
}

.gallery-controls span {
  display: grid;
  place-items: center;
  width: 11.4cqw;
  height: 4cqw;
  color: #171612;
  background: url("assets/paper-tile.webp") center/100% 100%;
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  font: 2.1cqw Georgia,serif;
}

.instagram-more:focus-visible {
  opacity: 1;
  background: #e9c593;
}

.contact-social {
  position: absolute;
  top: 95.5%;
  height: 4%;
  width: 5.4%;
  z-index: 8;
  border-radius: 10px;
}

.contact-social:hover {
  background: #a728231c;
  box-shadow: 0 0 0 2px #a7282399;
}

.contact-social.whatsapp {
  left: 37.3%;
}

.contact-social.instagram {
  left: 45%;
}

.gallery-ui>.artist-tabs button:nth-child(1) {
  position: absolute;
  left: 0;
  width: 31%;
}

.gallery-ui>.artist-tabs button:nth-child(2) {
  position: absolute;
  left: 42%;
  width: 27%;
}

.gallery-ui>.artist-tabs button:nth-child(3) {
  position: absolute;
  left: 76%;
  width: 21%;
}

.section-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  scroll-margin-top: 20px;
}

[data-artist=vii] .artist-copy { display: contents; }

/* The original header lettering remains visible; native links own interaction. */
.main-nav a,.main-nav button { color: transparent; }

/* Vi retains her unchanged original transition. */

/* V257: separate lettering and shared printed footer, original art preserved. */
.artist-intro-label { position:absolute; z-index:5; left:61.5%; top:56.2%; width:32%; text-align:center; font:3.4cqw/1.25 PinuutBrush,cursive; color:#eadaba; transform:rotate(-3deg); pointer-events:none; }
.scene { z-index:1; }
.site-footer { z-index:0; margin-top:-3.6%; aspect-ratio:971/260; padding:6% 8% 3%; }
.site-footer:before { inset:0; background:url("assets/footer-print-v257.png") center/100% 100% no-repeat; mask-image:url("assets/footer-edge-v257.svg"); mask-size:100% 100%; }
.site-footer .footer-brand { max-width:240px; }
.site-footer .credit { gap:8px; }
.site-footer .footer-details { line-height:1.7; }
@media(max-width:700px) { .site-footer { min-height:240px; aspect-ratio:auto; padding:40px 9% 25px; } }

/* V263: preserve Kris’ hair overlap without moving his backdrop or text. */
.portrait-art[src$="artist-kris-v265.svg"] { top:48.5623%; height:37.6997%; mask-image:none; }

/* V264: original drawn marks recolored in their own asset masks. */
.footer-address { font-style:normal; color:#eadaba; font-size:1em; line-height:1.6; }
.gallery-controls button:hover,.gallery-controls button:focus-visible { background:color-mix(in srgb,var(--accent) 38%,transparent); box-shadow:0 0 0 1px #eadaba; }
.contact-social:hover,.contact-social:focus-visible { background:color-mix(in srgb,var(--accent) 32%,transparent); box-shadow:0 0 0 1px var(--accent); }
.artist-arrow { background:transparent; }

/* V268: full-scene camera planes keep original photos locked to their frames. */
.camera-art,.camera-photos{position:absolute;inset:0;width:100%;height:100%;transform-origin:40% 64%;pointer-events:none}
.camera-photos{z-index:4}
.camera-outgoing,.camera-outgoing *{pointer-events:none!important}
.camera-outgoing{user-select:none}
/* Brush marks sit directly underneath the original lettering, never a second line on the active name. */
.main-nav a:after,.main-nav button:after,.artist-tabs button:after{height:.5cqw;bottom:8%;left:5%;width:90%;background:var(--accent);clip-path:polygon(0 48%,9% 34%,6% 24%,39% 18%,37% 11%,76% 6%,100% 0,93% 25%,99% 30%,88% 51%,93% 58%,57% 69%,59% 77%,19% 89%,2% 100%,7% 76%,0 80%);transform:scaleX(0) rotate(-3deg);transition:transform .2s,opacity .2s}
.main-nav a:after,.main-nav button:after{height:.22cqw;bottom:-.18cqw}
.artist-tabs button:hover:after,.artist-tabs button:focus-visible:after,.main-nav a:hover:after,.main-nav button:hover:after,.main-nav a:focus-visible:after,.main-nav button:focus-visible:after{transform:scaleX(1) rotate(-3deg)}
.gallery-ui>.artist-tabs button:after{bottom:16%;height:.5cqw}
.artist-copy .artist-tabs button:after{bottom:16%;height:.5cqw}
.artist-tabs button[aria-pressed=true]:after,.artist-tabs button[aria-pressed=true]:hover:after{opacity:0}
.artist-tabs button[aria-pressed=false]:hover:after,.artist-tabs button[aria-pressed=false]:focus-visible:after{opacity:1}

/* V269: recover the original crown above the contact boundary. */
.hat-repair{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.hat-selina{display:block}
/* Invisible interaction areas never paint rectangular panels over the illustration. */
.hero-request:hover,.talk-request:hover,.event-request:hover,.contact-social:hover,.gallery-controls button:hover{background:transparent;box-shadow:none;filter:none}
.hero-request:focus-visible,.talk-request:focus-visible,.event-request:focus-visible,.contact-social:focus-visible,.gallery-controls button:focus-visible{outline:2px solid #eedbbb;outline-offset:4px;background:transparent;box-shadow:none}
.main-nav{left:53.1%;right:2.6%;height:5%;padding:0;display:block}
.main-nav a,.main-nav button{position:absolute;top:2%;height:70%;padding:0;margin:0;cursor:pointer}
.main-nav>:nth-child(1){left:0;width:12%}.main-nav>:nth-child(2){left:16.7%;width:25%}.main-nav>:nth-child(3){left:45.5%;width:16%}.main-nav>:nth-child(4){left:64.9%;width:15%}.main-nav>:nth-child(5){left:83.5%;width:17%}
.main-nav a:after,.main-nav button:after{bottom:5%;left:4%;width:92%;height:.3cqw}
.site-footer .footer-brand{max-width:280px}
.site-footer .footer-details{font-family:Arial,sans-serif;font-size:clamp(14px,1.2vw,18px);line-height:1.7}
.site-footer .footer-details small{font-size:.75em;opacity:.9}


.artist-tabs button[data-artist=selina]{--accent:#ac2925}.artist-tabs button[data-artist=kris]{--accent:#2573aa}.artist-tabs button[data-artist=vii]{--accent:#9341aa}

/* Native hit targets stay reliable after SVG clipping/filter animations finish. */
.artwork,.artwork *{pointer-events:none}
.photo-slot{pointer-events:none}
.photo-actions{position:absolute;inset:0;z-index:5;pointer-events:none}
.photo-hit{position:absolute;padding:0;border:0;background:transparent;cursor:zoom-in;pointer-events:auto;color:transparent}
.photo-hit-0{left:39.8558%;top:27.476%;width:33.2132%;height:25.2396%;clip-path:polygon(26.047% 0,100% 9.367%,77.364% 100%,0 88.228%)}
.photo-hit-1{left:71.7817%;top:27.476%;width:23.8929%;height:13.6741%;clip-path:polygon(16.379% 0,100% 17.757%,84.052% 100%,0 84.579%)}
.photo-hit-2{left:67.76%;top:39.936%;width:23.17%;height:11.758%;clip-path:polygon(16% 0,99% 18%,86% 100%,0 80%)}
.photo-hit:focus-visible{outline:none;box-shadow:inset 0 0 0 4px #eedbbb;background:#eedbbb18}

/* V270: unfilled ink arrows, neutral colour on every artist. */
.gallery-controls button{color:#2c2118;border-radius:0;background:none;box-shadow:none}
.gallery-controls button svg,.artist-arrow svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.points-left{transform:rotate(180deg)}
.ink-trace{stroke-width:.65;opacity:.6}
.gallery-controls button:hover,.gallery-controls button:focus-visible{color:#514331;background:none;box-shadow:none;transform:translateY(-1px)}
.artist-arrow,.artist-arrow:hover{color:#efdbb8;background:none}
.photo-hit-1{clip-path:polygon(16.379% 0,100% 17.757%,84.61% 97.2%,81.47% 96.2%,75.86% 91.59%,77.5% 98.83%,0 84.579%)}

/* V271: proportional, quieter desktop presentation. No horizontal stretching. */
.page{width:min(1180px,calc(100% - 112px));margin-top:22px}
@media(max-width:1100px){.page{width:calc(100% - 64px);margin-top:16px}}
@media(max-width:700px){.page{width:calc(100% - 20px);margin-top:8px}}

/* V278: the ink is sampled from the original illustrations, not redrawn. */
.main-nav a:after,.main-nav button:after,.event-request:after{content:none!important}
.artwork .hero-nav-ink,.artwork .hero-hover-graphic,.artwork .contact-hover-sign{
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .32s cubic-bezier(.2,.7,.2,1);
}
.artwork .hero-nav-ink{mask-image:radial-gradient(ellipse 3.7% 1.6% at 56% 8.8%,#000 52%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 3.7% 1.6% at 56% 8.8%,#000 52%,transparent 100%);transform-origin:56% 8.8%;transform:translateX(var(--ink-shift,0)) scaleX(var(--ink-stretch,1))}
.scene:has(.main-nav>:nth-child(1):is(:hover,:focus-visible)) .hero-nav-ink{opacity:1;--ink-shift:0;--ink-stretch:1}
.scene:has(.main-nav>:nth-child(2):is(:hover,:focus-visible)) .hero-nav-ink{opacity:1;--ink-shift:9.6cqw;--ink-stretch:1.85}
.scene:has(.main-nav>:nth-child(3):is(:hover,:focus-visible)) .hero-nav-ink{opacity:1;--ink-shift:19.6cqw;--ink-stretch:1.3}
.scene:has(.main-nav>:nth-child(4):is(:hover,:focus-visible)) .hero-nav-ink{opacity:1;--ink-shift:29.3cqw;--ink-stretch:1.3}
.scene:has(.main-nav>:nth-child(5):is(:hover,:focus-visible)) .hero-nav-ink{opacity:1;--ink-shift:36.4cqw;--ink-stretch:1.4}

.artwork .hero-hover-graphic{mask-image:radial-gradient(ellipse 21% 14% at 78% 75%,#000 56%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 21% 14% at 78% 75%,#000 56%,transparent 100%)}
.artwork .contact-hover-sign{mask-image:radial-gradient(ellipse 29% 54% at 75% 48%,#000 57%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 29% 54% at 75% 48%,#000 57%,transparent 100%)}
.hero-request{top:19.4%;height:6%}
.event-request{left:56%;top:82.7%;width:38%;height:16.6%;cursor:pointer}
.scene:has(.hero-request:is(:hover,:focus-visible)) .hero-hover-graphic,
.scene:has(.event-request:is(:hover,:focus-visible)) .contact-hover-sign{opacity:1;filter:brightness(1.24) saturate(1.08)}

/* V280: only the illustrations that change fade; the scene stays fixed. */
.artwork-outgoing{pointer-events:none!important}
.artist-tabs button[data-artist=selina]{--ink-image:url("assets/ink-underline-selina.png")}
.artist-tabs button[data-artist=kris]{--ink-image:url("assets/ink-underline-kris.png")}
.artist-tabs button[data-artist=vii]{--ink-image:url("assets/ink-underline-vii.png")}
.gallery-ui>.artist-tabs button::after,.artist-copy .artist-tabs button::after{
  content:""!important;position:absolute;left:0;bottom:3%;width:100%;height:.85cqw;
  background:var(--ink-image) center/100% 100% no-repeat;clip-path:none;
  transform:none!important;opacity:0;pointer-events:none;transition:opacity .19s ease;
}
.artist-copy .artist-tabs button::after{bottom:auto;top:39%}
.gallery-ui>.artist-tabs button:is(:hover,:focus-visible)[aria-pressed=false]::after,
.artist-copy .artist-tabs button:is(:hover,:focus-visible)[aria-pressed=false]::after{opacity:1}
.gallery-ui>.artist-tabs button[aria-pressed=true]::after,
.artist-copy .artist-tabs button[aria-pressed=true]::after{opacity:0!important}

/* V281: hover the existing contact print, never a new button painted over it. */
.artwork .contact-hover-talk,.artwork .contact-hover-whatsapp,.artwork .contact-hover-instagram{
  opacity:0;pointer-events:none;transition:opacity .23s ease,transform .23s ease;
}
.artwork .contact-hover-talk{
  mask-image:radial-gradient(ellipse 17% 17% at 23% 67%,#000 63%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 17% 17% at 23% 67%,#000 63%,transparent 100%);
}
.artwork .contact-hover-whatsapp{
  mask-image:radial-gradient(ellipse 3.8% 11% at 39.5% 82%,#000 55%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 3.8% 11% at 39.5% 82%,#000 55%,transparent 100%);
  transform-origin:39.5% 82%;transform:scale(1);
}
.artwork .contact-hover-instagram{
  mask-image:radial-gradient(ellipse 3.8% 11% at 47.7% 82%,#000 55%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 3.8% 11% at 47.7% 82%,#000 55%,transparent 100%);
  transform-origin:47.7% 82%;transform:scale(1);
}
.scene:has(.talk-request:is(:hover,:focus-visible)) .contact-hover-talk{
  opacity:1;filter:brightness(1.16) saturate(1.08);
}
.scene:has(.contact-social.whatsapp:is(:hover,:focus-visible)) .contact-hover-whatsapp,
.scene:has(.contact-social.instagram:is(:hover,:focus-visible)) .contact-hover-instagram{
  opacity:1;filter:brightness(1.35) contrast(1.08);transform:scale(1.035);
}

/* V279: clearer typesetting over the approved footer print. */
.site-footer{grid-template-columns:1.05fr 1.3fr 1fr;gap:3%}
.site-footer .footer-brand{max-width:265px}
.site-footer .footer-details{font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,1.48cqw,20px);font-weight:400;line-height:1.45;color:#f4e1bf;text-shadow:0 1px 1px #090807;letter-spacing:0}
.site-footer .footer-address{line-height:1.5}
.site-footer .footer-place{font-size:.83em;letter-spacing:.045em}
.site-footer .footer-details nav{margin:12px 0 7px;gap:1.2em}
.site-footer .footer-details small{font-size:.78em;opacity:.95}
.site-footer .credit span{font-size:14px;letter-spacing:.035em;opacity:1;color:#f4e1bf}
.site-footer .credit img{max-width:230px}

/* V283: the unchanged flower print covers the complete switching photo. */
.gallery-flower{
  position:absolute;left:81.102%;top:38.498%;width:18.898%;height:15.176%;
  display:block;z-index:5;pointer-events:none;
}