@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;--paper:#eae7df;--muted:#a4a29c;--accent:#ff42bc;--accent-hover:#ff7bd0;--accent-ink:#1c1512;--accent-soft:#ff42bc26;--accent-tint:#ff42bc2b;--accent-scroll:#ff42bc88;--accent-ambient:#ff42bc18;--glitch-hue:281deg;--bg:#141414;--x:0px;--y:0px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--paper);font-family:'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--accent);color:#141414}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.stage{position:relative;isolation:isolate;min-height:760px;height:100svh;max-height:1400px;overflow:hidden;background:radial-gradient(ellipse at 70% 49%,#39342e 0, #20201e 34%,#141414 71%)}.stage:after{content:'';position:absolute;inset:16px;border:1px solid #ffffff13;border-radius:5px;pointer-events:none;z-index:8}.ambient{position:absolute;right:0;bottom:-34%;width:65%;height:70%;background:radial-gradient(ellipse,var(--accent-ambient),transparent 65%);pointer-events:none}.header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:46px 5%;z-index:10}.wordmark{font-family:'Manrope',sans-serif;font-size:25px;font-weight:800;letter-spacing:-1px}.brand-dot{font-size:12px;vertical-align:top;display:inline-block;margin:2px 0 0 4px;color:var(--accent)}.discipline{font-size:12px;color:#b8b5ac}.about-button{display:flex;gap:24px;align-items:center;background:none;border:0;padding:8px 0;font-size:13px}.about-button svg{transition:transform .3s}.about-button:hover svg{transform:translate(3px,-3px);color:var(--accent)}.back-type{position:absolute;top:16%;left:4.5%;font-family:'Manrope',sans-serif;font-size:12.4vw;font-weight:800;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px #e5dfca12;white-space:nowrap;pointer-events:none}.hero-copy{position:absolute;left:8%;top:24%;z-index:4}h1{font-family:'Manrope',sans-serif;font-size:clamp(68px,6.7vw,108px);font-weight:500;line-height:1.035;letter-spacing:-.04em;margin:0}h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.04em}.craft{display:inline-block}.period{color:var(--accent)}.hero-copy p{font-size:14px;line-height:1.7;color:#b9b6af;margin:27px 0 29px}.contact{display:inline-flex;align-items:center;gap:31px;font-size:13px;border-bottom:1px solid #eae7df40;padding:0 0 10px;transition:border-color .2s}.contact:hover{border-color:var(--accent)}.contact:hover .arrow{transform:translateX(5px);color:var(--accent)}.arrow{display:flex;transition:transform .2s,color .2s}.artwork{position:absolute;right:6%;top:13%;height:81%;width:51%;z-index:2}.statue{position:absolute;inset:0;transform:translate(var(--x),var(--y));transition:transform .65s cubic-bezier(.16,1,.3,1);mask-image:linear-gradient(#000 86%,transparent 100%)}.david{position:absolute;height:100%;width:100%;object-fit:contain;filter:brightness(.83) contrast(1.14) saturate(.65);user-select:none;-webkit-user-drag:none}.glitch{opacity:0;pointer-events:none;animation:none}.glitch-red{filter:sepia(1) saturate(6) hue-rotate(var(--glitch-hue));mix-blend-mode:screen}.glitch-cyan{filter:sepia(1) saturate(4) hue-rotate(125deg);mix-blend-mode:screen;animation-delay:.12s}.art-caption{position:absolute;right:-18px;top:49%;writing-mode:vertical-rl;color:#b4afa4;font-size:9px;letter-spacing:.2em}.footer{position:absolute;left:5%;right:5%;bottom:44px;z-index:6;display:flex;align-items:flex-end;justify-content:space-between}.signature,.copyright{font-size:11px;line-height:1.7}.signature span,.copyright span{color:var(--muted)}.copyright{text-align:right}.feedback-control{position:absolute;left:50%;bottom:0;transform:translateX(-50%);text-align:center}.control-label{display:block;font-size:8px;letter-spacing:.2em;color:#ada89f;margin-bottom:12px}#feedback-open{display:flex;gap:11px;align-items:center;padding:14px 17px;border:1px solid #ffffff2e;border-radius:40px;background:linear-gradient(120deg,#eae7df16,#eae7df06);backdrop-filter:blur(16px);font-size:11px}.status-light{height:5px;width:5px;background:#f5ff00;border-radius:50%;box-shadow:0 0 10px #f5ff00}.switch-track{height:17px;width:30px;border-radius:12px;background:#eae7df22;padding:3px;margin-left:14px}.switch-track i{display:block;height:11px;width:11px;border-radius:50%;background:#eeebe3;transform:translateX(13px);transition:transform .2s}.about-panel{position:absolute;right:5%;top:110px;width:370px;padding:32px;z-index:12;border:1px solid #ffffff2c;border-radius:12px;background:#252521ed;backdrop-filter:blur(22px);box-shadow:0 18px 70px #0007}.panel-label{font-size:11px;color:var(--accent)}h2{font-family:'Manrope',sans-serif;font-size:29px;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin:22px 0}.about-panel p{font-size:14px;color:#c3bfb7;line-height:1.65}.close-panel{margin-top:17px;display:flex;align-items:center;justify-content:space-between;width:100%;border:0;border-top:1px solid #ffffff25;padding:16px 0 0;background:none;font-size:12px}.close-panel span{font-size:24px}.motion-off .glitch{animation:none}.motion-off .statue{transform:none}.motion-off .switch-track i{transform:none}.motion-off .status-light{background:#999;box-shadow:none}
@keyframes rupture{0%,91%,97%,100%{opacity:0;transform:none;clip-path:inset(0)}92%{opacity:.7;transform:translateX(-12px);clip-path:inset(29% 0 62% 0)}93%{opacity:.5;transform:translateX(15px);clip-path:inset(44% 0 50% 0)}94%{opacity:0}95%{opacity:.7;transform:translateX(-7px);clip-path:inset(67% 0 29% 0)}96%{opacity:.3;transform:translateX(8px);clip-path:inset(18% 0 76% 0)}}

