/* About v2 (13.10.2026): the author's study. Candlelit portrait, a reader's card, the loom of Blairville,
   a bookshelf to pull from, the artists' wall, sealed letters for every profile. Loaded after styles.css.
   Colours stay in the house palette (night, walnut, ivory, candle, rose); bone and halo gold are added for the portrait. */
:root{--ab-bone:#E8DCC4;--ab-halo:#E9B866;--ab-wax:#7A2620;--ab-ease:cubic-bezier(.2,.7,.2,1)}
body.ab{background:var(--night)}
.ab .ab-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ab .ab-head .ttl{font-size:clamp(28px,4vw,46px)}
.ab-sub{margin:0;max-width:34em;font-style:italic;color:var(--ash);font-size:clamp(16px,1.6vw,18px)}

/* ---------- hero: the portrait by candlelight ---------- */
.abh{padding-block:clamp(48px,6vw,96px) clamp(64px,8vw,110px);background:var(--night)}
.abh>.bg{filter:brightness(.55) saturate(.8)}
.abh>.shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 70% at 30% 45%,rgba(6,4,4,.1),rgba(6,4,4,.85) 75%),linear-gradient(180deg,rgba(6,4,4,.5),transparent 30%,transparent 70%,var(--night))}
.abh-dust{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.abh-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,90px);align-items:center}
.ab-port{position:relative;margin:0;justify-self:center;width:min(100%,440px);display:flex;flex-direction:column;gap:12px;--mx:50%;--my:30%}
.ab-frame{position:relative;border-radius:999px 999px 6px 6px/300px 300px 6px 6px;overflow:hidden;padding:10px;background:linear-gradient(160deg,#5A3B22,#2A1B12 40%,#6E4A2A 60%,#24170F);box-shadow:0 0 0 1px rgba(217,162,95,.55),0 0 0 7px #0B0706,0 0 0 8px rgba(217,162,95,.25),0 40px 80px rgba(0,0,0,.75)}
.ab-frame .pic{display:block;width:100%;border-radius:999px 999px 2px 2px/290px 290px 2px 2px;filter:brightness(.8) contrast(1.05) saturate(.9);transition:filter 1.2s}
.ab-frame .lit{position:absolute;inset:10px;border-radius:inherit;pointer-events:none;background:radial-gradient(circle 46% at var(--mx) var(--my),rgba(255,214,150,.32),rgba(255,190,110,.08) 45%,transparent 70%);mix-blend-mode:soft-light;transition:opacity 1s}
/* v425: the glow sits exactly on the halo drawn in the portrait (centre 500/430, radius 235 of 1000x1347; frame padding 10px) */
.ab-frame .halo{position:absolute;left:calc(10px + (100% - 20px) * .5);top:calc(10px + (100% - 20px) * .3192);width:calc((100% - 20px) * .47);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;border:1px solid rgba(233,184,102,.35);box-shadow:0 0 18px 2px rgba(233,184,102,.28),inset 0 0 16px 2px rgba(233,184,102,.24);animation:ab-halo 6s ease-in-out infinite;mix-blend-mode:screen;transition:box-shadow 1.2s,border-color 1.2s}
@keyframes ab-halo{0%,100%{opacity:.55}50%{opacity:1}}
.ab-frame .c{position:absolute;width:22px;height:22px;border:1px solid rgba(217,162,95,.8);pointer-events:none}
.ab-frame .c1{display:none}.ab-frame .c2{display:none}
.ab-frame .c3{left:18px;bottom:18px;border-top:0;border-right:0}.ab-frame .c4{right:18px;bottom:18px;border-top:0;border-left:0}
/* v426 (owner: remove the caption line): the credit now sits inside the bottom of the painting, hidden at rest, shown on hover/focus; @artofesme is also credited in the artists section */
.ab-port figcaption{position:relative;z-index:2;margin-top:-44px;margin-bottom:12px;font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;color:rgba(232,220,196,.8);text-align:center;text-shadow:0 1px 6px #000;opacity:0;pointer-events:none;transition:opacity .5s}
.ab-port:hover figcaption,.ab-port:focus-within figcaption{opacity:1;pointer-events:auto}
.ab-port figcaption a{color:var(--candle)}
/* the candle: blow it out, light it again */
/* v425: no drawn candle any more; the portrait itself puts the light out and brings it back */
.ab-frame{transition:box-shadow 1.2s}
/* v593: only the head (the halo circle) is the switch */
.ab-hit{position:absolute;z-index:3;left:calc(10px + (100% - 20px) * .5);top:calc(10px + (100% - 20px) * .3192);width:calc((100% - 20px) * .47);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ab-hit:focus-visible{outline:2px solid var(--candle);outline-offset:6px}
.ab-port:hover .abh.out .ab-frame{box-shadow:0 0 0 1px rgba(217,162,95,.3),0 0 0 7px #0B0706,0 0 0 8px rgba(217,162,95,.12),0 40px 80px rgba(0,0,0,.85)}
.abh.out .ab-frame .pic{filter:brightness(.28) contrast(1.2) saturate(.6)}
.abh.out .ab-frame .lit{opacity:0}
.abh.out .ab-frame .halo{border-color:rgba(255,214,150,.75);box-shadow:0 0 40px 8px rgba(233,184,102,.5),inset 0 0 26px 6px rgba(233,184,102,.42);animation-duration:3s}
.abh.out>.bg{filter:brightness(.18)}
.abh.out .abh-copy{opacity:.55}
.abh-copy{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px);min-width:0;transition:opacity 1s}
.abh-name{margin:0;width:min(420px,90%)}
.abh-name img{width:100%;filter:drop-shadow(0 4px 20px rgba(0,0,0,.9))}
.abh-role{margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.abh-q{margin:6px 0 0;padding:0 0 0 20px;border-left:1px solid rgba(217,162,95,.5)}
.abh-q p{margin:0;font-family:var(--f-display);font-size:clamp(22px,2.7vw,34px);line-height:1.35;letter-spacing:.02em;color:var(--ivory);text-wrap:balance}
.abh-q .ch{opacity:0;transition:opacity .35s,filter .35s;filter:blur(3px)}
.abh-q .ch.on{opacity:1;filter:none}
/* v427 (owner: unclear whose quote this is): the quote is signed */
.abh-cite{margin-top:12px;font-family:var(--f-label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--candle);animation:ab-cite 1s 2.9s ease both}
@keyframes ab-cite{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.abh-cite{animation:none}}
/* v428 (owner: the signature on its own does not fit): like the footer, it now sits faintly behind the MAEZOS wordmark and writes itself in */
.abh-name{position:relative;isolation:isolate}
.abh-name img:first-child{position:relative;z-index:1}
.abh-name .abh-sig{position:absolute;z-index:0;left:50%;top:50%;width:auto;height:165%;translate:-50% -50%;opacity:.24;filter:grayscale(1) brightness(.85);pointer-events:none;-webkit-mask-image:linear-gradient(115deg,#000 45%,transparent 55%);mask-image:linear-gradient(115deg,#000 45%,transparent 55%);-webkit-mask-size:260% 100%;mask-size:260% 100%;animation:ab-sign 2.4s 3.2s ease-in-out both}
@keyframes ab-sign{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.abh-cta{justify-content:flex-start;margin-top:4px}

/* ---------- bio + reader's card ---------- */
.ab-bio{padding-block:clamp(72px,9vw,124px);background:var(--night)}
.ab-bio>.bg{opacity:.32;filter:brightness(.6)}
.ab-bio>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night),rgba(6,4,4,.4) 25%,rgba(6,4,4,.5) 75%,var(--night))}
.ab-bio-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,80px);align-items:center}
.ab-bio-text{display:flex;flex-direction:column;gap:16px;min-width:0}
.ab-bio-text .ttl{font-size:clamp(28px,3.8vw,44px)}
.ab-bio-text .bio{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.72;color:var(--ivory);text-shadow:0 1px 10px rgba(0,0,0,.8)}
/* v430 (owner: the big M does not fit with MAEZOS): no drop cap, the names stay in Cinzel gold within the line */
.ab-bio-text .bio strong{font-family:var(--f-display);font-weight:400;letter-spacing:.08em;color:var(--candle)}
.punch{position:absolute;top:12px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--night);box-shadow:inset 0 2px 3px rgba(0,0,0,.8)}
@keyframes ab-stamp{from{opacity:0;transform:rotate(-11deg) scale(2)}to{opacity:1;transform:rotate(-11deg) scale(1)}}

/* ---------- the loom ---------- */
.ab-loom{padding-block:clamp(72px,9vw,124px);background:var(--night)}
.ab-loom>.bg{opacity:.45}
.ab-loom>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night),rgba(6,4,4,.55) 20%,rgba(6,4,4,.6) 80%,var(--night))}
.ab-wm{margin:0;width:min(560px,86%)}
.ab-wm img{width:100%;filter:drop-shadow(0 6px 24px rgba(0,0,0,.85))}
.loom{position:relative;margin:clamp(30px,4vw,50px) auto 0;max-width:1080px;aspect-ratio:16/6}
.loom canvas{position:absolute;inset:0;width:100%;height:100%}
.loom-k{position:absolute;left:0;top:0;bottom:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-around;pointer-events:none}
.loom-k li{display:flex;align-items:center;gap:8px;font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);background:rgba(6,4,4,.6);padding:4px 10px 4px 6px;pointer-events:auto;cursor:default;transition:color .3s}
.loom-k li i{width:18px;height:2px;background:var(--c)}
.loom-k li:nth-child(1){--c:#E8DCC4}.loom-k li:nth-child(2){--c:#E9B866}.loom-k li:nth-child(3){--c:#7FB59E}.loom-k li:nth-child(4){--c:#C46A5E}
.loom-k li:hover,.loom-k li.on{color:var(--ivory)}
.ab-life{margin:clamp(30px,4vw,50px) auto 0;max-width:44em;text-align:center}
.ab-life p{margin:0;font-style:italic;font-size:clamp(18px,1.9vw,22px);line-height:1.65;color:var(--ivory);text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ab-life b{font-family:var(--f-display);font-style:normal;font-weight:400;letter-spacing:.1em;color:var(--candle)}
.ab-life cite{display:block;margin-top:12px;font-style:normal;font-family:var(--f-label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.ab-three{list-style:none;margin:clamp(34px,4vw,54px) auto 0;padding:0;max-width:820px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ab-three a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;text-decoration:none;color:var(--ivory);border:1px solid var(--line);background:rgba(6,4,4,.55);transition:border-color .3s,box-shadow .3s,transform .3s}
.ab-three a:hover,.ab-three a:focus-visible{border-color:var(--candle);box-shadow:0 0 22px rgba(217,162,95,.2);transform:translateY(-2px)}
.ab-three .n{font-family:var(--f-display);color:var(--candle);font-size:15px;letter-spacing:.2em}
.ab-three .t{font-family:var(--f-display);font-size:clamp(14px,1.5vw,17px);letter-spacing:.08em;text-align:center}
.ab-three .e{font-family:var(--f-label);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}

/* ---------- the shelf ---------- */
.ab-shelf{position:relative;padding-block:clamp(72px,9vw,120px) clamp(80px,9vw,130px);background:radial-gradient(ellipse 60% 50% at 50% 70%,rgba(217,162,95,.08),transparent 70%),var(--night)}
.shelf{list-style:none;margin:clamp(40px,5vw,64px) auto 0;padding:0 10px 96px;max-width:1000px;height:calc(clamp(300px,34vw,420px) + 96px);display:flex;align-items:flex-end;justify-content:center;gap:4px}
.shelf .gap{flex:0 0 clamp(10px,2vw,26px)}
.shelf .bk{position:relative;flex:0 0 clamp(46px,5.2vw,64px);height:var(--h);transition:flex-basis .7s var(--ab-ease)}
.shelf .bk a{position:absolute;inset:0;display:block;text-decoration:none;color:inherit;perspective:900px}
.spine{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 4px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.08) 18%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.45)),var(--sp);border-radius:3px 3px 2px 2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.5);transition:opacity .45s,transform .7s var(--ab-ease)}
.spine::before,.spine::after{content:"";position:absolute;left:6px;right:6px;height:2px;background:var(--gold,#C9A060);opacity:.7}
.spine::before{top:42px}.spine::after{bottom:42px}
.sn{font-family:var(--f-display);font-size:13px;letter-spacing:.1em;color:var(--gold,#C9A060)}
.st{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-display);font-size:clamp(11px,1.1vw,14px);letter-spacing:.14em;color:#F1E4CC;white-space:nowrap;overflow:hidden;max-height:70%}
.sa{font-family:var(--f-label);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#C9A060)}
.s-tbl{--sp:linear-gradient(180deg,#5C1E18,#3B120F)}.s-tbl.s2{--sp:linear-gradient(180deg,#3C2A1E,#22170F)}.s-tbl.s3{--sp:linear-gradient(180deg,#2C3628,#141B13)}
.s-ur{--sp:linear-gradient(180deg,#1E2C52,#0F1730);--gold:#98AFE2}
.s-bt{--sp:linear-gradient(180deg,#24382F,#121D18);--gold:#C4A06A}
.s-po{--sp:linear-gradient(180deg,#151C28,#0A0E15);--gold:#7C93AE}
.cover{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:2/3.05;translate:-50% 0;opacity:0;transform:rotateY(-70deg);transform-origin:0 50%;transition:opacity .45s,transform .7s var(--ab-ease);box-shadow:0 20px 40px rgba(0,0,0,.7);pointer-events:none}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.po-cover{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1D2840,#070A10 70%);border:1px solid rgba(124,147,174,.4)}
.po-cover span{font-family:'Michroma','Cinzel',sans-serif;font-size:56px;color:#93B7CC;text-shadow:0 0 20px rgba(147,183,204,.5)}
.po-cover i{position:absolute;left:12%;right:12%;top:62%;height:14px;background:#0A0E15;box-shadow:0 22px 0 #0A0E15,0 -40px 0 0 transparent}
.info{position:absolute;left:50%;top:calc(100% + 34px);width:max-content;max-width:220px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:13px;line-height:1.35;color:var(--ash);opacity:0;transition:opacity .4s .1s;pointer-events:none}
.info b{font-family:var(--f-display);font-weight:400;font-size:15px;letter-spacing:.06em;color:var(--ivory)}
.info em{font-family:var(--f-label);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--candle)}
.shelf .bk.open{flex-basis:clamp(170px,19vw,250px)}
.shelf .bk.open .spine{opacity:0;transform:rotateY(80deg)}
.shelf .bk.open .cover{opacity:1;transform:none}
.shelf .bk.open .info{opacity:1}
.shelf .bk a:focus-visible{outline:2px solid var(--candle);outline-offset:4px}
.bookend{flex:0 0 auto;align-self:flex-end;margin-left:8px}
.bookend img{height:clamp(120px,14vw,170px);width:auto;transform:rotate(14deg);transform-origin:bottom;opacity:.85}
.board{position:relative;max-width:1040px;height:20px;margin:-96px auto 76px;background:linear-gradient(180deg,#5A3B22,#2A1B12);border-top:1px solid rgba(217,162,95,.4);box-shadow:0 18px 30px rgba(0,0,0,.7);border-radius:2px}

/* ---------- artists ---------- */
.ab-artists{background:linear-gradient(180deg,var(--night),#0E0907 50%,var(--night))}
.artists{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.artists a{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;color:var(--ash)}
.artists img{width:100%;max-width:150px;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(217,162,95,.45),0 0 0 5px var(--night),0 0 0 6px rgba(217,162,95,.2),0 14px 28px rgba(0,0,0,.6);filter:sepia(.35) brightness(.85);transition:filter .5s,transform .5s var(--ab-ease),box-shadow .5s}
.artists a:hover img,.artists a:focus-visible img{filter:none;transform:translateY(-4px) scale(1.03);box-shadow:0 0 0 1px var(--candle),0 0 0 5px var(--night),0 0 0 6px rgba(217,162,95,.5),0 0 28px rgba(217,162,95,.25)}
.artists b{margin-top:6px;font-family:var(--f-label);font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--ivory)}
.artists span{font-size:13px;line-height:1.3;font-style:italic}

/* ---------- sealed letters ---------- */
.ab-find{padding-block:clamp(72px,9vw,124px);background:var(--night)}
.ab-find>.bg{filter:brightness(.4) saturate(.8)}
.ab-find>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night),rgba(6,4,4,.55) 25%,rgba(6,4,4,.65) 75%,var(--night))}
.letters{list-style:none;margin:clamp(40px,5vw,60px) auto 0;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px) clamp(14px,2vw,24px)}
.lt a{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ivory);padding-top:14%}
.env{position:relative;width:100%;aspect-ratio:1.55;background:linear-gradient(170deg,#CDBB98,#B9A47D);box-shadow:0 16px 30px rgba(0,0,0,.55)}
.env::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(170deg,#E6D8BC,#D2BF99);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);box-shadow:inset 0 -1px 0 rgba(0,0,0,.2);pointer-events:none}
.flap{position:absolute;left:0;right:0;top:0;height:56%;background:linear-gradient(180deg,#DCCAA6,#CBB78F);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .6s var(--ab-ease),z-index 0s .35s;z-index:5;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.ab-note{position:absolute;left:9%;right:9%;top:10%;height:82%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:10px 8px;background:#F6EEDD;color:#2A1B12;font-size:12.5px;line-height:1.3;text-align:center;font-style:italic;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .6s var(--ab-ease) .12s;z-index:2}
.ab-note b{font-family:var(--f-display);font-style:normal;font-weight:400;font-size:clamp(13px,1.3vw,15px);letter-spacing:.04em}
.seal{position:absolute;left:50%;top:54%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--w2),var(--w1) 60%,var(--w0));box-shadow:0 3px 6px rgba(0,0,0,.45),inset 0 -2px 4px rgba(0,0,0,.35);z-index:6;transition:transform .5s var(--ab-ease),opacity .4s}
.seal::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,var(--w1) 60%,transparent 62%);clip-path:polygon(50% 0,62% 6%,76% 4%,84% 16%,96% 24%,94% 38%,100% 50%,94% 62%,96% 76%,84% 84%,76% 96%,62% 94%,50% 100%,38% 94%,24% 96%,16% 84%,4% 76%,6% 62%,0 50%,6% 38%,4% 24%,16% 16%,24% 4%,38% 6%);z-index:-1}
.seal svg{width:22px;height:22px;fill:none;stroke:rgba(255,230,210,.75);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.w-rose{--w0:#4A1512;--w1:#7A2620;--w2:#A84436}.w-green{--w0:#14261E;--w1:#2B4A3C;--w2:#4C7462}.w-blue{--w0:#111B38;--w1:#22356A;--w2:#3F5A9E}.w-amber{--w0:#5A3A12;--w1:#8C5E22;--w2:#B88A42}
.lt-l{font-family:var(--f-label);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);transition:color .3s}
.lt a:hover .flap,.lt a:focus-visible .flap{transform:rotateX(180deg);z-index:1;transition:transform .6s var(--ab-ease),z-index 0s .25s}
.lt a:hover .ab-note,.lt a:focus-visible .ab-note{transform:translateY(-62%)}
.lt a:hover .seal,.lt a:focus-visible .seal{transform:translateY(40%) scale(.85);opacity:.0}
.lt a:hover .lt-l,.lt a:focus-visible .lt-l{color:var(--candle)}
.lt a:focus-visible{outline:none}.lt a:focus-visible .env{outline:2px solid var(--candle);outline-offset:4px}

/* ---------- write ---------- */
.ab-write{padding-block:clamp(64px,8vw,104px);background:var(--night)}
.ab-write-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,5vw,60px);align-items:stretch}
.ab-letter{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(28px,4vw,48px);background:url(https://static.wixstatic.com/media/5e8914_6798cb26e10241f898c8bbfea4cb1cf6~mv2.webp) center/cover;box-shadow:inset 0 0 0 1px rgba(217,162,95,.35),inset 0 0 80px rgba(0,0,0,.7),0 30px 60px rgba(0,0,0,.5)}
.ab-letter::before{content:"";position:absolute;inset:10px;border:1px solid rgba(217,162,95,.25);pointer-events:none}
.ab-letter .ttl{font-size:clamp(26px,3.2vw,38px)}
.ab-letter p:not(.lbl){margin:0;max-width:32em;font-size:clamp(17px,1.7vw,19px);color:var(--ivory);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.ab-letter .row{justify-content:flex-start}
.ab-wiki{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:clamp(22px,3vw,34px);border:1px solid var(--line);background:rgba(48,29,22,.25)}
.ab-wiki p:not(.lbl){margin:0;color:var(--ash);font-size:16px}
.ab-link{align-self:flex-start;font-family:var(--f-label);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--candle);text-decoration:none;border-bottom:1px solid rgba(217,162,95,.45);padding-bottom:3px}
.ab-link:hover{color:#F3C98B;border-color:#F3C98B}

/* ---------- reveal (only what starts below the first screen) ---------- */
.ab-rv{opacity:0;transform:translateY(18px);filter:blur(3px);transition:opacity 1s var(--ab-ease),transform 1s var(--ab-ease),filter 1s;transition-delay:var(--d,0s)}
.ab-rv.in{opacity:1;transform:none;filter:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .artists{grid-template-columns:repeat(4,minmax(0,1fr))}
  .letters{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .ab-write-g{grid-template-columns:1fr}
}
@media (max-width:820px){
  .abh-g,.ab-bio-g{grid-template-columns:1fr}
  .ab-port{width:min(78%,340px)}
  .abh-copy{align-items:center;text-align:center}
  .abh-q{border-left:0;padding:0}
  .abh-cta{justify-content:center}
  .loom{aspect-ratio:4/3}
  .shelf{overflow-x:auto;justify-content:flex-start;scrollbar-width:none;height:calc(300px + 96px);padding-left:16px;padding-right:16px}
  .shelf::-webkit-scrollbar{display:none}
  .board{margin-left:0;margin-right:0}
  .shelf{--H:300px}
}
@media (max-width:560px){
  .loom-k{left:0;right:0;top:0;bottom:auto;flex-direction:row;flex-wrap:wrap;justify-content:space-around;gap:4px;padding:0 4%}
  .loom-k li{font-size:9px;letter-spacing:.1em;padding:3px 6px}
  .artists{grid-template-columns:repeat(3,minmax(0,1fr))}
  .artists span{font-size:11.5px}
  .ab-three{grid-template-columns:1fr}
  .loom{aspect-ratio:3/4}
  .letters{gap:16px 12px}
  .ab-note{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .ab-frame .halo,.abh-sig{animation:none}
  .abh-sig{-webkit-mask-image:none;mask-image:none}
  .ab-rv{opacity:1;transform:none;filter:none;transition:none}
  .shelf .bk,.spine,.cover,.flap,.ab-note,.seal{transition:none}
}

/* v431 (owner: the reader's card does not look right, odd hover): replaced by "In numbers", a calm column of figures, no hover tilt.
   Words written grows by itself: WORDS_BASE on WORDS_DATE plus WORDS_PER_DAY every day (values in about.js, still to be confirmed by Maezos). */
.ab-facts{position:relative;padding:8px 0 8px 34px;border-left:1px solid rgba(217,162,95,.45);display:flex;flex-direction:column;gap:26px}
.ab-facts::before{content:"";position:absolute;left:-4px;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--candle);box-shadow:0 0 12px rgba(233,184,102,.8)}
.fx-h{margin:0;font-family:var(--f-label);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}
.fx{display:flex;flex-direction:column;gap:4px;min-width:0}
.fx-n{font-family:var(--f-display);font-weight:400;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:.04em;color:var(--ivory);font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(233,184,102,.25)}
.fx-words .fx-n{font-size:clamp(38px,4.6vw,60px);color:var(--candle)}
.fx-l{font-family:var(--f-label);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.fx-s{font-family:var(--f-body);font-style:italic;font-size:15px;color:rgba(232,220,196,.55)}
.fx-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fx-next .fx-n{color:var(--ivory)}
.fx-t{margin:0;padding-top:16px;border-top:1px solid rgba(217,162,95,.2);font-family:var(--f-body);font-style:italic;font-size:16px;color:rgba(232,220,196,.7)}
.ab-facts.ab-rv .fx{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ab-ease),transform .9s var(--ab-ease);transition-delay:calc(var(--i,0) * .14s)}
.ab-facts.ab-rv.in .fx{opacity:1;transform:none}
@media (max-width:860px){.ab-facts{max-width:460px;justify-self:center;width:100%}}
@media (prefers-reduced-motion:reduce){.ab-facts.ab-rv .fx{opacity:1;transform:none;transition:none}}

/* v436 (owner): the shelf holds only the four published books, real spines cut from the print covers, all the same height,
   each as wide as its page count (717 / 716 / 717 to verify / 1,310); three blank books wait for what is still being written.
   No feather; the board is a textured walnut plank with a top face, a front edge and iron brackets. */
.shelf{--H:clamp(300px,34vw,420px);height:calc(var(--H) + 96px);gap:3px;position:relative;z-index:2}
.shelf .bk{flex:0 0 calc(var(--H) * var(--r));height:var(--H)}
.shelf .bk.open{flex-basis:calc(var(--H) * .656)}
.spine.img{padding:0;border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(255,240,220,.10) 10%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 76%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(0,0,0,.25),transparent 4%,transparent 96%,rgba(0,0,0,.35)),var(--img) center/100% 100% no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),4px 0 8px rgba(0,0,0,.35)}
.spine.img::before,.spine.img::after{display:none}
.shelf .ghost{position:relative;flex:0 0 calc(var(--H) * var(--r));height:calc(var(--H) * .985)}
.shelf .ghost .gs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:18px;border-radius:2px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(255,240,220,.05) 12%,transparent 30%,transparent 74%,rgba(0,0,0,.55)),linear-gradient(rgba(14,9,6,.62),rgba(14,9,6,.62)),url(https://static.wixstatic.com/media/5e8914_6798cb26e10241f898c8bbfea4cb1cf6~mv2.webp) center/400px auto,#1A120D;box-shadow:inset 0 0 0 1px rgba(217,162,95,.18),4px 0 8px rgba(0,0,0,.35);transition:filter .5s}
.shelf .ghost .gs::after{content:"";position:absolute;inset:8px 6px;border:1px dashed rgba(217,162,95,.28);border-radius:1px}
.shelf .ghost i{font-family:var(--f-display);font-style:normal;font-size:clamp(16px,1.8vw,22px);color:rgba(233,184,102,.75)}
.shelf .ghost b{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--f-display);font-weight:400;font-size:clamp(10px,1vw,12.5px);letter-spacing:.2em;text-transform:uppercase;color:rgba(232,220,196,.62);white-space:nowrap}
.shelf .ghost .gs{transition:box-shadow .5s}.shelf .ghost:hover .gs{box-shadow:inset 0 0 0 1px rgba(217,162,95,.4),4px 0 8px rgba(0,0,0,.35),0 0 24px rgba(233,184,102,.12)}
.shelf .ghost:hover .info{opacity:1}
.board{height:40px;margin:-104px auto 72px;z-index:1;box-shadow:none;background:none;border:0}
.board .top,.board .front,.board .br{position:absolute;display:block}
.board .top{left:0;right:0;top:0;height:14px;background:linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.25) 55%,rgba(255,214,160,.10)),url(https://static.wixstatic.com/media/5e8914_b831232284294bf8b2c0360a997b9632~mv2.webp) 0 30%/1000px auto;filter:brightness(1.15)}
.board .front{left:0;right:0;top:14px;height:26px;background:linear-gradient(180deg,rgba(255,214,160,.22),rgba(255,214,160,0) 12%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45)),url(https://static.wixstatic.com/media/5e8914_b831232284294bf8b2c0360a997b9632~mv2.webp) 0 70%/1000px auto;border-top:1px solid rgba(217,162,95,.45);border-radius:0 0 2px 2px;box-shadow:0 22px 30px -6px rgba(0,0,0,.85),0 6px 10px rgba(0,0,0,.6)}
.board .br{top:40px;width:16px;height:46px;background:linear-gradient(90deg,#1B1714,#3A332D 45%,#14110F);clip-path:polygon(0 0,100% 0,100% 100%,0 22%);opacity:.9}
.board .b1{left:9%}.board .b2{right:9%}
@media (max-width:860px){.board .br{display:none}}
/* v436 mobile: the shelf scrolls sideways, so the plank is drawn inside the scrolling list and travels with the books */
@media (max-width:860px){
  .board{display:none}
  .shelf{background:linear-gradient(180deg,rgba(255,214,160,.25),rgba(255,214,160,0) 2px,rgba(0,0,0,0) 40%,rgba(0,0,0,.5)) 0 calc(var(--H) - 8px)/100% 30px no-repeat local,url(https://static.wixstatic.com/media/5e8914_b831232284294bf8b2c0360a997b9632~mv2.webp) 0 calc(var(--H) - 8px)/900px 30px repeat-x local}
}

/* v437: the words figure "tracks" Maezos at her desk: a quill caret blinks while she types, a soft glow on every new word,
   a brief dim when words are deleted; the caret rests during pauses and disappears when she is away from the desk. */
.fx-words .fx-n{display:inline-flex;align-items:baseline;gap:.08em}
.fx-caret{display:inline-block;width:2px;height:.78em;margin-left:.06em;background:var(--candle);opacity:0;transform:translateY(.04em);box-shadow:0 0 10px rgba(233,184,102,.7)}
.fx-words[data-state=type] .fx-caret,.fx-words[data-state=del] .fx-caret{opacity:1;animation:none}
.fx-words[data-state=pause] .fx-caret{opacity:1;animation:fx-blink 1.05s steps(1) infinite}
@keyframes fx-blink{50%{opacity:0}}
.fx-words.w-up [data-words]{animation:fx-up .5s ease-out}
.fx-words.w-del [data-words]{animation:fx-del .35s ease-out}
@keyframes fx-up{0%{text-shadow:0 0 18px rgba(255,214,150,.9);color:#F6D9A8}100%{text-shadow:none}}
@keyframes fx-del{0%{opacity:.55;filter:blur(.6px)}100%{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.fx-caret{display:none}}

/* v520 mobile: the shelf no longer scrolls sideways (the fourth book was cut off at the edge). The four published books stand on
   the first plank, sized to fit the screen; the "more to come" books stand on a second plank below. */
@media (max-width:860px){
  .shelf{--H:min(300px,calc((100vw - 84px) / 1.56));overflow:visible;flex-wrap:wrap;justify-content:center;align-content:flex-start;row-gap:56px;padding:0 0 56px;height:auto;
    background:linear-gradient(180deg,rgba(255,214,160,.25),rgba(255,214,160,0) 2px,rgba(0,0,0,0) 40%,rgba(0,0,0,.5)) 0 calc(var(--H) - 8px)/100% 30px no-repeat,
      url(https://static.wixstatic.com/media/5e8914_b831232284294bf8b2c0360a997b9632~mv2.webp) 0 calc(var(--H) - 8px)/900px 30px repeat-x,
      linear-gradient(180deg,rgba(255,214,160,.25),rgba(255,214,160,0) 2px,rgba(0,0,0,0) 40%,rgba(0,0,0,.5)) 0 calc(var(--H) * 1.985 + 112px - 8px)/100% 30px no-repeat,
      url(https://static.wixstatic.com/media/5e8914_b831232284294bf8b2c0360a997b9632~mv2.webp) 0 calc(var(--H) * 1.985 + 112px - 8px)/900px 30px repeat-x;
    background-size:100% 30px,900px 30px,100% 30px,900px 30px;background-repeat:no-repeat,repeat-x,no-repeat,repeat-x}
  .shelf .bk,.shelf .ghost{align-self:flex-end}
  .shelf .gap~.gap{flex:0 0 100%;height:0}
  .shelf .ghost b{font-size:8.5px;letter-spacing:.12em}
  .shelf .ghost .gs{gap:10px}
  .shelf .ghost{height:calc(var(--H) * .985)}
  .shelf .bk:not(.open) .info,.shelf .ghost .info{display:none}
  .shelf .info{max-width:min(220px,calc(100vw - 32px))}
}

/* v580 (22.10.2026): calmer box for "Write to Maezos" (no leather texture) */
.ab-letter{background:radial-gradient(120% 90% at 18% 0%,rgba(120,74,48,.38),rgba(120,74,48,0) 60%),linear-gradient(165deg,#2b1c15,#1a110d 70%,#150d0a);box-shadow:inset 0 0 0 1px rgba(217,162,95,.3),0 30px 60px rgba(0,0,0,.45)}
/* v581 (23.10.2026): the artists as a gallery wall. Framed works hang at slightly different heights and drift slowly past; hover or focus stops the wall */
.artists-wall{position:relative;margin-top:clamp(40px,5vw,60px);overflow:hidden;padding:20px 0 34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.artists-wall::before{content:"";position:absolute;left:0;right:0;top:58px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,162,95,.25) 20%,rgba(217,162,95,.25) 80%,transparent);pointer-events:none}
.artists-wall .artists{display:flex;flex-wrap:nowrap;gap:clamp(26px,3vw,46px);width:max-content;margin:0;padding:0 clamp(26px,3vw,46px) 0 0;grid-template-columns:none;animation:ab-wall 70s linear infinite}
.artists-wall:hover .artists,.artists-wall:focus-within .artists{animation-play-state:paused}
@keyframes ab-wall{to{transform:translateX(-50%)}}
.artists-wall .artists li{flex:0 0 auto;width:clamp(140px,13vw,184px)}
.artists-wall .artists li:nth-child(even){margin-top:34px}
.artists-wall .artists li:nth-child(3n){margin-top:14px}
.artists-wall .artists a{gap:12px}
.artists-wall .artists a::before{content:"";width:1px;height:22px;margin-bottom:-12px;background:linear-gradient(rgba(217,162,95,0),rgba(217,162,95,.5))}
.artists-wall .artists img{max-width:none;width:100%;border-radius:2px;padding:7px;background:linear-gradient(145deg,#2c1d15,#140d0a);box-shadow:0 0 0 1px rgba(217,162,95,.55),0 0 0 4px #1a110c,0 0 0 5px rgba(217,162,95,.22),0 22px 34px -10px rgba(0,0,0,.85);filter:sepia(.3) brightness(.82);transform:rotate(var(--tilt,0deg));transition:filter .5s,transform .6s var(--ease-out),box-shadow .5s}
.artists-wall .artists li:nth-child(4n+1) img{--tilt:-1.2deg}.artists-wall .artists li:nth-child(4n+3) img{--tilt:1deg}
.artists-wall .artists a:hover img,.artists-wall .artists a:focus-visible img{filter:none;transform:translateY(-6px) rotate(0deg) scale(1.04);box-shadow:0 0 0 1px var(--candle),0 0 0 4px #1a110c,0 0 0 5px rgba(217,162,95,.5),0 0 34px rgba(217,162,95,.22),0 26px 40px -10px rgba(0,0,0,.9)}
.artists-wall .artists b{margin-top:2px;padding:5px 10px 4px;border:1px solid rgba(217,162,95,.25);background:rgba(20,13,10,.85);font-size:11.5px;letter-spacing:.08em;white-space:nowrap}
.artists-wall .artists a:hover b,.artists-wall .artists a:focus-visible b{border-color:rgba(217,162,95,.6);color:#F3C98B}
@media (prefers-reduced-motion:reduce){.artists-wall{overflow-x:auto}.artists-wall .artists{animation:none}}
@media (max-width:700px){.artists-wall .artists{animation-duration:48s}}

/* ===== v582 (23.10.2026): On her shelf ===== */
/* spines like real paperbacks: square corners, flat with hinge creases, a fine grain, a light top edge */
.spine.img{border-radius:0;background:
  linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.18) 3%,rgba(255,240,220,.07) 5%,rgba(0,0,0,.22) 7.5%,rgba(0,0,0,0) 11%,rgba(0,0,0,0) 88%,rgba(0,0,0,.22) 92.5%,rgba(255,240,220,.05) 95%,rgba(0,0,0,.45) 100%),
  linear-gradient(180deg,rgba(255,236,210,.16) 0,rgba(255,236,210,0) 1.2%,rgba(0,0,0,0) 97%,rgba(0,0,0,.4) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
  var(--img) center/100% 100% no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,236,210,.18),inset 0 0 0 1px rgba(0,0,0,.5),3px 0 6px rgba(0,0,0,.45),1px 0 0 rgba(0,0,0,.6)}
.shelf .ghost .gs{border-radius:0}
.shelf .ghost .gs::after{border-radius:0}
.cover{box-shadow:0 20px 40px rgba(0,0,0,.7),inset 0 0 0 1px rgba(0,0,0,.4)}
/* the title of an opened book sits on a small brass label on the shelf edge, with room to breathe */
.shelf .info{top:calc(100% + 30px);max-width:260px;gap:6px;padding:12px 20px 11px;background:linear-gradient(180deg,#2a1c14,#170f0b);border:1px solid rgba(217,162,95,.45);box-shadow:inset 0 0 0 3px #170f0b,inset 0 0 0 4px rgba(217,162,95,.18),0 12px 24px -10px rgba(0,0,0,.9);line-height:1.45;font-size:14px}
.shelf .info b{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:19px;letter-spacing:.01em;line-height:1.2}
.shelf .info em{margin-top:2px;font-size:10.5px;letter-spacing:.2em}
.shelf .info::before{content:"";position:absolute;left:50%;top:-31px;width:1px;height:30px;background:linear-gradient(rgba(217,162,95,0),rgba(217,162,95,.5))}
/* v582: Project O is only reachable from the timeline on the home page; here it stays a locked file */
.ab-three .ab-locked{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 10px;color:var(--ivory);border:1px dashed var(--line);background:rgba(6,4,4,.4);cursor:default}

/* ===== v583 (23.10.2026) ===== */
/* Where to find her: calling cards scattered on dark velvet (no photo), each one readable; hover straightens and lifts a card */
.ab-find{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(80px,10vw,140px);background:var(--night)}
.ab-find>.bg,.ab-find>.shade{display:none}
.ab-find-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 60% at 50% 55%,rgba(74,32,30,.55),rgba(30,14,12,.4) 50%,transparent 80%),
  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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
  linear-gradient(180deg,var(--night),#120a09 18%,#120a09 82%,var(--night))}
.cards{list-style:none;margin:clamp(40px,5vw,64px) auto 0;padding:0;max-width:1040px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(16px,2.4vw,30px)}
.cc{--acc:#D9A25F;--rot:0deg;--dy:0px}
.cc.c-rose{--acc:#D7AE9F}.cc.c-green{--acc:#A9C2A0}.cc.c-blue{--acc:#A9BCE6}.cc.c-amber{--acc:#E2B26E}
.cc:nth-child(8n+1){--rot:-3deg;--dy:6px}.cc:nth-child(8n+2){--rot:2deg;--dy:-4px}.cc:nth-child(8n+3){--rot:-1.2deg;--dy:10px}.cc:nth-child(8n+4){--rot:3deg;--dy:0px}
.cc:nth-child(8n+5){--rot:1.8deg;--dy:-6px}.cc:nth-child(8n+6){--rot:-2.4deg;--dy:4px}.cc:nth-child(8n+7){--rot:2.6deg;--dy:-2px}.cc:nth-child(8n+8){--rot:-1.6deg;--dy:8px}
.cc a{position:relative;display:flex;flex-direction:column;gap:4px;aspect-ratio:1.75;padding:18px 20px 16px;text-decoration:none;color:var(--ivory);overflow:hidden;
  background:linear-gradient(150deg,rgba(255,240,215,.06),transparent 40%),linear-gradient(160deg,#241813,#140d0a 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 0 0 5px #170f0b,inset 0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent),0 18px 30px -12px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,.5);
  transform:translateY(var(--dy)) rotate(var(--rot));transition:transform .55s var(--ab-ease,cubic-bezier(.2,.7,.2,1)),box-shadow .5s}
.cc a::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,240,215,.1) 48%,transparent 60%) 140% 0/250% 100% no-repeat;transition:background-position 1s ease;pointer-events:none}
.cc a:hover,.cc a:focus-visible{transform:translateY(-10px) rotate(0deg) scale(1.04);box-shadow:inset 0 0 0 1px var(--acc),inset 0 0 0 5px #170f0b,inset 0 0 0 6px color-mix(in srgb,var(--acc) 40%,transparent),0 30px 46px -14px rgba(0,0,0,.95),0 0 30px color-mix(in srgb,var(--acc) 18%,transparent);z-index:2}
.cc a:hover::after,.cc a:focus-visible::after{background-position:-40% 0}
.cc a:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.cc-ic{width:22px;height:22px;margin-bottom:auto;color:var(--acc)}
.cc-ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.cc-p{font-family:var(--f-label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.cc b{font-family:var(--f-display);font-weight:400;font-size:clamp(14px,1.4vw,17px);letter-spacing:.08em;color:var(--ivory);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc em{font-size:14px;line-height:1.3;color:var(--ash)}
.cc-m{position:absolute;right:14px;top:12px;width:26px;height:26px;opacity:.16;background:var(--acc);-webkit-mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat;mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cards{grid-template-columns:minmax(0,1fr);max-width:340px}.cc a{aspect-ratio:auto;min-height:150px}}
@media (prefers-reduced-motion:reduce){.cc a,.cc a::after{transition:none}}

/* portrait: no credit line on hover (credits live in the artists section) */
.ab-port figcaption{display:none}

/* the quote at the top: a large opening mark above, a rule on the left, the name after a short line (like the quote on the Botanink page) */
.abh-q{position:relative;margin:10px 0 0;padding:58px 0 2px clamp(20px,2.4vw,30px);border-left:2px solid rgba(217,162,95,.6)}
.abh-q::before{content:"\201C";position:absolute;left:clamp(16px,2vw,26px);top:-16px;font-family:var(--f-display);font-size:96px;line-height:1;color:var(--candle);opacity:.85}
.abh-cite{display:flex;align-items:center;gap:12px}
.abh-cite::before{content:"";width:28px;height:1px;background:var(--candle)}
@media (max-width:700px){.abh-q{border-left:2px solid rgba(217,162,95,.6);padding:52px 0 2px 18px;text-align:left}}

/* shelf: no light line on top of the spines; "still being written" in the middle of its book, the info card reads horizontally */
.spine.img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),3px 0 6px rgba(0,0,0,.45),1px 0 0 rgba(0,0,0,.6);background-image:
  linear-gradient(90deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.18) 3%,rgba(255,240,220,.07) 5%,rgba(0,0,0,.22) 7.5%,rgba(0,0,0,0) 11%,rgba(0,0,0,0) 88%,rgba(0,0,0,.22) 92.5%,rgba(255,240,220,.05) 95%,rgba(0,0,0,.45) 100%),
  linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,0) 2%,rgba(0,0,0,0) 97%,rgba(0,0,0,.4) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"),
  var(--img)}
.shelf .ghost .gs{justify-content:center}
.shelf .ghost .gs i{position:absolute;top:18px;left:0;right:0;text-align:center}
.shelf .ghost .info b{writing-mode:horizontal-tb;transform:none;font-size:19px;letter-spacing:.01em;text-transform:none;color:var(--ivory);white-space:normal}

/* easter egg: when the light on the portrait goes out, the whole page darkens and something shows itself */
.ab-night-veil{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 40%,rgba(2,2,6,.55),rgba(2,2,6,.82));opacity:0;transition:opacity 1.4s ease}
html.ab-night .ab-night-veil{opacity:1}
html.ab-night header.site{z-index:80}
.ab-egg{position:absolute;z-index:75;width:46px;height:auto;opacity:0;pointer-events:none;transition:opacity 2.2s ease .6s,filter .4s;filter:drop-shadow(0 0 10px rgba(152,175,226,.7))}
.ab-egg img{display:block;width:100%;height:auto;opacity:.75}
html.ab-night .ab-egg{opacity:1;pointer-events:auto;animation:ab-egg 4s ease-in-out 2.4s infinite}
.ab-egg:hover,.ab-egg:focus-visible{filter:drop-shadow(0 0 18px rgba(170,195,255,1))}
@keyframes ab-egg{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){html.ab-night .ab-egg{animation:none}}
/* artists wall: scrollable by hand (drag, wheel, swipe, arrows); it drifts on its own when nobody touches it */
.artists-frame{position:relative}
.artists-wall{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.artists-wall::-webkit-scrollbar{display:none}
.artists-wall.drag{cursor:grabbing}
.artists-wall.drag a{pointer-events:none}
.artists-wall .artists{animation:none}
.artists-wall img{-webkit-user-drag:none;user-select:none}
.aw-btn{position:absolute;top:50%;z-index:3;width:46px;height:46px;margin-top:-23px;display:grid;place-items:center;border:1px solid rgba(217,162,95,.5);border-radius:50%;background:rgba(14,9,7,.85);color:var(--candle);cursor:pointer;transition:background .3s,color .3s,transform .3s}
.aw-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.aw-btn.prev{left:clamp(8px,3vw,40px)}.aw-btn.next{right:clamp(8px,3vw,40px)}
.aw-btn:hover,.aw-btn:focus-visible{background:var(--candle);color:#1a110c;transform:scale(1.06)}
@media (max-width:600px){.aw-btn{display:none}}
.cc b{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:clamp(18px,1.7vw,21px);letter-spacing:.01em}
.abh-q{padding-top:46px}.abh-q::before{font-family:var(--f-body);font-size:120px;top:-30px;opacity:.9}

/* ===== v584 (23.10.2026) ===== */
/* "In numbers": the fourth figure is the Instagram audience (a link to the profile) */
.fx-ig{text-decoration:none;color:inherit}
.fx-ig .fx-n{color:var(--ivory)}
.fx-plus{margin-left:.04em;color:var(--candle)}
.fx-ig .fx-l{transition:color .3s}
.fx-ig:hover .fx-l,.fx-ig:focus-visible .fx-l{color:var(--candle)}
.fx-ig:focus-visible{outline:2px solid var(--candle);outline-offset:6px}

/* "Write to Maezos": the two buttons stay side by side (short labels on phones) */
.ab-letter .row{flex-wrap:nowrap;gap:12px}
.ab-letter .row .btn{flex:0 1 auto;min-width:0;white-space:nowrap;padding:0 22px}
.ab-letter .row .l-s{display:none}
/* the phone rules of the home page (styles.css, v18.3) stack every button at 220 px; here the two stay side by side */
@media (max-width:720px){
  main .ab-letter .row{flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;justify-content:flex-start!important;width:100%!important;margin-inline:0!important;gap:10px!important}
  main .ab-letter .row .btn{width:auto!important;max-width:none;flex:1 1 0!important;min-width:0!important;height:44px!important;padding:0 6px!important;font-size:10.5px!important;letter-spacing:.08em!important}
  .ab-letter .row .l-l{display:none}.ab-letter .row .l-s{display:inline}
}

/* artists wall: a plain click opens the profile; the grab state only starts after the pointer has moved */
.artists-wall.drag a{pointer-events:none}

/* The long Umbra ornament: sits across the seam between the artists and the calling cards. Invisible until the light on the portrait is put out. */
.ab-egg-band{position:relative;z-index:75;height:0}
.ab-egg-band .ab-egg{position:absolute;left:50%;top:0;width:min(540px,78vw);height:auto;transform:translate(-50%,-50%);display:block;opacity:0;pointer-events:none;filter:drop-shadow(0 0 12px rgba(152,175,226,.75));transition:opacity 2.2s ease .6s,filter .4s}
.ab-egg-band .ab-egg img{display:block;width:100%;height:auto;opacity:.9}
html.ab-night .ab-egg-band .ab-egg{opacity:1;pointer-events:auto;animation:ab-egg2 5s ease-in-out 2.8s infinite}
.ab-egg-band .ab-egg:hover,.ab-egg-band .ab-egg:focus-visible{filter:drop-shadow(0 0 22px rgba(170,195,255,1))}
.ab-egg-band .ab-egg:focus-visible{outline:2px solid rgba(170,195,255,.8);outline-offset:10px}
@keyframes ab-egg2{0%,100%{opacity:.78}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.ab-night .ab-egg-band .ab-egg{animation:none}}

/* Calling cards, second version: a card file. Two stacks of ivory cards; every card lies on the one before it, so only its top strip shows.
   Point at a card (or tab to it) and the cards below slide down to show the rest. To go back to the scattered cards of v583 see the saved section in "Claude outputs". */
.kf{--ch:136px;--vis:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,6vw,92px);max-width:1040px;margin:clamp(44px,5vw,72px) auto 0;align-items:start}
.kf-h{margin:0 0 24px;text-align:center;font-family:var(--f-label);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ash)}
.kf-stack{list-style:none;margin:0;padding:0 0 calc(var(--ch) - var(--vis) + 14px)}
.kc{--acc:#A8574F;position:relative;height:var(--ch);margin-top:calc(var(--vis) - var(--ch));transform:translate(var(--x,0),0) rotate(var(--rot,0deg));transition:transform .6s var(--ab-ease)}
.kc:first-child{margin-top:0}
.kc.c-rose{--acc:#A8574F}.kc.c-green{--acc:#5F7C5A}.kc.c-blue{--acc:#4F6796}.kc.c-amber{--acc:#B0782A}
.kc:nth-child(1){--rot:-.5deg;--x:-4px}.kc:nth-child(2){--rot:.55deg;--x:5px}.kc:nth-child(3){--rot:-.25deg;--x:2px}.kc:nth-child(4){--rot:.4deg;--x:-3px}
.kc:hover~.kc,.kc:focus-within~.kc{transform:translate(var(--x,0),calc(var(--ch) - var(--vis) - 6px)) rotate(var(--rot,0deg))}
.kc:hover,.kc:focus-within{transform:translate(0,-5px) rotate(0deg)}
.kc a{position:absolute;inset:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:16px;align-items:start;padding:18px 22px 0 28px;overflow:hidden;text-decoration:none;color:#2b1d14;border-radius:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"),linear-gradient(165deg,#F1E8D4,#E4D7BC 58%,#D9CAAB);
  box-shadow:0 -10px 18px -8px rgba(0,0,0,.6),0 22px 30px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(125,90,52,.4),inset 0 0 0 6px #E6DAC1,inset 0 0 0 7px rgba(150,108,58,.38);transition:box-shadow .5s}
.kc a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:var(--acc)}
.kc a:hover,.kc a:focus-visible{box-shadow:0 -10px 18px -8px rgba(0,0,0,.6),0 30px 40px -14px rgba(0,0,0,.8),0 0 36px rgba(233,184,102,.2),inset 0 0 0 1px var(--acc),inset 0 0 0 6px #E6DAC1,inset 0 0 0 7px rgba(150,108,58,.5)}
.kc a:focus-visible{outline:2px solid var(--candle);outline-offset:4px}
.kc-ic{grid-row:1;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--acc);border-radius:50%;color:var(--acc)}
.kc-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kc-t{grid-row:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kc-p{font-family:var(--f-label);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--acc)}
.kc-t b{font-family:var(--f-body);font-style:italic;font-weight:500;font-size:clamp(20px,2vw,24px);line-height:1.15;letter-spacing:.005em;color:#2b1d14;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc-go{grid-row:1;width:20px;height:20px;margin-top:6px;fill:none;stroke:var(--acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ab-ease)}
.kc a:hover .kc-go,.kc a:focus-visible .kc-go{transform:translate(3px,-3px)}
.kc em{grid-column:1/-1;grid-row:2;align-self:center;padding-left:50px;padding-right:56px;font-size:16px;line-height:1.35;font-style:italic;color:#5B4635;opacity:0;transition:opacity .45s .08s}
.kc:hover em,.kc:focus-within em,.kc:last-child em{opacity:1}
.kc-m{position:absolute;right:16px;bottom:12px;width:50px;height:50px;opacity:.13;background:var(--acc);-webkit-mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat;mask:url(https://static.wixstatic.com/media/5e8914_c2e26461d7c74b868a64d730b62c283b~mv2.webp) center/contain no-repeat}
@media (max-width:820px){.kf{grid-template-columns:minmax(0,1fr);max-width:480px;gap:44px}}
/* touch screens: no hovering, so the cards lie side by side with their line visible */
@media (hover:none){
  .kf-stack{padding-bottom:0;display:flex;flex-direction:column;gap:16px}
  .kc,.kc:first-child{height:auto;margin-top:0;transform:none!important}
  .kc a{position:relative;inset:auto;min-height:118px;padding-bottom:16px}
  .kc em{opacity:1;grid-row:2;padding-right:20px}
}
@media (prefers-reduced-motion:reduce){.kc,.kc a,.kc-go,.kc em{transition:none}}
/* v586: artists and facts react on hover like the other cards */
.artists li a{transition:color .25s}
.artists li a:hover b,.artists li a:focus-visible b{color:#F3C98B}
.artists li a img{transition:filter .35s}
.artists li a:hover img,.artists li a:focus-visible img{filter:brightness(1.12)}
.fx-ig .cnt,.fx-ig .fx-plus{transition:color .25s}
.fx-ig:hover .cnt,.fx-ig:hover .fx-plus,.fx-ig:focus-visible .cnt,.fx-ig:focus-visible .fx-plus{color:#F3C98B}

/* v593: artists -> calling cards closer; cards without text, shorter so the hover shows less empty paper */
.ab-artists{padding-bottom:clamp(28px,3.5vw,48px)}
.ab-find{padding-top:clamp(28px,3.5vw,52px)}
.kf{--ch:100px;--vis:72px}
.kc-m{width:40px;height:40px;bottom:10px}
.kc a{padding-bottom:0}
@media (hover:none){.kc a{min-height:84px;padding-bottom:18px}}

.ab-artists .ab-sub{font-size:clamp(19px,2vw,23px);max-width:38em}

/* v619 (phone): thinner frame around the portrait, so more of the picture shows (halo and light follow the new padding of 4px) */
@media (max-width:720px){
  .ab-frame{padding:4px;box-shadow:0 0 0 1px rgba(217,162,95,.55),0 0 0 3px #0B0706,0 0 0 4px rgba(217,162,95,.25),0 28px 56px rgba(0,0,0,.7)}
  .ab-port:hover .abh.out .ab-frame{box-shadow:0 0 0 1px rgba(217,162,95,.3),0 0 0 3px #0B0706,0 0 0 4px rgba(217,162,95,.12),0 28px 56px rgba(0,0,0,.8)}
  .ab-frame .pic{border-radius:999px 999px 2px 2px/296px 296px 2px 2px}
  .ab-frame .lit{inset:4px}
  .ab-frame .halo{left:calc(4px + (100% - 8px) * .5);top:calc(4px + (100% - 8px) * .3192);width:calc((100% - 8px) * .47)}
  .ab-frame .c{width:14px;height:14px}
  .ab-frame .c3{left:10px;bottom:10px}.ab-frame .c4{right:10px;bottom:10px}
}

/* v622: bio justified beside the numbers; darkened wooden wall behind the shelf */
@media (min-width:861px){.ab-bio-text .bio{text-align:justify;hyphens:auto;-webkit-hyphens:auto}}
.ab-shelf{background:radial-gradient(ellipse 60% 50% at 50% 70%,rgba(217,162,95,.10),transparent 70%),linear-gradient(180deg,var(--night) 0%,rgba(6,4,4,.55) 14%,rgba(6,4,4,.5) 86%,var(--night) 100%),linear-gradient(rgba(6,4,4,.6),rgba(6,4,4,.6)),url(https://static.wixstatic.com/media/5e8914_258ea916c549493baab6b58b1a6cd7a7~mv2.webp) center/cover no-repeat,var(--night)}

/* v623: label, heading and text end together with the numbers line */
@media (min-width:861px){.ab-bio-g{align-items:end}.ab-facts{margin-bottom:8px}}

/* v631: less space between the calling cards and "Write to MAEZOS" (desktop; phone.css keeps its own values) */
@media (min-width:861px){.ab-find{padding-bottom:clamp(28px,3.4vw,48px)}.ab-write{padding-top:clamp(20px,2.6vw,36px)}} /* v706: tighter, the gap was too large with the light on */

/* v648 (owner 01.11.2026): tighter gaps between the portrait head, the bio and the shelf (tablet and desktop) */
@media (min-width:721px){.abh{padding-bottom:clamp(32px,4vw,56px)}.ab-bio{padding-block:clamp(40px,4.5vw,64px)}.ab-shelf{padding-top:clamp(40px,4.5vw,64px)}}

/* v707 (08.11.2026): "Write to MAEZOS" gets the same dark leather background as the bio section ("A life given to one island"), same strength, fading into black at the top and into the footer at the bottom. Chosen by Amir, so the leather photo is deliberately used twice. */
.ab-write{position:relative;isolation:isolate}
.ab-write>.bg{opacity:.32;filter:brightness(.6)}
.ab-write>.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--night),rgba(6,4,4,.4) 25%,rgba(6,4,4,.5) 75%,var(--night))}