@font-face{font-family:'Yellowtail';src:url(yellowtail.woff2) format('woff2');font-weight:400;font-display:swap}
/* Layout: quiet multi-page portfolio; home hero carries the only motion (sparks from one point) */
:root{
  --bg:#eaeef1; --fg:#141414; --muted:#5e666c; --line:#d0d7dc; --card:#dde4e8;
  --blue:#b8a5e6; --orn:#8f78b8; --spark-y:#ffc21a; --spark-o:#ff7a1a; --spark-p:#ff8fbf;
  color-scheme:light; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
a:hover{border-color:var(--fg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--spark-o);outline-offset:3px}
img{display:block;max-width:100%;width:100%;height:100%;object-fit:cover}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-inline:32px}
@media (max-width:640px){.wrap{padding-inline:16px}}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:60px;gap:16px}
.logo{border:0;font-weight:500;letter-spacing:.02em;text-transform:lowercase}
nav{display:flex;gap:26px;font-size:.82rem;text-transform:lowercase;letter-spacing:.04em}
nav a{border:0;color:var(--muted)}
nav a:hover,nav a[aria-current="page"]{color:var(--fg)}
nav a[aria-current="page"]{border-bottom:1px solid var(--fg)}
.menu-btn{display:none;background:none;border:0;color:var(--fg);font:inherit;font-size:.85rem;cursor:pointer}
@media (max-width:760px){
  nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  nav.open{display:flex}
  nav a{padding:14px 16px;border-top:1px solid var(--line)}
  nav a[aria-current="page"]{border-bottom:0}
  .menu-btn{display:block}
}

/* home hero */
.hero{position:relative;min-height:clamp(480px,78vh,860px);display:grid;align-items:end;padding-block:64px;overflow:hidden}
.hero.bloom{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding-block:48px 0;min-height:clamp(560px,86vh,940px);text-align:center}
.bloom-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.bloom h1{font-size:clamp(2.8rem,8.5vw,7.5rem)}
.bloom .tags{justify-content:center}
.flower-wrap{position:relative;z-index:0;width:min(88vw,600px);margin:auto 0 0;transform:translateY(14%);pointer-events:none;flex:none}
.flower-wrap::before{content:"";position:absolute;inset:-18% -16% 10%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,#fff3b0 95%,transparent),color-mix(in srgb,#ffd23f 60%,transparent) 45%,transparent 100%);
  filter:blur(18px)}
.flower{position:relative;z-index:1;display:block;width:100%;height:auto;object-fit:contain;
  filter:drop-shadow(0 1px 1px rgba(90,10,30,.25)) drop-shadow(0 14px 18px rgba(120,20,45,.28)) drop-shadow(0 0 30px rgba(255,214,70,.7))}
