/* alinaschanz.life, the finishing (24 sep 2026): what a weaver does to cloth once it is off the loom. a sheen, pinked
   edges, a hem, a name tape. unlayered, after style.css and home.css; every page reads the same without it. */
@property --lx{syntax:"<length-percentage>";inherits:true;initial-value:-2000px;}
@property --ly{syntax:"<length-percentage>";inherits:true;initial-value:-2000px;}
@property --w{syntax:"<number>";inherits:true;initial-value:0;}
@property --vt-p{syntax:"<length>";inherits:true;initial-value:0px;}
:root{--studio:1;--head-h:4.0625rem;--glint:rgb(255 247 228 / .55);--ease:cubic-bezier(.2,.7,.2,1);
--sel:color-mix(in srgb,var(--dye-weld) 42%,var(--bg));}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glint:rgb(255 234 190 / .34);}}
:root[data-theme="dark"]{--glint:rgb(255 234 190 / .34);}

/* 0 the ground: undyed linen, a plain weave in slubs, faint */
body{background-image:url(/img/studio/linen.png);background-size:192px 192px;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{background-image:url(/img/studio/linen-dark.png);}}
:root[data-theme="dark"] body{background-image:url(/img/studio/linen-dark.png);}
::selection{background:var(--sel);color:var(--fg);}
html{scrollbar-color:color-mix(in srgb,var(--fg) 32%,transparent) transparent;scroll-padding-top:calc(var(--s-6) + 4.5rem);}

/* 1 the header: it stays with you, steps aside while you read down and comes back when you scroll up. its hem is the
   week to 21 september in one thread, one pixel a five-minute warp end, dyed as the loom dyes the base fee */
.site-head{position:sticky;top:0;z-index:30;background:var(--bg);background:color-mix(in srgb,var(--bg) 86%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);transition:transform .45s var(--ease);}
.site-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;filter:var(--woven-filter);
background:url(/img/studio/hem.png) 0 0/100% 100% no-repeat;opacity:0;transform:scaleY(.3);transform-origin:50% 100%;transition:opacity .4s,transform .4s var(--ease);}
.st-scrolled .site-head::after{opacity:1;transform:none;}
.st-out .site-head{transform:translateY(calc(-100% - 4px));}
.st-out .site-head:focus-within{transform:none;}
.skip:focus{z-index:40;}
.progress{top:var(--head-h);transition:top .45s var(--ease);}
@media (min-width:80rem){.band > .band-head,.page > .toc{top:calc(var(--s-6) + var(--head-h));transition:top .45s var(--ease);}}
@media (min-width:64rem){.page > .clone{top:calc(var(--s-6) + var(--head-h));transition:top .45s var(--ease);}}
.brand svg{transition:transform .6s var(--ease);}
.brand:hover svg,.brand:focus-visible svg{transform:rotate(90deg);}
.nav a{position:relative;}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.55rem;height:2px;background:repeating-linear-gradient(90deg,var(--madder) 0 3px,transparent 3px 5px);
transform:scaleX(0);transform-origin:0 50%;transition:transform .35s steps(8);}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);}
.nav a[aria-current="page"]::after{display:none;}

/* 2 shuttle transitions: page to page the old page lifts off the loom and the next one rises; light or dark arrives
   as a light that moves out from the button */

