:root{--portfolio-woven-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='8' viewBox='0 0 130 8'%3E%3Crect width='130' height='8' fill='%23F5F1FA'/%3E%3Crect width='65' height='4' fill='%23E3D8F2'/%3E%3Crect x='65' y='4' width='65' height='4' fill='%23E3D8F2'/%3E%3C/svg%3E")}
.reference-grain{ position:fixed; inset:0; z-index:55; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px; mix-blend-mode:soft-light; }

/* Woven checkerboard texture (desaturated from #F5EDFF / #E2CCFF -> #F5F1FA / #E3D8F2) */
.reference-texture{ position:fixed; inset:0; z-index:0; pointer-events:none; background-repeat:repeat;
  background-image:var(--portfolio-woven-texture);
  background-size:130px 8px; }
html[data-dark="false"] .reference-texture{ opacity:.32; mix-blend-mode:multiply; }
html[data-dark="true"] .reference-texture{ opacity:.16; }

/* big soft glow in the middle — fades the texture out toward the center */
.reference-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(74% 66% at 50% 45%, var(--paper) 0%, var(--paper) 26%, transparent 78%); }

.reference-cursor-dot{ position:fixed; top:0; left:0; z-index:201; width:7px; height:7px; border-radius:50%;
  background:var(--ink); pointer-events:none; mix-blend-mode:difference; transition:opacity .2s ease; }
.reference-cursor-dot.big{ opacity:0; }
.reference-cursor{ position:fixed; top:0; left:0; z-index:200; width:0; height:0; border-radius:50%;
  pointer-events:none; display:grid; place-items:center; mix-blend-mode:difference;
  transition:width .25s, height .25s, background .25s, box-shadow .25s, mix-blend-mode .1s; }
.reference-cursor .fly{ position:absolute; left:-13.7px; top:-8.9px; width:38px; height:37px;
  overflow:visible; display:block; transform-origin:36% 24%; will-change:transform; transition:opacity .2s ease; }
.reference-cursor .fly path, .reference-cursor .fly rect{ stroke:#fff; stroke-width:1.7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.reference-cursor .fly path{ fill:none; }
.reference-cursor .fly .head{ fill:#fff; }
.reference-cursor .fly .wings{ transform-box:fill-box; }
.reference-cursor .fly .wing-r{ transform-origin:0% 100%; }   /* pivot at the thorax */
.reference-cursor .fly .wing-l{ transform-origin:100% 12%; }
.reference-cursor.flying .fly .wing-r{ animation:flapR .1s linear infinite; }
.reference-cursor.flying .fly .wing-l{ animation:flapL .1s linear infinite; }
@keyframes flapR{ 0%,100%{ transform:rotate(13deg); } 50%{ transform:rotate(-12deg); } }
@keyframes flapL{ 0%,100%{ transform:rotate(-13deg); } 50%{ transform:rotate(12deg); } }
.reference-cursor .plus{ width:16px; height:16px; color:var(--ink); opacity:0; display:block; transition:opacity .18s ease; }
.reference-cursor-ring{ position:absolute; inset:0; width:100%; height:100%; opacity:0; fill:var(--ink);
  transform-origin:50% 50%; animation:cursor-spin 9s linear infinite; transition:opacity .2s ease; }
.reference-cursor-ring text{ font-size:10px; font-weight:600; letter-spacing:2px; fill:var(--ink); }
.reference-cursor.big{ width:92px; height:92px; background:var(--paper);
  mix-blend-mode:normal; box-shadow:0 8px 28px -8px rgba(0,0,0,.4);
  -webkit-backdrop-filter:none; backdrop-filter:none; }
.reference-cursor.big .fly{ opacity:0; }
.reference-cursor.big .plus{ opacity:1; }
.reference-cursor.big .reference-cursor-ring{ opacity:1; }
@keyframes cursor-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }


body>.wrap,.contact{position:relative;z-index:2}.reference-cursor-mode,.reference-cursor-mode a,.reference-cursor-mode button{cursor:none!important}.reference-cursor,.reference-cursor-dot{visibility:hidden}.reference-cursor.visible,.reference-cursor-dot.visible{visibility:visible}.reference-cursor{z-index:10000}.reference-cursor-dot{z-index:10001}.reference-cursor.control{width:38px;height:38px;background:var(--paper);mix-blend-mode:normal;border:1px solid var(--ink)}.reference-cursor.control .fly{opacity:0}.reference-cursor.control .plus{opacity:1}.reference-cursor-dot.control{opacity:0}@media(pointer:coarse){.reference-cursor,.reference-cursor-dot{display:none}}@media(prefers-reduced-motion:reduce){.reference-cursor-ring{animation:none}.reference-cursor.flying .fly .wing-r,.reference-cursor.flying .fly .wing-l{animation:none}.reference-cursor,.reference-cursor-dot{transition:none}}

.reference-glow{opacity:.65}

.page-grid{position:fixed;inset:0 20px;z-index:1;pointer-events:none;border-left:1px solid var(--line);border-right:1px solid var(--line);background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:25% 100%,100% 180px;background-position:-1px 0,0 0}@media(max-width:650px){.page-grid{background-size:50% 100%,100% 140px}}

.page-grid{opacity:.4}
/* Keep the cursor legible without difference blending shifting its colour. */
.reference-cursor,.reference-cursor-dot{mix-blend-mode:normal}.reference-cursor .fly path,.reference-cursor .fly rect{stroke:var(--ink);stroke-width:2}.reference-cursor .fly .head{fill:var(--ink)}.reference-cursor .fly{filter:drop-shadow(1px 0 0 var(--paper)) drop-shadow(-1px 0 0 var(--paper)) drop-shadow(0 1px 0 var(--paper)) drop-shadow(0 -1px 0 var(--paper))}.reference-cursor-dot{background:var(--ink);border:1px solid var(--paper);box-sizing:border-box;box-shadow:0 0 0 1px var(--ink)}.reference-cursor.big{border:1px solid var(--ink);outline:1px solid var(--paper);outline-offset:1px}.reference-cursor.nav-hover{outline:1px solid var(--paper);outline-offset:1px}.reference-cursor .plus{filter:drop-shadow(0 0 1px var(--paper))}

/* Only the art gallery exposes its drag glyph. */
.reference-cursor .art-drag-icon{display:none}
.reference-cursor.gallery-drag .art-drag-icon{display:block}
.reference-cursor-dot{width:7px;height:7px;background:#171719;border:1px solid #fff;box-shadow:0 0 0 1px #171719}