@media(min-width:1600px){.hero-copy{top:25%}.hero-copy p{font-size:16px}}
@media(max-width:1000px){.discipline{display:none}.hero-copy{left:7%;top:26%}h1{font-size:76px}.artwork{right:-6%;width:65%;height:75%;top:17%}.hero-copy p{font-size:13px}.art-caption{right:14%}}
@media(max-width:650px){.stage{min-height:740px;max-height:none;height:100svh}.stage:after{inset:10px}.header{padding:30px 7%}.wordmark{font-size:22px}.about-button{font-size:11px;gap:10px}.about-button svg{width:18px}.back-type{top:15%;font-size:16vw;left:6%}.hero-copy{top:21%;left:8%}h1{font-size:clamp(56px,13vw,78px);line-height:1.05}.hero-copy p{margin-top:24px;max-width:240px;font-size:12px;line-height:1.65;text-shadow:0 2px 10px #000}.contact{font-size:12px;gap:12px;margin-top:6px}.artwork{width:92%;height:61%;right:-25%;top:24%;opacity:.72}.statue{mask-image:linear-gradient(#000 75%,transparent 99%)}.art-caption{display:none}.footer{bottom:30px;left:8%;right:8%;align-items:flex-end}.signature,.copyright{font-size:9px}.feedback-control{bottom:67px}.control-label{display:none}#feedback-open{padding:12px 16px}.about-panel{top:86px;left:7%;right:7%;width:auto;padding:26px}.about-panel h2{font-size:26px}}
@media(max-width:380px){.hero-copy{top:19%}.artwork{right:-28%}.hero-copy p{max-width:210px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.statue{transform:none!important}}

/* Frosted portrait with sharply focused, framed apertures. */
.artwork{container-type:size}
.statue>.david:first-child{filter:brightness(.82) contrast(1.08) saturate(.55) blur(4px)}
.glass-study{position:absolute;inset:0;z-index:3;pointer-events:none}
.clear-pane{position:absolute;left:calc(var(--left)*1%);top:calc(var(--top)*1%);overflow:hidden;border:1px solid #eee8df80;background:#d6d0c514;box-shadow:0 10px 26px #00000015;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.clear-pane img{position:absolute;left:calc(var(--left)*-1cqw - 1px);top:calc(var(--top)*-1cqh - 1px);width:100cqw;height:100cqh;max-width:none;object-fit:contain;filter:brightness(.9) contrast(1.13) saturate(.6);transform:translate(var(--x),var(--y));transition:transform .65s cubic-bezier(.16,1,.3,1);user-select:none}
.pane-hair{width:24%;height:11%}.pane-eyes{width:57%;height:14%}.pane-mouth{width:22%;height:11%}.pane-shoulder{width:30%;height:20%}
.study-cross{position:absolute;left:45%;top:46%;width:30px;height:30px;stroke:#eee8dfb0;stroke-width:1}
.glitch{animation:none;opacity:0}
.stage.is-glitching .glitch-red{animation:color-rupture var(--burst-duration,800ms) steps(1) both}
.stage.is-glitching .glitch-cyan{animation:color-rupture var(--burst-duration,800ms) steps(1) both reverse}
.fragment-field{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.is-glitching .fragment-field{opacity:1}
.fragment-links{position:absolute;inset:0;width:100%;height:100%;stroke:#eee6d69c;stroke-width:.1;fill:none}
.fragment-tile{position:absolute;overflow:hidden;border:1px solid #eee8df8c;background:#92c8cb22;box-shadow:3px 3px 0 var(--accent-soft)}
.fragment-tile img{position:absolute;left:calc(var(--tx)*-1cqw);top:calc(var(--ty)*-1cqh);width:100cqw;height:100cqh;max-width:none;object-fit:contain;filter:brightness(1.05) contrast(1.2) saturate(.55);transform:translate(calc(var(--x) + var(--shift)),var(--y))}
.fragment-tile:nth-child(3n){background:var(--accent-tint)}
.fragment-tile:nth-child(3n) img{filter:sepia(.65) saturate(2) hue-rotate(135deg)}
.motion-off .clear-pane img{transform:none}
.motion-off .fragment-field,.motion-off .glitch{opacity:0}
@media(max-width:650px){.statue>.david:first-child{filter:brightness(.82) contrast(1.08) saturate(.55) blur(2.5px)}.study-cross{width:20px;height:20px}}
@media(prefers-reduced-motion:reduce){.clear-pane img{transform:none!important}.fragment-field,.glitch{display:none!important}}

/* Original chromatic slice tears, combined with video fragments and bust displacement. */
@keyframes color-rupture{
  0%{opacity:.7;transform:translateX(calc(var(--tear)*-1));clip-path:inset(29% 0 62% 0)}
  24%{opacity:.5;transform:translateX(var(--tear));clip-path:inset(44% 0 50% 0)}
  44%{opacity:0;transform:none}
  66%{opacity:.7;transform:translateX(calc(var(--tear)*-.6));clip-path:inset(67% 0 29% 0)}
  82%{opacity:.3;transform:translateX(calc(var(--tear)*.7));clip-path:inset(18% 0 76% 0)}
  100%{opacity:0;transform:none}
}
.stage.is-glitching .statue,.stage.is-glitching .clear-pane img{
  animation:bust-displacement var(--burst-duration,800ms) steps(1) both;transition:none
}
@keyframes bust-displacement{
  0%{transform:translate(calc(var(--x) - var(--kick)),calc(var(--y) + 2px))}
  24%{transform:translate(calc(var(--x) + var(--kick)*.65),calc(var(--y) - 1px)) skewX(-.5deg)}
  44%{transform:translate(var(--x),var(--y))}
  66%{transform:translate(calc(var(--x) - var(--kick)*.45),var(--y)) skewX(.35deg)}
  82%,100%{transform:translate(var(--x),var(--y))}
}
.stage.is-glitching .fragment-field{animation:fragment-flash var(--burst-duration,800ms) steps(1) both}
@keyframes fragment-flash{0%,24%,66%,82%{opacity:1}44%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.stage.is-glitching .statue,.stage.is-glitching .clear-pane img{animation:none!important;transform:none!important}}

/* Electric yellow details balance the accent punctuation on the left. */
.about-button svg{color:var(--accent)}
.art-caption:before{content:'';display:inline-block;width:1px;height:28px;margin-bottom:14px;background:var(--accent)}
.pane-shoulder:after{content:'';position:absolute;top:0;right:0;width:22px;height:22px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);pointer-events:none}
.copyright{position:relative}
.copyright:before{content:'';position:absolute;right:0;top:-15px;width:24px;height:2px;background:var(--accent)}
@media(max-width:650px){.pane-shoulder:after{width:16px;height:16px}.copyright:before{width:18px;top:-11px}}

/* Editorial contact: electric yellow action, precise rules, quiet glass. */
.feedback-control .control-label{color:#c7bfb4;font-size:9px;letter-spacing:.18em;margin-bottom:12px}
#feedback-open{display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:204px;padding:0 0 0 22px;border:0;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-family:'Manrope',sans-serif;font-size:14px;font-weight:800;backdrop-filter:none;transition:background .2s,transform .2s}
#feedback-open svg{box-sizing:content-box;width:21px;height:21px;padding:17px;margin-left:5px;border-left:1px solid #27171130;stroke-width:1.7;transition:transform .2s}
#feedback-open:hover{background:var(--accent-hover);transform:translateY(-2px)}
#feedback-open:active{transform:translateY(0)}
#feedback-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 40px);padding:46px 40px 32px;border:1px solid #eee8df28;border-radius:10px;background:linear-gradient(145deg,#302925f5,#1d1d1bf7 55%);color:var(--paper);backdrop-filter:blur(24px);overflow:auto;scrollbar-color:var(--accent-scroll) #242321}
#feedback-dialog:before{content:'';position:absolute;top:0;left:40px;width:62px;height:3px;background:var(--accent)}
#feedback-dialog::backdrop{background:#090909b8;backdrop-filter:blur(10px)}
#feedback-dialog h2{margin:0 25px 18px 0;font-family:'Manrope',sans-serif;font-size:42px;font-weight:500;letter-spacing:-.04em;line-height:1.12}
#feedback-title em{font-family:Georgia,serif;font-weight:400}
#feedback-title span{color:var(--accent)}
#feedback-note{max-width:36ch;font-size:13px;line-height:1.7;color:#bbb5ab;margin:0 0 30px}
.feedback-close{position:absolute;right:16px;top:16px;width:36px;height:36px;display:grid;place-items:center;background:transparent;border:1px solid #ffffff20;border-radius:50%;color:#d7d0c6;transition:color .2s,border-color .2s}
.feedback-close:hover{color:var(--accent);border-color:var(--accent)}
#feedback-form{display:grid;grid-template-columns:1fr 1fr;gap:27px 22px}
.feedback-field{display:flex;flex-direction:column;min-width:0;gap:8px}
.feedback-message,.feedback-actions,#feedback-status{grid-column:1/-1}
#feedback-form label{font-size:11px;font-weight:500;letter-spacing:.025em;color:#d9d2c7}
#feedback-form label span{color:var(--accent);margin-left:3px}
#feedback-form input,#feedback-form textarea{width:100%;font:inherit;font-size:14px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid #d8cbb442;border-radius:0;padding:10px 0 13px;caret-color:var(--accent);transition:border-color .2s}
#feedback-form textarea{resize:vertical;min-height:100px}
#feedback-form input::placeholder,#feedback-form textarea::placeholder{color:#9f998f}
#feedback-form input:focus,#feedback-form textarea:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.feedback-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:3px}
.feedback-delivery{font-size:11px;line-height:1.6;color:#b0a99e;margin:0}
.feedback-submit{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;flex:none;padding:0 0 0 17px;border:0;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-family:'Manrope',sans-serif;font-size:12px;font-weight:800;transition:background .2s}
.feedback-submit svg{box-sizing:content-box;width:19px;height:19px;padding:14px;border-left:1px solid #27171130}
.feedback-submit:hover{background:var(--accent-hover)}
#feedback-status{font-size:12px;line-height:1.5;color:#d6cec2;margin:0}
#feedback-status:empty{display:none}
@media(max-width:650px){.feedback-control .control-label{display:block;font-size:8px;margin-bottom:10px}#feedback-open{min-width:190px;font-size:13px;padding-left:19px}#feedback-open svg{padding:15px}#feedback-dialog{padding:38px 24px 26px}#feedback-dialog:before{left:24px}#feedback-dialog h2{font-size:34px}#feedback-form{gap:24px 16px}.feedback-actions{align-items:stretch;flex-direction:column;gap:15px}.feedback-submit{align-self:flex-start}}
@media(max-width:380px){#feedback-form{grid-template-columns:1fr}#feedback-dialog h2{font-size:30px}}


.accent-panel{position:absolute;top:108px;right:5%;z-index:9;padding:12px 14px;background:#20201ce8;border:1px solid #ffffff22;border-radius:8px;backdrop-filter:blur(16px)}
.accent-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:9px;font-size:10px;color:#c6bfb3}
#accent-value{font-size:10px;letter-spacing:.04em;color:var(--accent)}
.accent-options{display:flex;align-items:center;gap:3px}
.accent-swatch{display:grid;place-items:center;width:32px;height:32px;padding:0;background:transparent;border:1px solid transparent;border-radius:4px}
.accent-swatch:before{content:'';width:17px;height:17px;background:var(--swatch);border-radius:50%}
.accent-swatch[aria-pressed="true"]{border-color:#eae7dfb3}
.accent-swatch:hover{background:#ffffff12}
.accent-custom{position:relative;display:grid;place-items:center;width:32px;height:32px;margin-left:7px;border-left:1px solid #ffffff28;cursor:pointer}
.accent-custom svg{width:17px;height:17px}
#accent-custom{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.accent-custom:focus-within{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:650px){.accent-panel{top:85px;right:7%;padding:7px 9px}.accent-heading{margin-bottom:4px}.accent-swatch{width:28px;height:28px}.accent-swatch:before{width:14px;height:14px}.accent-custom{width:28px;height:28px}}





/* A neon graffiti crown, visible only for a short part of each glitch. */
.crown-track{
  position:absolute;inset:0;margin:auto;
  width:min(100%,74.38cqh);height:min(100%,134.44cqw);
  z-index:6;pointer-events:none;
  transform:translate(var(--x),var(--y));
}
.neon-crown{
  position:absolute;left:24%;top:-6%;width:44%;height:auto;
  overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(-11deg);opacity:0;
}
.crown-halo{stroke:#ffae16;stroke-width:9;filter:blur(5px)}
.crown-tube{stroke:#fff2b2;stroke-width:4;filter:drop-shadow(0 0 3px #ffe890) drop-shadow(0 0 9px #ffae16)}
.stage.is-glitching .crown-track{animation:bust-displacement var(--burst-duration,800ms) steps(1) both}
.stage.is-glitching .neon-crown{animation:crown-flash 280ms ease-out 40ms both}
@keyframes crown-flash{0%{opacity:0}8%,65%{opacity:1}100%{opacity:0}}
.motion-off .neon-crown{display:none}
@media(prefers-reduced-motion:reduce){.crown-track{display:none}}

.accent-heading{gap:12px}
#accent-collapse{display:grid;place-items:center;flex:none;width:28px;height:28px;padding:0;margin:-5px -5px -5px 0;border:0;border-radius:4px;background:transparent;color:#c6bfb3}
#accent-collapse:hover{background:#ffffff12;color:var(--accent)}
#accent-collapse svg{width:16px;height:16px;transition:transform .2s}
#accent-collapse[aria-expanded="false"] svg{transform:rotate(180deg)}
.accent-options[hidden]{display:none}
.accent-panel.is-collapsed .accent-heading{margin-bottom:0}