/* Home page: hero with stickers, tools belt, project cards, experience tabs. Shared parts live in play.css. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul{margin:0}ol,ul{padding:0;list-style:none}
[data-lang="el"] .en,[data-lang="en"] .el{display:none!important}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---------- hero: name that reacts + stickers you can throw ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;padding:110px var(--g) 90px;
  background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.6px) 0 0/26px 26px,var(--bg)}
.stage{position:relative;z-index:2;text-align:center;display:grid;justify-items:center;gap:1.6rem;pointer-events:none}
.stage a,.stage .name{pointer-events:auto}
.name{position:relative;font-family:Commissioner,var(--sans);font-weight:650;font-size:clamp(2.5rem,.7rem + 6.6vw,7.4rem);line-height:.98;letter-spacing:-.035em;padding-bottom:.08em;display:grid;cursor:default;user-select:none}
.name .w{display:block;white-space:nowrap}
.name .w + .w{color:var(--deep)}
.name .l{display:inline-block;font-variation-settings:"FLAR" 100,"VOLM" 100,"wght" var(--w,650);translate:0 var(--y,0px);transition:font-variation-settings .35s var(--eo),translate .35s var(--eo)}
.js .name .l{opacity:0;animation:l-in .9s var(--spring) forwards;animation-delay:calc(var(--i) * 40ms + 200ms)}
@keyframes l-in{from{opacity:0;translate:0 .4em;scale:.6}to{opacity:1;translate:0 0;scale:1}}
.js .name.done .l{animation:none;opacity:1}
.js .name.done .l.hop{animation:hop .7s var(--spring)}
@keyframes hop{30%{translate:0 -.32em;rotate:-14deg}60%{translate:0 .04em;rotate:6deg}}
.name .l{cursor:pointer}
.js .name.done.wave .l{animation:wave 1.6s var(--eo) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes wave{0%,100%{font-variation-settings:"FLAR" 100,"VOLM" 100,"wght" 650}40%{font-variation-settings:"FLAR" 100,"VOLM" 100,"wght" 850;translate:0 -.06em}}
/* what I do: one sentence, each skill gets its own marker stroke, drawn in one after another */
.hl{max-width:680px;font:600 clamp(1rem,.85rem + .6vw,1.35rem)/1.65 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance;pointer-events:auto}
.hl mark{color:#1b1e45;padding:0 .2em;border-radius:.3em;background:linear-gradient(var(--tint),var(--tint)) 0 85%/0 100% no-repeat;transition:background-size .8s var(--eo);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl .nw{white-space:nowrap}
.hl.in mark{background-size:100% 100%;transition-delay:calc(var(--i) * 260ms + 200ms)}
:root:not(.js) .hl mark{background-size:100% 100%}
@media (hover:hover) and (pointer:fine){.hl.in mark{display:inline-block;transition:background-size .8s var(--eo),rotate .35s var(--spring)}.hl.in mark:hover{rotate:-3deg}}
@keyframes pop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.js .acts{opacity:0;animation:pop .6s var(--spring) 1.3s forwards}

.stickers{position:absolute;inset:0;z-index:3;pointer-events:none}
.stk{position:absolute;left:0;top:0;width:var(--sw,210px);transition:width .45s var(--eo),box-shadow .3s;pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  padding:7px;border-radius:16px;background:var(--stk-border);box-shadow:0 1px 0 rgba(0,0,0,.04),0 14px 26px -12px rgba(27,30,69,.45);will-change:transform;opacity:0;text-decoration:none}
.stk.ready{opacity:1}
.stk img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;pointer-events:none;background:var(--t)}
/* die-cut shapes: the photo is cut to a shape and a white outline follows it, like a real sticker */
.stk[data-shape]{padding:0;border-radius:0;background:none;box-shadow:none;
  filter:drop-shadow(5px 0 0 var(--stk-border)) drop-shadow(-5px 0 0 var(--stk-border)) drop-shadow(0 5px 0 var(--stk-border)) drop-shadow(0 -5px 0 var(--stk-border)) drop-shadow(0 16px 14px rgba(27,30,69,.32))}
