/* ============================================================
   SKIN — ALCHEMY
   Anna Gorodetskaya — Portfolio · 12 сентября 2026

   Токены грунта и чернил темы alchemy, сброс на html, body, *,
   img, a, button, ::selection, :focus-visible, .sr-only, .skip,
   плюс .plastic, семейство .button, силуэт .silver-*, интерактивный
   виджет .alchemy-control, .alchemy-canvas, .mercury-frame, шапка и подвал.

   Сгенерировано site/tools/split-alchemy-css.mjs — не править руками.
   Источник: research/alchemy-reference/index.html, снято 12 сентября 2026.
   ============================================================ */

:root{--sans:Manrope,Arial,sans-serif;--serif:Oxanium,Manrope,sans-serif;}

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:20px}

body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

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

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

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

button,a{touch-action:manipulation}

button:focus-visible,a:focus-visible{outline:3px solid #451cee;outline-offset:5px}

img{max-width:100%;display:block}

button{border:0}

button[hidden],[hidden]{display:none!important}

.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.skip:focus{position:fixed;top:0;left:0;padding:20px;background:white;z-index:100}

.plastic{position:relative;isolation:isolate}

.button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;border-radius:100px;padding:17px 27px;font-weight:650;font-size:14px;line-height:1.3;transition:transform .3s,box-shadow .3s,background .3s;border:1px solid transparent}

.button span{font-size:22px;font-weight:400;line-height:1}

.button:hover{transform:translateY(-3px)}

.button.glass{backdrop-filter:blur(8px);}

.button.small{padding:12px 23px;border-color:#b86a9980;}

.header{display:flex;align-items:center;justify-content:space-between;padding:25px var(--gutter);position:relative;z-index:10;}

.wordmark{font-size:20px;letter-spacing:-.055em;line-height:1.12;font-weight:700;position:relative;padding-right:45px}

.wordmark-star{position:absolute;right:0;top:-3px;font-size:44px;font-weight:400;}

.desktop-nav{display:flex;gap:40px;margin-left:auto;margin-right:6vw;font-size:14px;font-weight:600}

.desktop-nav a{position:relative}

.desktop-nav a:after,.text-link:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}

.desktop-nav a:hover:after,.text-link:hover:after{transform:scaleX(1)}

.desktop-nav sup{font-size:10px;margin-left:3px;}

.menu-toggle,.mobile-nav{display:none}

.text-link{position:relative}