::view-transition-old(root){animation:st-leave .26s cubic-bezier(.4,0,1,1) both;}
::view-transition-new(root){animation:st-rise .52s cubic-bezier(.16,.84,.3,1) both;}
@keyframes st-leave{to{opacity:0;transform:translateY(-14px);}}
@keyframes st-rise{from{opacity:0;transform:translateY(24px);}}
.st-theme .site-head{view-transition-name:none;}
.st-theme::view-transition-old(root){animation:none;}
.st-theme::view-transition-new(root){animation:st-light .95s cubic-bezier(.3,.6,.15,1) both;
-webkit-mask-image:radial-gradient(circle at var(--vt-x) var(--vt-y),#000 var(--vt-p),transparent calc(var(--vt-p) + 7rem));
mask-image:radial-gradient(circle at var(--vt-x) var(--vt-y),#000 var(--vt-p),transparent calc(var(--vt-p) + 7rem));}
@keyframes st-light{from{--vt-p:-7rem;}to{--vt-p:var(--vt-r);}}

/* 3 woven words: the name, the one-word page titles in a dye for each part of the site, and the name in the footer.
   weft picks of one dye, the warp rising in a 3/1 twill; under the pointer the threads catch the light */
.dyed-indigo{--c:#26345c;--hi:#40548a;--lo:#131b33;--g:#8390ad;}
.dyed-walnut{--c:#6b4a30;--hi:#8e6a49;--lo:#3d2918;--g:#b8a084;}
.dyed-weld{--c:#94690d;--hi:#b98a25;--lo:#5f4306;--g:#d8c28c;}
.dyed-madder{--c:#9a361c;--hi:#bb5533;--lo:#692010;--g:#c98466;}
.dyed-oak{--c:#2a231e;--hi:#4a3d33;--lo:#120e0b;--g:#75685b;}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) .dyed-indigo{--c:#a9bbe3;--hi:#d3def5;--lo:#7589b8;--g:#3b4766;}
:root:not([data-theme="light"]) .dyed-walnut{--c:#cfb08f;--hi:#ecd6bc;--lo:#a0835f;--g:#5a4631;}
:root:not([data-theme="light"]) .dyed-weld{--c:#e2b84e;--hi:#f4d68d;--lo:#b58a26;--g:#5e4a1a;}
:root:not([data-theme="light"]) .dyed-madder{--c:#e5825f;--hi:#f6ab8b;--lo:#b85d3e;--g:#7a3a26;}
:root:not([data-theme="light"]) .dyed-oak{--c:#e6dcc6;--hi:#fbf5e8;--lo:#b3a790;--g:#6e6252;}
}
:root[data-theme="dark"] .dyed-indigo{--c:#a9bbe3;--hi:#d3def5;--lo:#7589b8;--g:#3b4766;}
:root[data-theme="dark"] .dyed-walnut{--c:#cfb08f;--hi:#ecd6bc;--lo:#a0835f;--g:#5a4631;}
:root[data-theme="dark"] .dyed-weld{--c:#e2b84e;--hi:#f4d68d;--lo:#b58a26;--g:#5e4a1a;}
:root[data-theme="dark"] .dyed-madder{--c:#e5825f;--hi:#f6ab8b;--lo:#b85d3e;--g:#7a3a26;}
:root[data-theme="dark"] .dyed-oak{--c:#e6dcc6;--hi:#fbf5e8;--lo:#b3a790;--g:#6e6252;}
.dyed{--th:3px;}
.foot-mark{--th:4px;--c:#e6dcc6;--hi:#fbf5e8;--lo:#b3a790;--g:#5d5244;}
.foot-mark span{--c:#d9ac3f;--hi:#f0d388;--lo:#a37a1f;--g:#6b5520;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.home .mast h1,.home .mast-2,.dyed,.foot-mark,.foot-mark span{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
background-image:radial-gradient(circle var(--lr,11rem) at var(--lx,-2000px) var(--ly,-2000px),var(--glint),transparent),
repeating-linear-gradient(45deg,transparent 0 calc(var(--th) * 2.12),var(--g) calc(var(--th) * 2.12) calc(var(--th) * 2.83)),
repeating-linear-gradient(180deg,var(--lo) 0,var(--hi) calc(var(--th) * .38),var(--c) calc(var(--th) * .7),var(--lo) var(--th));
background-repeat:no-repeat,repeat,repeat;transition:--lx .55s var(--ease),--ly .55s var(--ease);}
.dyed ::selection,.dyed::selection,.foot-mark ::selection{-webkit-text-fill-color:var(--fg);}
}
.home .mast h1{--lr:14rem;}
@media (prefers-reduced-motion:no-preference){
.home .mast h1,.home .mast-2{animation:st-sheen 2.4s .35s cubic-bezier(.45,0,.25,1) backwards;}
@keyframes st-sheen{from{--lx:-20%;--ly:-10%;}to{--lx:125%;--ly:110%;}}
}

/* 4 the thread under my name (80rem and wider, where the rule runs from the name to the painting): push it and it
   gives, let go and it rings (studio.js). the rule of home.css stays under it until the script strings the thread */
.mast-rule{display:none;}
@media (min-width:80rem){
.home > .mast > .mast-rule{display:block;position:relative;grid-row:2;grid-column:1 / -1;height:5px;
margin-right:calc(-1 * (var(--gap) + var(--margin-w)));touch-action:pan-y;}
.home > .mast.is-strung::before{visibility:hidden;}
}
.mast-rule::after{content:"";position:absolute;left:0;right:0;top:-1.1rem;bottom:-1.1rem;}
.mast-rule svg{position:absolute;left:0;top:-29.5px;width:100%;height:64px;overflow:visible;pointer-events:none;}
.mast-rule path{fill:none;stroke:var(--bar);stroke-width:5px;stroke-linejoin:round;}

/* 5 the bull on the loom: point at the painting, or press it, and the woven bull (studio.js lays it over the
   painting) comes in pick by pick; a line of weld runs where the weaving is */
.bull-weft{display:block;position:relative;aspect-ratio:1;width:100%;cursor:pointer;--w:0;transition:--w 1.35s steps(42,end);}
.bull-cloth{position:absolute;inset:0;background:url(/img/bull-woven.png) 0 0/100% 100% no-repeat;filter:var(--woven-filter);
-webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(var(--w) * 1%) no-repeat;mask:linear-gradient(#000 0 0) 0 0/100% calc(var(--w) * 1%) no-repeat;}
.bull-fell{position:absolute;left:-4px;right:-4px;height:2px;margin-top:-1px;background:var(--dye-weld);pointer-events:none;
top:calc(var(--w) * 1%);opacity:clamp(0,min(var(--w),100 - var(--w)) * .4,1);}
.bull-weft[aria-pressed="true"]{--w:100;}
@media (hover:hover){.bull-weft:hover{--w:100;}}
.bull-weft:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media (min-width:64rem) and (max-width:79.99rem){.page > .mast-plate{position:relative;}
.mast-plate > .bull-weft{position:absolute;left:0;top:0;}}
@media (min-width:80rem){.home > .mast-plate > .bull-weft{grid-column:margin;grid-row:1;align-self:end;margin-bottom:var(--s-5);position:relative;}}

/* 6 the loom weaves as it comes into view: a day a pick, done by the time the whole cloth shows. the day ribbons
   between the sections weave in as you pass them */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
.loom-cloth{view-timeline:--cloth block;}
.loom-covers i{animation-timeline:--cloth;animation-fill-mode:both;}
.loom-covers i:nth-child(1){animation-delay:0s;animation-range:entry 0% entry 27%;}
.loom-covers i:nth-child(2){animation-delay:0s;animation-range:entry 10% entry 37%;}
.loom-covers i:nth-child(3){animation-delay:0s;animation-range:entry 21% entry 48%;}
.loom-covers i:nth-child(4){animation-delay:0s;animation-range:entry 31% entry 58%;}
.loom-covers i:nth-child(5){animation-delay:0s;animation-range:entry 42% entry 69%;}
.loom-covers i:nth-child(6){animation-delay:0s;animation-range:entry 52% entry 79%;}
.loom-covers i:nth-child(7){animation-delay:0s;animation-range:entry 63% entry 90%;}
.loom-covers i:nth-child(8){animation-delay:0s;animation-range:entry 73% entry 100%;}
.ribbon img{animation:st-weft linear both;animation-timeline:view();animation-range:entry 0% cover 42%;}
@keyframes st-weft{from{clip-path:inset(-2px 100% -2px -2px);}to{clip-path:inset(-2px -2px -2px -2px);}}
.exhibit-n{animation:st-drift linear both;animation-timeline:view();}
@keyframes st-drift{from{translate:0 1rem;}to{translate:0 -1rem;}}
}}

/* 7 charts draw in from monday to monday when they come into view (studio.js marks the ones below the fold) */
.st-pre{clip-path:inset(-6px 100% -6px -6px);}
.st-draw{clip-path:inset(-6px -6px -6px -6px);transition:clip-path 1.7s cubic-bezier(.55,.05,.2,1);}

/* 8 swatches: pinked like a sample card, and they turn to the pointer */
.row-sett,.work-index img{-webkit-mask:url(/img/studio/pinked.svg) 0 0/100% 100%;mask:url(/img/studio/pinked.svg) 0 0/100% 100%;outline:0;
transform:perspective(26rem) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)) rotate(var(--tz,0deg)) translateY(var(--tl,0px));
transition:transform .6s var(--ease),filter .3s;}
.work-index a:is(:hover,:focus-visible) img{--tz:-3deg;--tl:-4px;filter:var(--woven-filter) brightness(1.06);}
.row-sett{grid-area:sw;width:3.5rem;height:3.5rem;align-self:start;margin-top:.15rem;image-rendering:auto;}
.row[data-sett]{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n main sw" "n meta sw";}
@container (min-width:40rem){
.row[data-sett]{grid-template-columns:3rem 5.25rem minmax(0,1fr) 12rem;grid-template-areas:"n sw main meta";}
.rows:has(> .row[data-sett]) > .row:not([data-sett]){grid-template-columns:3rem 5.25rem minmax(0,1fr) 12rem;grid-template-areas:"n . main meta";}
.row-sett{width:4.75rem;height:4.75rem;margin-top:0;}
}
.row[data-sett]:is(:hover,:focus-within) .row-sett{--tz:-4deg;--tl:-3px;filter:var(--woven-filter) brightness(1.06);}

/* 9 about: the dates on a plied thread, a knot for each */
.about #timeline + .ledger{position:relative;padding-left:1.9rem;}
.about #timeline + .ledger::before{content:"";position:absolute;left:.52rem;top:1.1rem;bottom:1.4rem;width:3px;border-radius:2px;
background:repeating-linear-gradient(160deg,var(--madder) 0 3px,color-mix(in srgb,var(--madder) 45%,var(--bg)) 3px 5px);}
.about #timeline + .ledger > div{position:relative;}
.about #timeline + .ledger > div::before{content:"";position:absolute;left:-1.72rem;top:1.02rem;width:.8rem;height:.8rem;border-radius:50%;
background:radial-gradient(circle at 34% 32%,color-mix(in srgb,var(--madder) 45%,#fff) 0 18%,var(--madder) 50%,color-mix(in srgb,var(--madder) 55%,#000));
box-shadow:0 0 0 3px var(--bg);}

/* 10 the footer: a woven name tape along its edge, sliding the way a tape feeds, and the name woven large */
.site-foot{padding-top:0;padding-bottom:0;overflow:hidden;container-type:inline-size;}
.foot-tape{height:26px;margin-bottom:var(--s-7);background:url(/img/studio/name-tape.svg) 0 0/auto 100% repeat-x;
box-shadow:0 -1px 0 rgb(0 0 0 / .18),0 1px 0 rgb(0 0 0 / .35);}
@media (prefers-reduced-motion:no-preference){.foot-tape{animation:st-tape 42s linear infinite;}}
@keyframes st-tape{to{background-position-x:-246px;}}
.foot-mark{margin:var(--s-8) 0 0;padding:0 var(--gutter);font:500 calc(100cqi / 5.35)/.8 var(--sans);letter-spacing:-.055em;white-space:nowrap;
text-align:center;color:var(--foot-fg);user-select:none;-webkit-user-select:none;padding-bottom:.05em;}
.foot-mark span{color:var(--foot-link);}

/* reduced motion, forced colours, print */
@media (prefers-reduced-motion:reduce){
.site-head,.bull-weft,.progress,.row-sett,.work-index img,.brand svg{transition:none!important;}
.st-out .site-head{transform:none;}
.bull-fell{display:none;}
}
@media (forced-colors:active){
.dyed,.foot-mark,.foot-mark span,.home .mast h1,.home .mast-2{background:none!important;color:CanvasText;-webkit-text-fill-color:CanvasText;}
.site-head{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;}
.site-head::after,.foot-tape{display:none;}
.mast-rule path{stroke:CanvasText;}
.row-sett,.work-index img{-webkit-mask:none;mask:none;outline:1px solid CanvasText;}
}
@media print{
body{background-image:none;}
.site-head,.st-out .site-head{position:static;backdrop-filter:none;transform:none;}
.st-pre,.st-draw{clip-path:none!important;}
.site-head::after,.foot-tape,.foot-mark,.mast-rule svg{display:none!important;}
.dyed,.home .mast h1,.home .mast-2{background:none!important;-webkit-text-fill-color:#000;color:#000;}
}