.stk[data-shape].grab{box-shadow:none}
.stk[data-shape]:not(.sh-vinyl) img{border-radius:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.sh-heart img{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92' preserveAspectRatio='none'%3E%3Cpath d='M50 91C21 71 0 53 0 28 0 12 12 0 27 0c11 0 19 6 23 15C54 6 62 0 73 0c15 0 27 12 27 28 0 25-21 43-50 63z'/%3E%3C/svg%3E");aspect-ratio:100/92}
.sh-cloud img{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92' preserveAspectRatio='none'%3E%3Ccircle cx='28' cy='34' r='22'/%3E%3Ccircle cx='50' cy='24' r='24'/%3E%3Ccircle cx='73' cy='33' r='22'/%3E%3Ccircle cx='80' cy='52' r='16'/%3E%3Ccircle cx='62' cy='58' r='20'/%3E%3Ccircle cx='38' cy='58' r='20'/%3E%3Ccircle cx='20' cy='52' r='16'/%3E%3Ccircle cx='50' cy='42' r='24'/%3E%3Ccircle cx='14' cy='80' r='7'/%3E%3Ccircle cx='5' cy='89' r='3.5'/%3E%3C/svg%3E");aspect-ratio:100/92}
.sh-badge img{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='41'/%3E%3Ccircle cx='90.00' cy='50.00' r='10.5'/%3E%3Ccircle cx='86.04' cy='67.36' r='10.5'/%3E%3Ccircle cx='74.94' cy='81.27' r='10.5'/%3E%3Ccircle cx='58.90' cy='89.00' r='10.5'/%3E%3Ccircle cx='41.10' cy='89.00' r='10.5'/%3E%3Ccircle cx='25.06' cy='81.27' r='10.5'/%3E%3Ccircle cx='13.96' cy='67.36' r='10.5'/%3E%3Ccircle cx='10.00' cy='50.00' r='10.5'/%3E%3Ccircle cx='13.96' cy='32.64' r='10.5'/%3E%3Ccircle cx='25.06' cy='18.73' r='10.5'/%3E%3Ccircle cx='41.10' cy='11.00' r='10.5'/%3E%3Ccircle cx='58.90' cy='11.00' r='10.5'/%3E%3Ccircle cx='74.94' cy='18.73' r='10.5'/%3E%3Ccircle cx='86.04' cy='32.64' r='10.5'/%3E%3C/svg%3E");aspect-ratio:1}
.sh-para img{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='16,0 100,0 84,100 0,100'/%3E%3C/svg%3E");aspect-ratio:10/7}
/* the vinyl: a grooved black disc, the project as its centre label, a hole in the middle */
.sh-vinyl{aspect-ratio:1;border-radius:50%!important;background:radial-gradient(circle,transparent 0 30%,rgba(255,255,255,.07) 30.5% 31%,transparent 31.5%),repeating-radial-gradient(circle,#141418 0 2px,#23232a 2px 3.5px)!important;display:grid;place-items:center}
.sh-vinyl img{-webkit-mask:none;mask:none;width:46%;aspect-ratio:1;border-radius:50%}
.sh-vinyl::after{content:"";position:absolute;left:50%;top:50%;width:5%;aspect-ratio:1;border-radius:50%;background:var(--bg);translate:-50% -50%}
.sh-vinyl::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 35% 65%,rgba(255,255,255,.08));pointer-events:none}
.stk.grab{cursor:grabbing;box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 50px -18px rgba(27,30,69,.55)}
.stk-ph{width:var(--sw,170px);padding:0;background:none;box-shadow:none;filter:drop-shadow(0 0 0 var(--stk-border)) drop-shadow(5px 0 0 var(--stk-border)) drop-shadow(-5px 0 0 var(--stk-border)) drop-shadow(0 5px 0 var(--stk-border)) drop-shadow(0 -5px 0 var(--stk-border)) drop-shadow(0 18px 18px rgba(27,30,69,.3))}
.stk-ph img{aspect-ratio:auto;height:auto;border-radius:0;background:none}
.hero-ui{position:absolute;z-index:4;left:50%;bottom:22px;translate:-50% 0;display:flex;align-items:center;gap:.8rem;white-space:nowrap}
.hint{font:650 .82rem/1 var(--sans);color:var(--muted)}
.hint .star{color:var(--accent);display:inline-block;animation:tw 2.4s linear infinite}
@keyframes tw{to{rotate:360deg}}
.shuffle{border:0;cursor:pointer;font:750 .82rem/1 var(--sans);padding:.65rem .95rem;border-radius:999px;background:var(--ink);color:var(--bg);transition:transform .25s var(--spring)}
.shuffle .ic{display:inline-block;transition:rotate .5s var(--spring)}
.shuffle:hover .ic{rotate:180deg}.shuffle:active{transform:scale(.94)}

/* ---------- tools: a soft rounded track, the label is a coral pill ---------- */
.strip{position:relative;z-index:5;display:flex;align-items:center;gap:.5rem;max-width:1320px;margin:clamp(36px,5vw,64px) auto 0;margin-inline:max(var(--g),calc((100% - 1320px) / 2));
  padding:8px;border-radius:999px;background:color-mix(in srgb,var(--peri) 30%,var(--bg));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--peri) 55%,transparent)}
.strip-l{flex:none;display:flex;align-items:center;gap:.45rem;padding:.8rem 1.15rem;border-radius:999px;background:var(--accent);color:var(--on-accent);font:800 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;rotate:-2deg;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
.strip-win{flex:1;min-width:0;overflow:hidden;padding:4px 0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-mask:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.strip-win.grab{cursor:grabbing}
.strip-track{display:flex;width:max-content;animation:belt 38s linear infinite}
.js .strip-track{animation:none}
.strip ul{display:flex;gap:.45rem;padding-right:.45rem}
.strip li{display:flex;align-items:center;gap:.5rem;padding:.6rem .95rem;border-radius:999px;background:var(--card);color:var(--ink);font:650 .9rem/1 var(--sans);white-space:nowrap;box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent);transition:scale .3s var(--spring),rotate .3s var(--spring)}
@media (hover:hover) and (pointer:fine){.strip li:hover{scale:1.08;rotate:-3deg}}
.strip svg{width:18px;height:18px;fill:currentColor;color:var(--brand,var(--ink))}
@keyframes belt{to{translate:-50% 0}}
@media (max-width:640px){.strip{padding:6px}.strip-l{padding:.7rem .85rem;font-size:.66rem}.strip li{font-size:.82rem;padding:.5rem .8rem}}

/* ---------- projects ---------- */
.work,.exp{padding:clamp(90px,12vw,150px) var(--g) clamp(40px,5vw,70px);max-width:1320px;margin:0 auto}
.exp{padding-top:clamp(30px,4vw,50px);padding-bottom:clamp(40px,5vw,60px)}
.h2{position:relative;display:inline-block;font:900 clamp(3rem,1.6rem + 5vw,6.4rem)/.9 var(--sans);letter-spacing:-.045em;margin-bottom:clamp(36px,5vw,64px)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:26px;background:var(--t);color:#1b1e45;padding:12px;transform-style:preserve-3d;
  rotate:var(--rot,0deg);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--eo),rotate .5s var(--spring),box-shadow .4s var(--eo);box-shadow:0 18px 40px -26px rgba(27,30,69,.5)}
.card:nth-child(3n+1){--rot:-1.6deg}.card:nth-child(3n+2){--rot:1.2deg}.card:nth-child(3n){--rot:-.6deg}
.card-img{display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.4)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:scale .7s var(--eo)}
.card-n{position:absolute;top:-14px;right:18px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font:850 .95rem/1 var(--sans);rotate:10deg;box-shadow:0 8px 16px -8px rgba(0,0,0,.45);transform:translateZ(30px)}
.card-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:1.1rem .7rem .7rem}
.card-c{display:flex;align-items:center;gap:.45rem;font:750 .74rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.card-c .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.card-t{font:850 clamp(1.25rem,1rem + .6vw,1.55rem)/1.12 var(--sans);letter-spacing:-.02em}
.card-d{font:450 .92rem/1.5 var(--sans);opacity:.8;margin-bottom:.9rem}
.card-go{margin-top:auto;display:inline-flex;gap:.4rem;align-items:center;font:750 .82rem/1 var(--sans);padding:.65rem .95rem;border-radius:999px;background:#1b1e45;color:#fff}
.card-go i{font-style:normal;transition:translate .3s var(--spring)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),transparent 45%);mix-blend-mode:soft-light}
@media (hover:hover) and (pointer:fine){
  .card:hover{rotate:0deg;box-shadow:0 34px 60px -30px rgba(27,30,69,.6)}
  .card:hover .glare{opacity:1}.card:hover .card-img img{scale:1.05}.card:hover .card-go i{translate:4px 0}
}
.card:active{scale:.98}
.js .card{opacity:0;translate:0 40px;scale:.92}
.js .card.in{opacity:1;translate:0 0;scale:1;transition:opacity .5s var(--eo),translate .8s var(--spring),scale .8s var(--spring),transform .5s var(--eo),rotate .5s var(--spring),box-shadow .4s var(--eo);transition-delay:calc(var(--d,0) * 90ms)}
:root[data-theme="dark"] .card{filter:saturate(.85) brightness(.92)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card{filter:saturate(.85) brightness(.92)}}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){  /* phones: two small cards per row, only the image, title and button */
  .grid{gap:22px 12px}.card{padding:7px;border-radius:18px}.card-img{border-radius:12px}
  .card-n{width:32px;height:32px;top:-10px;right:10px;font-size:.72rem}
  .card-b{gap:.3rem;padding:.7rem .3rem .3rem}.card-c{font-size:.6rem;letter-spacing:.05em}.card-c .ico{display:none}
  .card-t{font-size:.98rem;line-height:1.15}.card-d{display:none}
  .card-go{margin-top:auto;padding:.5rem .7rem;font-size:.72rem}.card-t{margin-bottom:.6rem}
}