/* words rise out of the flower */
.em{display:inline-block;animation:emerge 2.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
@keyframes emerge{from{opacity:0;transform:translateY(38vh) scale(.15);filter:blur(10px)}60%{opacity:1}to{opacity:1;transform:none;filter:none}}
@media (max-width:760px){.flower-wrap{width:96vw}@keyframes emerge{from{opacity:0;transform:translateY(30vh) scale(.15);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}}
@media (prefers-reduced-motion:reduce){.em{animation:none}}

.hero .wrap{position:relative;width:100%}
.hero h1{font-size:clamp(3rem,10vw,8.5rem);font-weight:300;line-height:.95;letter-spacing:-.035em;text-transform:lowercase}
.hero p{margin-top:28px;font-size:clamp(1rem,1.6vw,1.2rem);color:var(--muted)}
.tags{margin-top:16px;display:flex;flex-wrap:nowrap;white-space:nowrap}
.tags span{font-size:clamp(.62rem,1.1vw,.8rem);letter-spacing:.06em;text-transform:lowercase}
.tags span+span::before{content:"·";margin:0 .7em;color:var(--muted)}
@media (max-width:640px){.tags{flex-wrap:wrap;white-space:normal}.tags span{font-size:.78rem}}

/* page head (inner pages) */
.page-head{padding-block:72px 40px}
.page-head h1{font-size:clamp(2.4rem,6vw,4.5rem);font-weight:300;letter-spacing:-.03em;text-transform:lowercase;line-height:1}
.page-head p{margin-top:16px;color:var(--muted);max-width:60ch}

section{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:36px;gap:24px;flex-wrap:wrap}
h2{font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.sec-head a{font-size:.85rem}

/* next / now */
.next{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
.next .date{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.next h3{font-size:clamp(1.6rem,4vw,2.8rem);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.next p{color:var(--muted);margin-top:12px;max-width:60ch}
.now{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 32px}
.now article{padding-block:20px;border-top:1px solid var(--fg)}
.now .when{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.now h3{font-weight:400;font-size:1.2rem;margin:6px 0}
.now p{font-size:.9rem;color:var(--muted)}

/* works */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:48px 32px}
.work .img{aspect-ratio:4/5;max-width:100%;background:var(--card);overflow:hidden;position:relative}
.work .img img{filter:grayscale(.2);transition:transform .8s ease,filter .4s}
.work:hover .img img{transform:scale(1.03);filter:grayscale(0)}
.work .type{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:1.5rem;font-weight:300;letter-spacing:-.02em;text-transform:lowercase;color:var(--muted)}
.work .meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.work h3{font-weight:400;font-size:1.08rem;margin-top:4px;text-transform:lowercase}
.work p{font-size:.88rem;color:var(--muted);margin-top:8px}
.work .support{font-size:.74rem;margin-top:10px;color:var(--muted)}
.earlier{margin-top:72px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;font-size:.92rem}
.earlier ul{list-style:none;columns:2;column-gap:32px}
.earlier li{padding:6px 0;border-bottom:1px solid var(--line);break-inside:avoid}
.earlier li span{color:var(--muted);font-size:.8rem;margin-left:6px}
@media (max-width:640px){.earlier{grid-template-columns:1fr}.earlier ul{columns:1}}

/* lists (dates, words, lab) */
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:18px 0;font-size:1.5rem;font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-size:1.2rem}
details[open] summary::after{content:"–"}
.ev{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px dashed var(--line);font-size:.92rem}
.ev:last-child{margin-bottom:18px}
.ev time,.ev .k{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}
.ev em{font-style:normal;color:var(--muted)}
@media (max-width:640px){.ev{grid-template-columns:1fr;gap:2px}}
.list .ev:first-child{border-top:1px solid var(--fg)}
.prose{max-width:62ch}
.prose p+p{margin-top:1em}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.note{font-size:.82rem;color:var(--muted);margin-top:20px}

/* about */
.about{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.about .portrait{aspect-ratio:4/5;max-width:100%;background:var(--card);overflow:hidden}
.about .bio p{margin-bottom:1.1em;font-size:1.02rem;max-width:62ch}
.about .bio p:first-child{font-size:1.3rem;line-height:1.45;letter-spacing:-.01em}
.links{display:flex;gap:20px;margin-top:28px;flex-wrap:wrap;font-size:.85rem}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:32px}}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.contact .big{font-size:clamp(1.4rem,4vw,2.6rem);font-weight:300;letter-spacing:-.02em;overflow-wrap:anywhere}
.contact ul{list-style:none}
.contact li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:.9rem}
.contact li span{color:var(--muted)}
@media (max-width:760px){.contact{grid-template-columns:1fr}}

footer{padding-block:40px;font-size:.75rem;color:var(--muted);border-top:1px solid var(--line);margin-top:48px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.theme-btn{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer}

/* works page: index of titles by category + sections */
.works-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}
.works-index{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);max-height:calc(100vh - 110px);overflow:auto;padding-bottom:24px;display:grid;gap:26px}
.ix-name{display:block;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;border:0;margin-bottom:8px}
.works-index ul{list-style:none;display:grid;gap:4px}
.works-index li{font-size:.92rem;line-height:1.35}
.works-index li a{border:0}
.works-index li a:hover{border-bottom:1px solid var(--fg)}
.yr{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.works-main .wcat:first-child{border-top:0;padding-top:0}
.wcat{scroll-margin-top:72px}
.work,.wrow{scroll-margin-top:84px}
.count{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.works+.wlist{margin-top:40px}
.wrow strong{font-weight:400}
.wrow:target,.work:target h3{background:color-mix(in srgb,#ffd23f 35%,transparent)}
.works-main .works{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
@media (max-width:860px){
  .works-layout{grid-template-columns:1fr;gap:8px}
  .works-index{position:static;max-height:none;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));padding-bottom:40px;border-bottom:1px solid var(--line)}
}

.hero p.role{color:var(--blue);font-weight:400}
.role span+span::before{content:"–";margin:0 .6em;font-weight:300}
@media (max-width:640px){.role span{white-space:nowrap}}

.shape-wrap{width:min(56vw,520px);transform:none;margin-bottom:56px}
.shape-wrap::before{inset:-16% -14% -6%}
.shape{position:relative;z-index:1;display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 22px rgba(255,214,70,.85)) drop-shadow(0 0 60px rgba(255,200,40,.55))}
@media (max-width:760px){.shape-wrap{width:84vw}}



.glow-only{aspect-ratio:571/385}

/* home: name + flower left, works list right */
.hero.home{display:block;min-height:0;padding-block:56px 48px}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.home-left{position:relative;min-width:0}
.home-left h1{font-size:clamp(3rem,7.4vw,6.6rem);line-height:.92}
.home-left .tags{flex-wrap:wrap;white-space:normal;gap:2px 0}
.home-left .tags span{font-size:.78rem}
.home-flower{position:relative;width:min(100%,500px);margin:36px 0 0}
.home-flower::before{content:"";position:absolute;inset:-18% -16% 6%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,#fff3b0 95%,transparent),color-mix(in srgb,#ffd23f 60%,transparent) 45%,transparent 100%);filter:blur(18px)}
.home-works{padding:8px 0 0 40px;border-left:1px solid var(--line);min-width:0}
.hw-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.hw-head a{font-size:.8rem;color:var(--muted)}
.hw-cols{columns:2 220px;column-gap:36px}
.home-works .ix-cat{break-inside:avoid;margin-bottom:24px}
.home-works ul{list-style:none;display:grid;gap:3px}
.home-works li{font-size:.9rem;line-height:1.35}
.home-works li a{border:0}
.home-works li a:hover{border-bottom:1px solid var(--fg)}
@media (max-width:900px){
  .home-grid{grid-template-columns:1fr;gap:24px}
  .home-works{border-left:0;border-top:1px solid var(--line);padding:28px 0 0}
  .home-flower{width:min(92%,460px);margin-inline:auto}
}
.hw-cols{columns:2 200px}
.home-left .tags span{white-space:nowrap}
.home-left .tags span+span::before{content:none}
.home-left .tags span:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--muted)}
.home-left h1{font-size:clamp(2.2rem,4.9vw,5rem);white-space:nowrap;line-height:1}

/* ---- quiet header in the manner of the reference site ---- */
header.site-head{position:static;background:none;backdrop-filter:none;border:0}
header.site-head .wrap{display:block;height:auto;padding-block:36px 0}
.head-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.site-head .logo{font-size:.8rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.site-head .role-small{margin:0;font-size:.76rem;color:var(--blue)}
.nav-grid{display:grid!important;grid-template-columns:repeat(3,max-content);column-gap:clamp(40px,12vw,150px);row-gap:0;padding-top:8px;font-size:.76rem;position:static!important;background:none!important;border:0!important;flex-direction:initial!important}
.nav-grid a{padding:0!important;border:0!important;color:var(--muted)}
.nav-grid a[aria-current="page"]{color:var(--fg)}
.menu-btn{display:none!important}
.page-head{padding-block:48px 28px}
.page-head h1{font-size:clamp(1.6rem,3.2vw,2.4rem)}

/* ---- home: photo + works list, calendar below ---- */
.fw-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:28px;align-items:start;padding-block:44px 56px}
.fw-photo{margin:0}
.fw-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.fw-works{columns:2;column-gap:28px;font-size:.76rem;line-height:1.55}
.fw-group{break-inside:avoid;margin-bottom:12px}
.fw-cat{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:0;margin-bottom:2px}
.fw-works ul{list-style:none}
.fw-works li a{color:var(--muted);border:0}
.fw-works li a:hover{color:var(--fg)}
.fw-cal{border-top:0;padding-block:8px 64px}
.fw-h{font-size:.74rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:10px}
.cal-sub{font-size:.76rem;margin-bottom:18px}
.cal-year{margin-bottom:20px}
.cal-year h3{font-size:.76rem;font-weight:400;margin-bottom:2px}
.fw-cal .ev{display:block;padding:0;border:0;font-size:.76rem;line-height:1.6;margin:0}
.fw-cal .ev:last-child{margin-bottom:0}
.fw-cal .ev time{color:var(--fg);font-size:inherit;margin-right:.5em}
.fw-cal .ev div{display:inline;color:var(--muted)}
.fw-cal .ev em{color:var(--muted)}
@media (max-width:760px){
  .fw-top{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .nav-grid{column-gap:44px}
}
.fw-flower{position:relative;margin:0;padding:6% 4% 14%}
.fw-flower::before{content:"";position:absolute;left:-6%;right:-30%;top:36%;bottom:-16%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,#fff1a6 95%,transparent),color-mix(in srgb,#ffd23f 70%,transparent) 42%,color-mix(in srgb,#ffd23f 22%,transparent) 70%,transparent 100%);
  filter:blur(22px);transform:scaleX(1.12)}
.fw-flower::after{content:"";position:absolute;left:24%;right:24%;top:70%;height:34%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,#ffc21a 55%,transparent),transparent);filter:blur(26px)}
.fw-flower .flower{position:relative;z-index:1;width:100%;height:auto;display:block}
/* flower dissolving into a soft shadow that drifts right */
.fw-top{position:relative}
.fw-top .fw-works{position:relative;z-index:2}
.fw-flower .flower{filter:none;opacity:.62;
  -webkit-mask-image:radial-gradient(ellipse 60% 62% at 46% 46%,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);
          mask-image:radial-gradient(ellipse 60% 62% at 46% 46%,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%)}
.fw-flower .echo{position:absolute;z-index:0;left:4%;top:6%;width:92%;height:auto;pointer-events:none;transform-origin:30% 50%;
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 46%,#000 34%,rgba(0,0,0,.55) 66%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 46% at 50% 46%,#000 34%,rgba(0,0,0,.55) 66%,transparent 100%)}
.fw-flower .e1{filter:blur(18px) saturate(1.1);opacity:.4;transform:translateX(24%) scaleX(1.8) scaleY(1.15)}
.fw-flower .e2{filter:blur(42px) saturate(1.2);opacity:.32;transform:translateX(62%) scaleX(2.8) scaleY(1.4)}
@media (max-width:760px){.fw-flower .e2{opacity:.2}}

/* keep the outline crisp, wash the flower out, spread the smears further */
.fw-flower .flower{opacity:.6;-webkit-mask-image:none;mask-image:none;filter:brightness(1.12) saturate(.8) contrast(.86)}
.fw-flower .echo{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 30%,rgba(0,0,0,.5) 64%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 48%,#000 30%,rgba(0,0,0,.5) 64%,transparent 100%)}
.fw-flower .e1{filter:blur(22px) saturate(1.1);opacity:.42;transform:translateX(30%) scaleX(2) scaleY(1.2)}
.fw-flower .e2{filter:blur(50px) saturate(1.2);opacity:.34;transform:translateX(80%) scaleX(3.2) scaleY(1.6)}
.fw-flower .e3{filter:blur(36px) saturate(1.1);opacity:.26;transform:translate(46%,30%) scaleX(2.4) scaleY(1.3) rotate(6deg)}

/* more transparent body, highlights kept glossy */
.fw-flower .flower{opacity:.42;filter:contrast(1.1) saturate(.95)}
.fw-flower .shine{position:absolute;z-index:2;left:4%;top:6%;width:92%;height:auto;pointer-events:none;
  filter:grayscale(1) contrast(3) brightness(1.05);mix-blend-mode:screen;opacity:.7}
/* pink smears rising upward */
header.site-head{position:relative;z-index:3}
.fw-flower .e1{filter:blur(22px) saturate(1.1);opacity:.42;transform:translate(4%,-26%) scaleX(1.15) scaleY(1.9)}
.fw-flower .e2{filter:blur(48px) saturate(1.2);opacity:.32;transform:translate(10%,-58%) scaleX(1.45) scaleY(2.8)}
.fw-flower .e3{filter:blur(34px) saturate(1.1);opacity:.26;transform:translate(-8%,-40%) scaleX(1.2) scaleY(2.2) rotate(-8deg)}
.fw-flower .echo{transform-origin:50% 80%}
.fw-flower .e1{transform:translate(4%,-16%) scaleX(1.15) scaleY(1.55)}
.fw-flower .e2{opacity:.28;transform:translate(10%,-28%) scaleX(1.4) scaleY(1.9)}
.fw-flower .e3{transform:translate(-8%,-20%) scaleX(1.2) scaleY(1.7) rotate(-8deg)}
.fw-top{padding-top:96px}

/* flower as a coloured shadow in the background, text on top */
.fw-top{display:block;position:relative;padding-block:72px 72px;min-height:min(78vh,720px)}
.fw-top .fw-flower{position:absolute;z-index:0;left:50%;top:50%;width:min(86%,880px);transform:translate(-50%,-46%);padding:0;pointer-events:none}
.fw-top .fw-flower .flower{opacity:.34;filter:saturate(1.15) contrast(1.05)}
.fw-top .fw-flower .shine{opacity:.32;left:0;top:0;width:100%}
.fw-top .fw-flower .echo{left:0;top:0;width:100%}
.fw-top .fw-flower .e1{opacity:.3}.fw-top .fw-flower .e2{opacity:.22}.fw-top .fw-flower .e3{opacity:.2}
.fw-top .fw-flower::before{opacity:.75}
.fw-top .fw-works{position:relative;z-index:2;columns:3 210px;column-gap:40px}
.fw-top .fw-works li a{color:color-mix(in srgb,var(--fg) 72%,transparent)}
@media (max-width:760px){.fw-top{min-height:0;padding-block:40px}.fw-top .fw-flower{width:120%;top:38%}}
.fw-top .fw-flower{width:min(72%,700px);top:58%}
.fw-top .fw-flower .flower{opacity:.22;filter:saturate(1.25)}
.fw-top .fw-flower .shine{opacity:.18}
.fw-top .fw-flower .e1{opacity:.22;transform:translate(4%,-12%) scaleX(1.15) scaleY(1.4)}
.fw-top .fw-flower .e2{opacity:.14;transform:translate(10%,-20%) scaleX(1.4) scaleY(1.6)}
.fw-top .fw-flower .e3{opacity:.14;transform:translate(-8%,-14%) scaleX(1.2) scaleY(1.5) rotate(-8deg)}
.fw-top .fw-flower::before{opacity:.6}
.fw-top .fw-flower::after{opacity:.6}
/* flower lower, yellow and pink more diffuse */
.fw-top{min-height:min(84vh,780px)}
.fw-top .fw-flower{top:72%}
.fw-top .fw-flower::before{left:-40%;right:-40%;top:20%;bottom:-40%;filter:blur(70px);opacity:.7}
.fw-top .fw-flower::after{left:0;right:0;top:55%;height:60%;filter:blur(80px);opacity:.55}
.fw-top .fw-flower .e1{filter:blur(46px) saturate(1.2);opacity:.26;transform:translate(4%,-14%) scaleX(1.5) scaleY(1.6)}
.fw-top .fw-flower .e2{filter:blur(90px) saturate(1.3);opacity:.22;transform:translate(8%,-24%) scaleX(2) scaleY(1.9)}
.fw-top .fw-flower .e3{filter:blur(70px) saturate(1.2);opacity:.18;transform:translate(-10%,-16%) scaleX(1.8) scaleY(1.7) rotate(-8deg)}
.fw-top .fw-flower .echo{-webkit-mask-image:none;mask-image:none}

/* photo with leaves on the left, works list on the right (no glows) */
.fw-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:28px;align-items:start;min-height:0;padding-block:44px 56px}
.fw-top .fw-works{columns:2;column-gap:28px}
@media (max-width:760px){.fw-top{grid-template-columns:1fr;gap:24px;padding-top:28px}}

/* works list (filterable) */
.wl-head{padding-block:44px 8px}
.wl-tools{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;align-items:baseline}
.wl-search{font-size:.76rem;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.wl-search input{font:inherit;font-size:.8rem;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line);padding:2px 0;width:180px;outline:none}
.wl-search input:focus{border-bottom-color:var(--fg)}
.wl-filters{display:flex;flex-wrap:wrap;gap:4px 18px}
.wl-f{background:none;border:0;padding:0;font:inherit;font-size:.76rem;color:var(--muted);cursor:pointer;text-transform:lowercase}
.wl-f:hover{color:var(--fg)}
.wl-f[aria-pressed="true"]{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
.wl-list{padding-block:16px 72px}
.wl-item{padding-block:22px;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.wl-item:first-child{border-top:1px solid var(--line)}
.wl-credit{font-size:.76rem;font-style:italic;color:var(--muted);min-height:1.2em}
.wl-title{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:300;letter-spacing:-.01em;line-height:1.15;margin:4px 0 6px;text-transform:none}
.wl-title a{border:0}
.wl-title a:hover{color:var(--blue)}
.wl-format{font-size:.8rem}
.wl-cat{color:var(--muted)}
.wl-item:target .wl-title{background:color-mix(in srgb,#ffd23f 35%,transparent)}
.wl-empty{padding-block:24px;color:var(--muted);font-size:.85rem}
.wl-more{margin-top:28px;font-size:.78rem}
/* works list with thumbnails */
.wl-item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:center}
.wl-thumb{display:block;aspect-ratio:4/3;max-width:100%;overflow:hidden;border:0;position:relative;
  background:radial-gradient(circle at 30% 30%,var(--a),transparent 70%),radial-gradient(circle at 75% 80%,var(--b),transparent 70%),var(--card)}
.wl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.wl-item:hover .wl-thumb img{transform:scale(1.04)}
@media (max-width:640px){.wl-item{grid-template-columns:110px minmax(0,1fr);gap:16px}.wl-title{font-size:1.2rem}}
.fw-cat,.ix-name{font-weight:600}
.fw-cat,.ix-name{color:#6b4fb0}
/* lilac labels, bold, with a luminous yellow edge */
.fw-cat,.ix-name{color:var(--blue)}
.site-head .role-small,.role{font-weight:600}
.site-head .role-small,.fw-cat,.ix-name{text-shadow:0 0 1px #ffd23f,0 0 5px rgba(255,210,63,.85),0 0 12px rgba(255,200,40,.5)}
/* neon tube effect on lilac labels */
.site-head .role-small,.fw-cat,.ix-name{color:#f6efff;
  text-shadow:0 0 1px #fff,0 0 3px #e2d4ff,0 0 6px #b99cff,0 0 12px #9b74ff,0 0 22px #8a5cff,0 0 34px rgba(138,92,255,.55)}
/* dark night ground so the neon reads */
:root{--bg:#15121d;--fg:#ece8f3;--muted:#9c95ab;--line:#2c2738;--card:#1f1a29;color-scheme:dark}
body{background:var(--bg);color:var(--fg)}
.wl-search input{color:var(--fg)}
/* medium dusk ground: lighter than night, still lets neon glow */
:root{--bg:#4a4555;--fg:#f3f0f6;--muted:#cfc8d8;--line:#625c6e;--card:#55505f}
/* orange neon */
.site-head .role-small,.fw-cat,.ix-name{color:#fff4ea;
  text-shadow:0 0 1px #fff,0 0 3px #ffd9b8,0 0 6px #ffab6b,0 0 12px #ff8a3d,0 0 22px #ff6f1a,0 0 34px rgba(255,111,26,.55)}
/* back to the light grey ground; neon adapted for light background (orange) */
:root{--bg:#eaeef1;--fg:#141414;--muted:#626a70;--line:#d3dade;--card:#dfe5e9;color-scheme:light}
.site-head .role-small,.fw-cat,.ix-name{color:#f0661a;
  text-shadow:0 0 1px rgba(255,190,140,.9),0 0 5px rgba(255,138,61,.75),0 0 12px rgba(255,111,26,.45),0 0 22px rgba(255,111,26,.25)}
/* role line under the name; orange text with a luminous yellow edge */
.head-line{flex-direction:column;align-items:flex-start;gap:6px}
.site-head .role-small,.fw-cat,.ix-name{color:#f0661a;
  text-shadow:0 0 1px #ffe27a,0 0 4px rgba(255,214,60,.95),0 0 9px rgba(255,200,40,.7),0 0 16px rgba(255,190,30,.4)}
/* violet text with a luminous yellow edge */
.site-head .role-small,.fw-cat,.ix-name{color:#7a55c9;
  text-shadow:0 0 1px #ffe27a,0 0 4px rgba(255,214,60,.95),0 0 9px rgba(255,200,40,.7),0 0 16px rgba(255,190,30,.4)}
/* neon tube: white-hot core, violet tube, yellow halo; flickers on as the page opens */
.site-head .role-small,.fw-cat,.ix-name{color:#fdf8ff;-webkit-text-stroke:.5px #8f4dff;
  text-shadow:0 0 1px #fff,0 0 3px #c9a6ff,0 0 6px #a066ff,0 0 11px #8a3dff,0 0 20px #7a2cff,0 0 32px rgba(255,205,50,.55),0 0 46px rgba(255,190,30,.35);
  animation:neon-on 1.6s steps(1,end) .3s both}
@keyframes neon-on{0%{opacity:.25}8%{opacity:1}12%{opacity:.3}18%{opacity:1}24%{opacity:.45}30%,100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.site-head .role-small,.fw-cat,.ix-name{animation:none}}
/* small dark plates behind the neon, like little signs */
.site-head .role-small{display:inline-block;background:#1a1424;padding:6px 12px;border-radius:3px}
.fw-cat,.ix-name{display:inline-block;background:#1a1424;padding:3px 8px;border-radius:2px}
/* neon directly on the light ground (no plates), larger name and role */
.site-head .role-small,.fw-cat,.ix-name{display:inline;background:none;padding:0;border-radius:0}
.site-head .logo{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.07em;line-height:1.1}
.site-head .role-small{font-size:clamp(1rem,1.6vw,1.3rem);-webkit-text-stroke:.7px #8f4dff;letter-spacing:.01em}
.head-line{gap:10px;padding-bottom:16px}

/* links: on hover / tap they slide right and turn italic */
.fw-works li a,.nav-grid a,.wl-title a,.cat-index a,.fw-cal a,.links a{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1),font-style .2s}
.fw-works li a:hover,.fw-works li a:focus-visible,.fw-works li a:active,
.nav-grid a:hover,.nav-grid a:focus-visible,.nav-grid a:active,
.wl-title a:hover,.wl-title a:focus-visible,.wl-title a:active,
.fw-cal a:hover,.fw-cal a:active,.links a:hover,.links a:active{transform:translateX(10px);font-style:italic}
@media (prefers-reduced-motion:reduce){.fw-works li a,.nav-grid a,.wl-title a{transition:none}}

/* role line: pink neon script under the name, like a sign; off until hovered or clicked */
.site-head .role-small{font-family:'Yellowtail',cursive;font-weight:400;text-transform:none;letter-spacing:.01em;
  font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;cursor:pointer;user-select:none;
  color:#f4e9f0;-webkit-text-stroke:1px #c98fb1;text-shadow:none;animation:none;transition:color .2s}
.site-head .role-small span+span::before{color:inherit}
/* category titles: unlit tube until hovered / focused */
.fw-cat,.ix-name{color:#efe8f7;-webkit-text-stroke:.6px #a68ad8;text-shadow:none;animation:none}
/* lit */
.site-head .role-small:hover,.site-head .role-small.lit{color:#fff6fb;-webkit-text-stroke:1px #ff2d9a;
  text-shadow:0 0 1px #fff,0 0 3px #ffb3dc,0 0 7px #ff4fb0,0 0 13px #ff1f97,0 0 24px #ff1493,0 0 40px rgba(255,20,147,.55);
  animation:neon-on .9s steps(1,end) both}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover,.ix-name.lit{color:#fdf8ff;-webkit-text-stroke:.5px #8f4dff;
  text-shadow:0 0 1px #fff,0 0 3px #c9a6ff,0 0 6px #a066ff,0 0 11px #8a3dff,0 0 20px #7a2cff,0 0 32px rgba(255,205,50,.55),0 0 46px rgba(255,190,30,.35);
  animation:neon-on .9s steps(1,end) both}
@media (prefers-reduced-motion:reduce){.site-head .role-small.lit,.site-head .role-small:hover,.fw-cat:hover{animation:none}}

/* role line back to the site font, violet neon tube (poster-style glow), still off until clicked */
.site-head .role-small{font-family:inherit;font-weight:600;font-size:clamp(1rem,1.6vw,1.3rem);letter-spacing:.01em;line-height:1.3;
  color:#efe8f7;-webkit-text-stroke:.7px #a68ad8}
.site-head .role-small:hover,.site-head .role-small.lit{color:#fdf8ff;-webkit-text-stroke:.7px #8f4dff;
  text-shadow:0 0 1px #fff,0 0 2px #fff,0 0 4px #d3b5ff,0 0 8px #a066ff,0 0 14px #8a3dff,0 0 24px #7a2cff,0 0 40px #6a1fff,0 0 60px rgba(255,205,50,.45)}

/* moving line shape in place of the flower */
.fw-lines{aspect-ratio:4/3;position:relative}
.fw-lines canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* lines spill out of the left column, behind the works list */
.fw-lines canvas{display:none}
.fw-top>.fw-canvas{position:absolute;z-index:0;left:0;top:-60px;width:100%;height:calc(100% + 120px);pointer-events:none}
.fw-top>.fw-photo{position:relative;z-index:1}
.fw-works li a{text-shadow:0 0 6px var(--bg),0 0 3px var(--bg)}
.fw-top>.fw-canvas{left:calc((100% - 100vw)/2);width:100vw;top:-40px;height:calc(100% + 80px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
body{overflow-x:hidden}
.fw-top>.fw-canvas{top:-70px;height:calc(100% + 160px)}
.site-head{position:relative;z-index:3}

/* category titles: same orange→pink neon as the moving figure, with a dot before */
.fw-cat,.ix-name{color:#ff7a3a;-webkit-text-stroke:0;
  background:linear-gradient(90deg,#ff7814,#f03c8c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 1px rgba(255,110,60,.6)) drop-shadow(0 0 4px rgba(255,90,90,.45));text-shadow:none;animation:none}
.fw-cat::before,.ix-name::before{content:"•";margin-right:.55em;-webkit-text-fill-color:#ff7814}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{-webkit-text-stroke:0;text-shadow:none;
  filter:drop-shadow(0 0 1px rgba(255,140,60,.9)) drop-shadow(0 0 6px rgba(255,80,120,.8)) drop-shadow(0 0 14px rgba(255,120,40,.5));animation:neon-on .9s steps(1,end) both}
/* category titles a little larger; neon edge yellow + pink */
.fw-cat{font-size:.72rem;letter-spacing:.11em;margin-bottom:4px}
.ix-name{font-size:.8rem}
.fw-cat,.ix-name{filter:drop-shadow(0 0 .6px #ffd21f) drop-shadow(0 0 1.2px #ffd21f) drop-shadow(0 0 5px rgba(255,60,150,.6))}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{filter:drop-shadow(0 0 .8px #ffe14a) drop-shadow(0 0 2px #ffd21f) drop-shadow(0 0 8px rgba(255,60,150,.85)) drop-shadow(0 0 16px rgba(255,80,170,.5))}
.fw-cat,.ix-name{-webkit-text-stroke:.55px #ffcf1a}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{-webkit-text-stroke:.6px #ffe04a}

/* category titles: neon tube like the role line (white core, coloured tube and glow), in the figure's orange→pink */
.fw-cat,.ix-name{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;filter:none;
  color:#fff7f0;-webkit-text-stroke:.6px #ff5a2a;
  text-shadow:0 0 1px #fff,0 0 3px #ffb48a,0 0 6px #ff7a2a,0 0 11px #ff4f7a,0 0 20px #f03c8c,0 0 32px rgba(240,60,140,.45)}
.fw-cat::before,.ix-name::before{-webkit-text-fill-color:#ff5a2a}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{filter:none;-webkit-text-stroke:.6px #ff4a1a;
  text-shadow:0 0 1px #fff,0 0 3px #ffc8a0,0 0 7px #ff8a3a,0 0 14px #ff4f7a,0 0 26px #f03c8c,0 0 44px rgba(240,60,140,.6)}
/* work names stay readable where the figure passes behind them */
.fw-works li a{text-shadow:0 0 4px var(--bg),0 0 8px var(--bg),0 0 2px var(--bg)}
.fw-cat,.ix-name{-webkit-text-stroke:.75px #ff4f1f;text-shadow:0 0 1px #fff,0 0 3px #ffb48a,0 0 6px #ff7a2a,0 0 12px rgba(255,79,122,.8),0 0 20px rgba(240,60,140,.45)}
/* lines may pass over the work names: no halo hiding them */
.fw-works li a{text-shadow:none}
/* the figure stays fully visible when it reaches the menu at the top */
.fw-top>.fw-canvas{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);top:-200px;height:calc(100% + 290px)}
.site-head{position:static}

/* all ordinary text black */
:root{--fg:#000;--muted:#000}
body{color:#000}

/* neon labels: a coloured tube with a white line running inside the letters (like the moving figure) */
.fw-cat,.ix-name,.site-head .role-small.lit,.site-head .role-small:hover{paint-order:stroke fill;-webkit-text-fill-color:#fff;color:#fff}
.fw-cat,.ix-name{-webkit-text-stroke:3px #ff5a2a;
  text-shadow:0 0 4px rgba(255,90,60,.9),0 0 10px rgba(255,79,122,.7),0 0 20px rgba(240,60,140,.45)}
.fw-cat::before,.ix-name::before{-webkit-text-fill-color:#ff5a2a;-webkit-text-stroke:0}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{-webkit-text-stroke:3.4px #ff4a1a;
  text-shadow:0 0 5px rgba(255,110,60,1),0 0 14px rgba(255,79,122,.85),0 0 30px rgba(240,60,140,.6)}
.site-head .role-small.lit,.site-head .role-small:hover{-webkit-text-stroke:3.4px #8f4dff;
  text-shadow:0 0 5px rgba(160,102,255,.95),0 0 12px rgba(138,61,255,.75),0 0 26px rgba(122,44,255,.5)}
.fw-cat,.ix-name{-webkit-text-stroke:2.2px #ff5a2a}
.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{-webkit-text-stroke:2.5px #ff4a1a}
.fw-works li a,.nav-grid a{font-weight:400}

/* role line: black tube with a white line inside, always; a soft glow when clicked */
.site-head .role-small,.site-head .role-small.lit,.site-head .role-small:hover{paint-order:stroke fill;color:#fff;-webkit-text-fill-color:#fff;
  -webkit-text-stroke:3px #111;text-shadow:none;animation:none}
.site-head .role-small.lit,.site-head .role-small:hover{text-shadow:0 0 6px rgba(0,0,0,.35),0 0 14px rgba(0,0,0,.2)}
/* role line: silver tube, thinner */
.site-head .role-small,.site-head .role-small.lit,.site-head .role-small:hover{font-weight:500;font-size:clamp(.95rem,1.45vw,1.2rem);
  -webkit-text-stroke:1.6px #8e979f;text-shadow:0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(80,90,100,.25)}
.site-head .role-small.lit,.site-head .role-small:hover{-webkit-text-stroke:1.6px #7d868e;text-shadow:0 0 2px #fff,0 0 6px rgba(190,200,210,.9),0 0 14px rgba(160,172,184,.6)}
.site-head .role-small{-webkit-text-stroke:1.6px #79828a}

/* cobalt blue for the role line and the category titles; plain colour, soft glow on hover / click */
.site-head .role-small,.site-head .role-small.lit,.site-head .role-small:hover,
.fw-cat,.ix-name,.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{
  paint-order:normal;-webkit-text-stroke:0;color:#1f47a8;-webkit-text-fill-color:#1f47a8;font-weight:600;text-shadow:none;filter:none;animation:none}
.fw-cat::before,.ix-name::before{-webkit-text-fill-color:#1f47a8;color:#1f47a8}
.site-head .role-small.lit,.site-head .role-small:hover,.fw-cat:hover,.fw-cat:focus-visible,.ix-name:hover{text-shadow:0 0 6px rgba(31,71,168,.35),0 0 14px rgba(31,71,168,.2)}
/* name larger */
.site-head .logo{font-size:clamp(1.8rem,3.6vw,2.9rem);letter-spacing:.06em}

/* role line in capitals; golden asterisk-stars between the three words, flickering like neon */
.site-head .role-small{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.9rem,1.4vw,1.15rem)}
.site-head .role-small span+span::before{content:"✻";display:inline-block;margin:0 .7em;font-weight:400;font-size:.95em;
  color:#e0ab00;-webkit-text-fill-color:#e0ab00;text-shadow:0 0 3px rgba(255,205,50,.95),0 0 8px rgba(255,190,30,.7),0 0 16px rgba(255,180,20,.4);
  animation:star-flick 5s infinite steps(1,end)}
.site-head .role-small span:nth-child(3)::before{animation-delay:-2.3s;animation-duration:6.2s}
@keyframes star-flick{0%,100%{opacity:1}4%{opacity:.25}6%{opacity:1}8%{opacity:.4}10%{opacity:1}52%{opacity:1}54%{opacity:.3}56%{opacity:1}}
@media (prefers-reduced-motion:reduce){.site-head .role-small span+span::before{animation:none}}

/* everything black: role line and category titles too; golden 8-ray asterisks, small and light */
.site-head .role-small,.site-head .role-small.lit,.site-head .role-small:hover,
.fw-cat,.ix-name,.fw-cat:hover,.fw-cat:focus-visible,.fw-cat:active,.ix-name:hover{color:#000;-webkit-text-fill-color:#000;text-shadow:none}
.fw-cat::before,.ix-name::before{color:#000;-webkit-text-fill-color:#000}
.site-head .role-small span+span::before{content:"✳";font-weight:300;font-size:.7em;vertical-align:.12em;margin:0 .75em;
  color:#e3b21a;-webkit-text-fill-color:#e3b21a;text-shadow:0 0 2px rgba(255,210,70,.8),0 0 6px rgba(255,200,40,.45)}

/* warm ivory page */
:root{--bg:#f4f2ee;--line:#dedad3;--card:#ebe8e2}
body{background:#f4f2ee}
/* category titles: same golden 8-ray asterisk as the role line, flickering */
.fw-cat::before,.ix-name::before{content:"✳";display:inline-block;font-weight:300;font-size:.95em;vertical-align:.04em;margin-right:.6em;
  color:#e3b21a;-webkit-text-fill-color:#e3b21a;text-shadow:0 0 2px rgba(255,210,70,.8),0 0 6px rgba(255,200,40,.45);animation:star-flick 5.6s infinite steps(1,end)}
.fw-group:nth-child(2n) .fw-cat::before{animation-delay:-1.7s;animation-duration:6.4s}
.fw-group:nth-child(3n) .fw-cat::before{animation-delay:-3.1s}
@media (prefers-reduced-motion:reduce){.fw-cat::before,.ix-name::before{animation:none}}

/* separators: cherry-red ringed dot with a soft glow, still flickering */
.site-head .role-small span+span::before,.fw-cat::before,.ix-name::before{content:"◉";font-weight:400;font-size:.55em;color:#a3122a;-webkit-text-fill-color:#a3122a;
  text-shadow:0 0 3px rgba(255,60,80,.7),0 0 8px rgba(255,40,70,.45)}
.site-head .role-small span+span::before{vertical-align:.24em;margin:0 .9rem}
.fw-cat::before,.ix-name::before{font-size:.75em;vertical-align:.1em;margin-right:.6em}
/* separators: cobalt blue, still (no flicker, no glow) */
.site-head .role-small span+span::before,.fw-cat::before,.ix-name::before{color:#1f47a8;-webkit-text-fill-color:#1f47a8;text-shadow:none;animation:none;opacity:1}
/* separators: solid petrol-blue dot, no inner ring */
.site-head .role-small span+span::before,.fw-cat::before,.ix-name::before{content:"●";color:#0f4c5c;-webkit-text-fill-color:#0f4c5c}
.site-head .role-small span+span::before{font-size:.45em;vertical-align:.3em}
.fw-cat::before,.ix-name::before{font-size:.6em;vertical-align:.15em}

/* divider under the role line: thin cherry neon */
.head-line{border-bottom:0;position:relative}
.head-line::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#ff3b55;box-shadow:0 0 3px rgba(255,40,70,.85),0 0 7px rgba(255,40,70,.4)}
/* divider as a neon tube like the figure: white core, cherry tube and glow */
.head-line::after{height:1px;background:#fff3f5;box-shadow:0 0 0 .8px #ff3b55,0 0 4px 1px rgba(255,40,70,.75),0 0 9px rgba(255,40,70,.4)}
.head-line::after{height:.6px;border-radius:2px;box-shadow:0 0 0 .5px #ff3b55,0 0 3px .5px rgba(255,40,70,.7),0 0 7px rgba(255,40,70,.35)}
/* divider: same tone as the moving figure when it is red — a small neon tube with clearly rounded ends */
.head-line::after{height:4px;bottom:-2px;border-radius:4px;background:#ffeef1;
  box-shadow:inset 0 0 0 1.1px #e1203f,0 0 4px rgba(235,40,75,.55),0 0 10px rgba(235,40,75,.28)}
.head-line::after{height:2.5px;bottom:-1px;border-radius:3px;box-shadow:inset 0 0 0 .8px #e1203f,0 0 3px rgba(235,40,75,.55),0 0 8px rgba(235,40,75,.25)}
.nav-grid{font-size:.88rem;padding-top:14px;row-gap:4px;letter-spacing:.02em}

/* layout D: menu in one row at the right end of the neon line; role line tighter so it ends before the menu starts */
.nav-grid{display:flex!important;column-gap:2.2em!important;justify-content:flex-end;width:100%}
@media (max-width:700px){.nav-grid{flex-wrap:wrap;justify-content:flex-start;column-gap:1.6em!important;row-gap:.4em}}
.site-head .role-small{letter-spacing:.015em;word-spacing:-.02em}
/* works list further to the right */
@media (min-width:900px){.fw-top{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
/* contact: the email alone, on one line */
.contact{display:block}
.contact .big{white-space:nowrap;overflow-wrap:normal;font-size:clamp(1rem,4.2vw,2.6rem)}
.contact .big{font-size:min(clamp(1.6rem,3.2vw,2.4rem),6.2vw);font-weight:300;letter-spacing:-.03em;line-height:1}
.about .portrait{aspect-ratio:auto}.about .portrait img{width:100%;height:auto;display:block}

/* single work page */
.wp{padding-block:28px 64px}
.wp-back{font-size:.8rem;margin:0 0 26px}.wp-back a{color:#000;border:0}
.wp-head h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:300;letter-spacing:-.02em;line-height:1.05;margin:.2em 0 .3em}
.wp-kind{font-size:.85rem;margin:0 0 30px;text-transform:lowercase}
.wp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:44px;align-items:start}
.wp-note{font-size:1.05rem;line-height:1.55;margin:0 0 24px;max-width:46ch}
.wp-text .fw-h{margin-top:30px}
.wp-gallery{display:grid;gap:18px}
.wp-gallery figure{margin:0}.wp-gallery img{width:100%;height:auto;display:block}
.wp-gallery figcaption{font-size:.75rem;margin-top:6px}
@media (max-width:800px){.wp-body{grid-template-columns:1fr}.wp-gallery{order:-1}}
.ev-pics{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}.ev-pics img{height:150px;width:auto;display:block}
.at-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;margin-top:40px}
.at-work figure{margin:0}.at-work img{width:100%;height:auto;display:block}

/* phone: no empty block between the menu and the works list; the figure sits behind the top of the list */
@media (max-width:899px){
  .fw-top>.fw-photo.fw-lines{display:none}
  .fw-top{padding-top:22px!important;min-height:0}
}

/* work pages: every text the same size (only the title stays big) */
.wp p,.wp .wp-back,.wp .wp-back a,.wp .wl-credit,.wp .wp-kind,.wp .wp-note,.wp .prose p,.wp .ev,.wp .ev time,.wp .ev div,.wp h2.fw-h,.wp figcaption,.wp .wp-gallery *{font-size:1rem!important;line-height:1.6!important}
.wp h2.fw-h{letter-spacing:.02em}