footer{display:flex;justify-content:space-between;align-items:center;padding:25px var(--gutter);gap:24px;font-size:12px;border-top:1px solid #fff8}

.footer-name{font-size:15px;font-weight:650;letter-spacing:-.025em}

footer>span{opacity:.8}

body.modal-open{overflow:hidden}

@media(max-width:760px){:root{--gutter:24px}.header{min-height:88px;padding:20px var(--gutter)}.wordmark{font-size:18px;padding-right:37px}.wordmark-star{font-size:35px;top:0}.desktop-nav{gap:22px;margin-right:30px}.desktop-nav a{font-size:12px}.header-contact{display:none}footer{font-size:11px;gap:15px;flex-wrap:wrap}.footer-name{font-size:14px}footer>span{display:none}}

@media(max-width:540px){.desktop-nav{display:none}.menu-toggle{display:flex;width:40px;height:40px;padding:10px 5px;flex-direction:column;justify-content:center;gap:6px;background:none}.menu-toggle span{width:28px;height:1px;background:var(--ink);transition:transform .2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mobile-nav{position:absolute;left:0;right:0;top:100%;padding:20px var(--gutter) 27px;background:#f4b7d7;box-shadow:0 20px 25px #45153528;display:flex;flex-direction:column;gap:15px;font-size:20px}}

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

.desktop-nav a{font-size:14px}

/* Editorial structure, with materials and emphasis drawn from production. */

:root{--ink:#edf0e7;--pink:#c7af82;--hot:#c7af82;--lilac:#222a1b;--lime:#c7af82;--line:#e7f6cc24;--gutter:clamp(24px,4.4vw,84px)}

body{background:#11140f;color:var(--ink)}

::selection{background:#c7af82;color:#11140f}

.plastic:before{display:none}

button:focus-visible,a:focus-visible{outline-color:#c7af82}

.header{background:#11140f;border-bottom:1px solid #d1e2b923;min-height:108px}

.wordmark-star{color:var(--lime)}

.desktop-nav sup{color:#b3c992}

.button.small{background:#c7af82;color:#13180d;border:1px solid #d6c39e;box-shadow:inset 0 1px 1px #e9d9b8,0 4px 18px #a5cd4120}

.button.primary{color:#141a0d;background:linear-gradient(135deg,#d2bb91,#b8a079);border-color:#d8c6a4;box-shadow:inset 0 1px 1px #e7d8bb,0 7px 22px #0003}

.button.primary:hover{background:#ddcba9;box-shadow:inset 0 1px 1px #efe2c9,0 10px 26px #a3cd271f}

.button.outline{color:#e6edda;border-color:#b6c2a263;background:#ffffff03}

.button.outline:hover{background:#d3eea50a;border-color:#c7af82}

.button.glass{color:#13180d;background:#ffffff1c;border-color:#374c1459;box-shadow:inset 0 1px 1px #edffc399}

.mobile-nav{background:#191e15;box-shadow:0 20px 25px #0004;border-bottom:1px solid #8db25433}

.menu-toggle span{background:#edf0e7}

.production-reel.dragging *{cursor:grabbing!important;user-select:none}

footer{background:#11180f;color:#b3c3a2;border-top-color:#d5f2b623}

.footer-name{color:#e3efd6}

@media(max-width:760px){.header{min-height:88px}}

/* Scroll chapters and silver optical sculpture. */

.silver-orbit{pointer-events:none;user-select:none;transform:translate3d(0,var(--silver-y,0px),0);will-change:transform}

.silver-form{width:100%;height:auto;filter:drop-shadow(0 20px 24px #0003);transform:rotate(var(--silver-angle,0deg))}

.silver-services{width:clamp(150px,17vw,255px);margin:32px 0 0 30px;--silver-angle:-8deg}

.silver-contact{position:absolute;width:clamp(190px,29vw,480px);right:-2%;top:30px;}

@media(max-width:999px){.silver-contact{opacity:.65;right:-8%}}

@media(max-width:760px){.silver-services{position:absolute;right:-15px;top:65px;width:140px;margin:0;opacity:.85}.silver-about{width:115px;position:absolute;right:0;bottom:0;margin:0}.silver-contact{width:160px;right:-30px;top:auto;bottom:24px;opacity:.6}}

@media(prefers-reduced-motion:reduce){.silver-orbit{transform:none;will-change:auto}}

.alchemy-control{position:relative;display:block;width:100%;aspect-ratio:1;border:0;padding:0;background:none;border-radius:30%;cursor:pointer;pointer-events:auto;touch-action:manipulation;rotate:var(--silver-angle,0deg);filter:drop-shadow(0 15px 18px #0003);transition:filter .35s}

.alchemy-control .silver-form{position:absolute;inset:3%;width:94%;height:94%;object-fit:contain;transform:none;filter:none;pointer-events:none}

.alchemy-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

.has-alchemy-canvas .silver-form{visibility:hidden}

.alchemy-control:hover,.alchemy-control:focus-visible,.alchemy-control.is-alive{filter:drop-shadow(0 18px 22px #0003) drop-shadow(0 0 9px #d2fca926)}

.alchemy-control:focus-visible{outline:2px solid #c7af82;outline-offset:5px}

.hero-familiar .alchemy-control{--silver-angle:0deg}

@media(prefers-reduced-motion:reduce){.alchemy-control{transition:none}.hero-familiar .alchemy-control{animation:none!important}}

.alchemy-control.is-flying{z-index:20;cursor:default}

.silver-about{width:clamp(260px,26vw,360px);max-width:90%;margin:30px 0 0 25px;--silver-angle:0deg}

.alchemy-control[data-behavior="spin"] .silver-form{mask-image:url('/assets/alchemy-ouroboros-round.webp');mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}

.alchemy-control[data-behavior="spin"] :is(.silver-form,.alchemy-canvas){transform-origin:50% 50%;will-change:transform}

.hero-familiar.is-following .alchemy-control{pointer-events:none}

.alchemy-control[data-behavior="glow"]{--glow-rgb:150 179 153;--glow-strength:.15;filter:drop-shadow(0 12px 18px #0005) drop-shadow(0 0 12px rgb(var(--glow-rgb) / var(--glow-strength))) drop-shadow(0 0 32px rgb(var(--glow-rgb) / var(--glow-strength))) drop-shadow(0 0 65px rgb(var(--glow-rgb) / var(--glow-strength)));transition:none}

.silver-services{opacity:1}

.silver-contact{opacity:1;--silver-angle:0deg;z-index:2}

.alchemy-control[data-behavior="axis"]{cursor:grab}

.alchemy-control[data-behavior="axis"]:active{cursor:grabbing}

@media(max-width:760px){.silver-contact{position:relative;width:min(280px,70vw);right:auto;top:auto;bottom:auto;margin:0 auto 24px}}

.mercury-frame{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:3;pointer-events:none;border-radius:inherit}

@media(max-width:760px){.silver-about{position:relative;right:auto;bottom:auto;width:min(300px,75vw);max-width:90%;margin:28px auto 0}}

@media(prefers-reduced-motion:reduce){.alchemy-control[data-behavior="spin"] :is(.silver-form,.alchemy-canvas){will-change:auto}}

.contact-section a:focus-visible{outline-color:#dcc596}