/* ---------- experience: a playful switcher ---------- */
.exp-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(30px,4vw,48px)}
.exp-h .h2{margin-bottom:0}
@media (max-width:640px){.exp-h{flex-wrap:nowrap;align-items:center;gap:.8rem}.exp-h .pbtn.sm{flex:none;padding:.5rem .8rem;font-size:.74rem}.cv-full{display:none}}
.pf-tb{position:relative;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.pf-tb input{position:absolute;opacity:0;pointer-events:none}
.pf-tb label{position:relative;z-index:1;cursor:pointer;font:750 1rem/1 var(--sans);padding:.95rem 1.25rem;border-radius:999px;transition:color .3s var(--eo)}
.pf-tb input:checked + label{color:var(--on-accent)}
.pf-tb input:focus-visible + label{outline:2.5px solid var(--accent);outline-offset:3px}
.pf-ind{position:absolute;z-index:0;left:0;top:0;height:0;width:0;border-radius:999px;background:var(--accent);transition:left .5s var(--spring),top .5s var(--spring),width .5s var(--spring),height .5s var(--spring)}
.pf-pane{flex:1 1 100%;display:none;margin-top:1.4rem}
#pf-about:checked~.pf-p-about,#pf-work:checked~.pf-p-work,#pf-study:checked~.pf-p-study,#pf-erasmus:checked~.pf-p-erasmus,#pf-skills:checked~.pf-p-skills{display:block;animation:pane .55s var(--spring)}
@keyframes pane{from{opacity:0;translate:0 16px;scale:.98}}
.pf-about{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pf-about p{background:var(--card);border-radius:24px;padding:1.6rem 1.5rem;font:450 1.02rem/1.65 var(--sans);box-shadow:0 0 0 1.5px var(--line);text-wrap:pretty}
.pf-about p:nth-child(1){background:#c9d0f7;color:#1b1e45}
.pf-about p:nth-child(2){background:#ffe3a3;color:#1b1e45}
.pf-about p:nth-child(3){background:#ffd9c7;color:#1b1e45}
.ab-t{display:block;font:850 1.15rem/1.2 var(--sans);letter-spacing:-.01em;margin-bottom:.7rem}
.pf-about p{transition:transform .4s var(--spring)}
@media (hover:hover) and (pointer:fine){.pf-about p:hover{transform:translateY(-4px) rotate(-.6deg)}}
.pf-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf-rows>li{background:var(--card);border-radius:24px;padding:1.4rem 1.5rem;box-shadow:0 0 0 1.5px var(--line);display:grid;gap:.4rem;align-content:start;transition:transform .35s var(--spring)}
@media (hover:hover) and (pointer:fine){.pf-rows>li:hover{transform:translateY(-4px) rotate(-.8deg)}}
.pf-w{justify-self:start;font:750 .78rem/1 var(--sans);padding:.5rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--peri) 55%,transparent)}
.pf-rows b{font:800 1.15rem/1.3 var(--sans);letter-spacing:-.01em}
.pf-rows i{font:500 .92rem/1.45 var(--sans);font-style:normal;color:var(--muted)}
.courses{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem!important}
.courses li{font:650 .78rem/1 var(--sans);padding:.45rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line)}
.pf-sk{display:grid;gap:14px}
.pf-sk>li{background:var(--card);border-radius:24px;padding:1.3rem 1.4rem;box-shadow:0 0 0 1.5px var(--line);display:grid;grid-template-columns:minmax(150px,.22fr) 1fr;gap:1rem;align-items:start}
.pf-sk b{font:850 1.1rem/1.25 var(--sans);padding-top:.35rem}
.sk-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.sk-chips span.chip{font:650 .88rem/1 var(--sans);padding:.6rem .85rem;border-radius:999px;background:var(--bg-2);transition:transform .3s var(--spring),background .2s}
@media (hover:hover) and (pointer:fine){.sk-chips span.chip:hover{transform:rotate(-4deg) scale(1.06);background:color-mix(in srgb,var(--peri) 60%,transparent)}}
@media (max-width:820px){.pf-about,.pf-rows{grid-template-columns:1fr}.pf-sk>li{grid-template-columns:1fr}.pf-tb label{padding:.8rem 1rem;font-size:.92rem}}

@media (max-width:820px){
  .hero{padding:96px 16px 64px}
  .stickers,.hero-ui{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* nickname: a small handwritten note after the first name, with an arrow that draws itself */
.aka{position:absolute;right:0;top:0;z-index:3;transform:translate(35%,-105%) rotate(6deg);pointer-events:none;
  font:400 clamp(1.1rem,.75rem + 1vw,1.65rem)/1 Mynerve,cursive;letter-spacing:0;color:var(--accent);white-space:nowrap}
.aka b{font-weight:400;font-size:1.2em;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.15em}
.ak-arrow{position:absolute;right:100%;top:.5em;width:1.5em;height:1.5em;margin-right:.1em;scale:-1 1;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.js .aka{opacity:0;animation:aka-in .8s var(--eo) 1.4s forwards}
.js .ak-arrow{animation:draw .7s var(--eo) 2s forwards}
:root:not(.js) .ak-arrow{stroke-dashoffset:0}
@keyframes aka-in{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:640px){.aka{font-size:1.05rem}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the dotted paper of the hero carries on under the tools bar */
.strip-zone{padding:clamp(36px,5vw,64px) 0 clamp(22px,3vw,34px);background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.6px) 0 var(--dy,0px)/26px 26px,var(--bg)}
.strip-zone .strip{margin-top:0}
.strip-zone + .work{padding-top:clamp(40px,5vw,72px)}
.work .h2{margin-bottom:clamp(52px,6.5vw,88px)}
/* sections apart, quietly: «Λίγα λόγια» sits on a soft full-width band between the projects and the contact */
.exp{margin-top:clamp(40px,6vw,80px);padding-top:clamp(64px,8vw,100px);padding-bottom:clamp(64px,8vw,100px);
  border-image:conic-gradient(var(--bg-2) 0 0) fill 0//0 100vmax}
.strip-zone{padding-bottom:0}
.strip-zone + .work{padding-top:clamp(64px,8vw,104px)}

/* phones: a few quiet hand-drawn doodles around the edges of the hero, in place of the stickers */
.doodles{display:none;position:absolute;inset:0;pointer-events:none;z-index:0}
.doodles svg{position:absolute;width:var(--s,24px);height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;rotate:var(--r,0deg)}
.doodles path{stroke-dasharray:1;stroke-dashoffset:1;animation:dd 1.4s var(--eo) forwards;animation-delay:var(--d,1.2s)}
@keyframes dd{to{stroke-dashoffset:0}}
@media (max-width:820px){.doodles.dm{display:block}}
@media (min-width:821px){.doodles.dd{display:block}.doodles.dd svg{opacity:.4}}