:root{
  --bg:#F4F7FB; --surface:#FFFFFF; --ink:#172536; --muted:#5A6A7E; --faint:#8795A8;
  --line:#DCE4EE; --accent:#0D5EAF; --accent-ink:#0A4C8F; --accent-soft:#E2EDF9;
  --glow:rgba(13,94,175,.16); --map-dot:rgba(13,94,175,.09);
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111A26; --surface:#172334; --ink:#E7EDF5; --muted:#A3B1C3; --faint:#7C8BA0;
    --line:#26364B; --accent:#5A9FE6; --accent-ink:#A9CDF2; --accent-soft:#12304F;
    --glow:rgba(90,159,230,.14); --map-dot:rgba(90,159,230,.09);
  }
}
:root[data-theme="dark"]{
  --bg:#111A26; --surface:#172334; --ink:#E7EDF5; --muted:#A3B1C3; --faint:#7C8BA0;
  --line:#26364B; --accent:#5A9FE6; --accent-ink:#A9CDF2; --accent-soft:#12304F;
  --glow:rgba(90,159,230,.14); --map-dot:rgba(90,159,230,.09);
}
/* Greek page: fonts that include Greek letters */
html[lang="el"]{
  --display:"Commissioner", "Segoe UI", system-ui, sans-serif;
  --body:"Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--muted); font-family:var(--body); font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:var(--accent-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
strong{color:var(--ink); font-weight:600}

.wrap{max-width:1180px; margin:0 auto; padding:0 1.5rem; display:grid; gap:4rem}
@media (min-width:1024px){.wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr); padding:0 3rem}}

/* Left column */
.side{padding:4rem 0 1rem}
@media (min-width:1024px){.side{position:sticky; align-self:start; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; padding:4.5rem 0 3rem; overflow-y:auto}}
.side-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem}
.side-tools{display:flex; align-items:center; gap:.5rem}
.theme{display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; transition:color .2s, border-color .2s, background .2s}
.theme:hover{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.theme svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme .sun, :root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
.lang{display:flex; border:1px solid var(--line); border-radius:99px; padding:3px; font-size:.8rem; font-weight:600}
.lang a{padding:.25rem .7rem; border-radius:99px; color:var(--faint); text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="page"]{background:var(--accent); color:var(--surface)}
.avatar{width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line)}
/* Profile photos: click to switch (add more <img class="avatar"> in the HTML to add photos) */
.avatar-wrap{display:flex; flex-direction:column; align-items:center; gap:.55rem}
.avatar-switch{position:relative; width:96px; height:96px; padding:0; border:0; background:none; border-radius:50%; cursor:pointer}
.avatar-switch .avatar{position:absolute; inset:0; opacity:0; transform:scale(.94); transition:opacity .5s ease, transform .5s ease}
.avatar-switch .avatar.is-on{opacity:1; transform:none}
.avatar-switch:hover .avatar.is-on{transform:scale(1.04)}
.avatar-switch:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.avatar-dots{display:flex; gap:5px}
.avatar-dots i{width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .3s, width .3s}
.avatar-dots i.on{width:14px; border-radius:3px; background:var(--accent)}
@media (prefers-reduced-motion: reduce){.avatar-switch .avatar{transition:none}}
h1{font-family:var(--display); font-weight:700; color:var(--ink); font-size:clamp(2.6rem,5vw,3.4rem); line-height:1.02; letter-spacing:-.02em; margin:1.5rem 0 .6rem}
.role{font-family:var(--display); font-weight:500; color:var(--accent-ink); font-size:1.2rem; line-height:1.35; margin:0 0 1rem}
.tagline{max-width:23rem; margin:0}
.nav{display:none; margin-top:2.25rem; margin-bottom:2rem}
@media (min-width:1024px){.nav{display:block}}
.nav ol{list-style:none; margin:0; padding:0}
.nav a{display:flex; align-items:center; gap:1rem; padding:.45rem 0; color:var(--faint); text-decoration:none; font-size:.9rem; font-weight:600}
.nav a::before{content:""; height:1px; width:2rem; background:currentColor; transition:width .2s ease, background .2s}
.nav a:hover, .nav a.active{color:var(--ink)}
.nav a:hover::before, .nav a.active::before{width:4rem; background:var(--accent)}
.side-foot{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; font-size:.95rem}
@media (min-width:1024px){.side-foot{margin-top:auto}}
.side-foot a{font-weight:600}
.side-foot span{color:var(--faint)}

/* Right column */
main{padding:0 0 4rem}
@media (min-width:1024px){main{padding:4.5rem 0 6rem}}
section{margin-bottom:6rem; scroll-margin-top:1.5rem}
h2{font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.05rem; margin:0 0 1.75rem; position:sticky; top:env(safe-area-inset-top,0px); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px); padding:1rem 0; z-index:2}
@media (min-width:1024px){h2{position:static; background:none; backdrop-filter:none; padding:0; color:var(--faint); font-size:.95rem; font-weight:500}}
h3{font-family:var(--display); font-weight:500; color:var(--faint); font-size:.95rem; margin:3rem 0 1rem}
p{margin:0 0 1rem; max-width:40rem}

/* Timeline entries */
.entry{display:grid; gap:.35rem 1.5rem; padding:1.25rem; margin:0 -1.25rem .5rem; border-radius:10px; transition:background .2s}
@media (min-width:640px){.entry{grid-template-columns:8.5rem 1fr}}
.entry:hover{background:var(--surface)}
.when{font-size:.8rem; font-weight:600; color:var(--faint); padding-top:.3rem; font-variant-numeric:tabular-nums}
.entry h4{margin:0 0 .15rem; font-family:var(--display); font-weight:500; font-size:1.1rem; line-height:1.3; color:var(--ink)}
.org{font-size:.95rem; color:var(--accent-ink); margin-bottom:.5rem}
.entry p{font-size:.975rem; margin:0 0 .5rem}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin:.6rem 0 0; padding:0}
.tags li{font-size:.78rem; font-weight:600; color:var(--accent-ink); background:var(--accent-soft); padding:.2rem .7rem; border-radius:99px}

/* Erasmus+ journey */
.journey-intro{font-size:1.15rem; color:var(--ink); max-width:36rem}
.counts{display:flex; flex-wrap:wrap; gap:.5rem 2rem; margin:1.25rem 0 2rem; padding:0; list-style:none}
.counts li{font-size:.95rem}
.counts b{font-family:var(--display); font-weight:700; color:var(--accent); font-size:1.6rem; margin-right:.35rem; vertical-align:-2px}
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.filters button, .map-views button{font:600 .85rem var(--body); color:var(--muted); background:transparent; border:1px solid var(--line); padding:.4rem .95rem; border-radius:99px; cursor:pointer}
.filters button[aria-pressed="true"], .map-views button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface)}

/* Erasmus+ globe */
.map-views{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.25rem 0 1rem}
.globe{position:relative; z-index:0; isolation:isolate; height:540px; border-radius:14px; overflow:hidden; font-family:var(--body);
  background:radial-gradient(ellipse at 50% 40%, #0B2A52 0%, #061530 55%, #030A18 100%);
  box-shadow:0 10px 30px rgba(7,15,31,.25)}
.globe::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:url("https://cdn.jsdelivr.net/npm/three-globe@2/example/img/night-sky.png") center/cover}
@media (max-width:639px){.globe{height:430px}}
.globe-canvas{position:absolute; inset:0}
.globe-canvas canvas{outline:none}
.globe .empty{position:relative; padding:1.5rem; color:#cfe0f5}
.globe-legend{position:absolute; top:.9rem; left:1rem; margin:0; padding:.45rem .75rem; list-style:none; display:flex; gap:.9rem;
  font-size:.75rem; font-weight:600; color:#dbe7f7; background:rgba(7,15,31,.6); border:1px solid rgba(90,159,230,.25); border-radius:99px; backdrop-filter:blur(6px); pointer-events:none}
.globe-legend i{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:0}
.globe-legend .gold{background:#FFC857; box-shadow:0 0 8px #FFC857}
.globe-legend .blue{background:#5A9FE6; box-shadow:0 0 8px #5A9FE6}
.globe-card{position:absolute; right:1rem; bottom:1rem; width:min(320px, calc(100% - 2rem)); background:rgba(255,255,255,.96); color:#172536;
  border-radius:12px; padding:14px 16px; box-shadow:0 12px 30px rgba(0,0,0,.35); animation:pop-in .25s ease-out}
.globe-card[hidden]{display:none}
@keyframes pop-in{from{opacity:0; transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion: reduce){.globe-card{animation:none}}
.globe-close{position:absolute; top:.35rem; right:.5rem; border:0; background:none; font-size:1.4rem; line-height:1; color:#5A6A7E; cursor:pointer; padding:.25rem .4rem; border-radius:6px}
.globe-close:hover{background:#E2EDF9; color:#172536}
.scene-tooltip{font:600 .8rem var(--body) !important; background:rgba(7,15,31,.85); color:#fff; padding:.35rem .6rem; border-radius:6px; border:1px solid rgba(90,159,230,.35)}
.map-hint{font-size:.88rem; color:var(--faint); margin-top:.75rem}
.pop h5{margin:0; padding-right:1.5rem; font:700 1.05rem var(--display)}
.pop p{margin:.1rem 0 .6rem; font-size:.8rem; color:#5A6A7E}
.pop ol{list-style:none; margin:0; padding:0; max-height:210px; overflow-y:auto}
.pop li{display:flex; gap:.6rem; padding:.45rem 0; border-top:1px solid #DCE4EE; font-size:.85rem; line-height:1.35}
.pop-year{font-weight:600; color:#8795A8; font-variant-numeric:tabular-nums}
.pop b{font-weight:600; margin-right:.35rem}
.pop small{display:block; color:#5A6A7E; margin-top:.1rem}
.pop .badge{display:inline-block; font-size:.66rem; padding:0 .45rem; color:#0A4C8F; border-color:#0D5EAF}
.year{display:grid; gap:0 1.5rem; border-top:1px solid var(--line); padding:1.25rem 0}
@media (min-width:640px){.year{grid-template-columns:4rem 1fr}}
.year-label{font-family:var(--display); font-weight:700; font-size:1.35rem; color:var(--ink); line-height:1.3}
.year ol{list-style:none; margin:0; padding:0}
.proj{padding:.55rem 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.1rem .75rem}
.proj-title{color:var(--ink); font-weight:600; font-size:.98rem}
.proj-meta{font-size:.88rem; color:var(--faint); flex-basis:100%}
.badge{font-size:.72rem; font-weight:600; padding:.1rem .55rem; border-radius:99px; border:1px solid var(--accent); color:var(--accent-ink)}
.badge.rep{border-style:dashed}
.empty{padding:1rem 0; color:var(--faint)}

/* Education, skills, awards */
.cols{display:grid; gap:2rem}
@media (min-width:640px){.cols{grid-template-columns:1fr 1fr}}
.cols h4{font-family:var(--display); font-weight:500; color:var(--ink); font-size:1rem; margin:0 0 .5rem}
.cols ul{margin:0; padding:0; list-style:none; font-size:.95rem}
.cols li{padding:.2rem 0}
.awards{list-style:none; margin:0; padding:0}
.awards li{display:grid; grid-template-columns:3.5rem 1fr; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line); font-size:.98rem}
.awards li:last-child{border-bottom:1px solid var(--line)}
.awards time{font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums}
.awards span{color:var(--ink)}
.awards em{font-style:normal; color:var(--accent-ink)}

.contact p{font-size:1.1rem}
.btn{display:inline-block; margin-top:.5rem; padding:.85rem 1.6rem; border:1.5px solid var(--accent); border-radius:8px; font-weight:600; text-decoration:none; color:var(--accent-ink)}
.btn:hover{background:var(--accent-soft)}

/* Social & contact links */
.elsewhere svg, .links svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.elsewhere{display:flex; gap:.5rem; list-style:none; margin:0; padding:0; margin-top:-3rem}
.elsewhere a{display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:var(--muted); transition:color .2s, border-color .2s, background .2s, transform .2s}
.elsewhere a:hover{color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft)}
.links{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:1.25rem 0 0; padding:0}
.links .btn{display:inline-flex; align-items:center; gap:.55rem; margin:0; padding:.6rem 1.1rem; font-size:.95rem}
.links li:first-child .btn{background:var(--accent); color:var(--surface)}
.links li:first-child .btn:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
footer{font-size:.85rem; color:var(--faint); margin-top:4rem}

/* Filter rows: small label in front ("Role", "Type"), count inside type buttons */
.filters + .filters{margin-top:-.75rem}
.filter-label{align-self:center; min-width:3.25rem; font-size:.78rem; font-weight:600; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}
.filters button small{font-size:.72rem; font-weight:600; opacity:.65; margin-left:.15rem}

/* Soft light-blue glow that follows the mouse behind the content */
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(650px circle at var(--mx,50%) var(--my,50%), var(--glow), transparent 70%)}
body.glow::before{opacity:1}
.wrap{position:relative; z-index:1}
@media (hover:none), (prefers-reduced-motion: reduce){body::before{display:none}}

/* Country flags next to projects */
.flag{flex:none; align-self:center; width:20px; height:15px; border-radius:3px; object-fit:cover; box-shadow:0 0 0 1px var(--line)}
.proj .flag{margin-right:.1rem}
.pop h5 .flag{display:inline-block; vertical-align:-1px; margin-right:.45rem; box-shadow:0 0 0 1px #DCE4EE}

/* Medal emojis */
.medal{font-style:normal; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; margin-left:.15rem}

/* Desktop: social icons become a vertical bar fixed to the left edge */
@media (min-width:1024px){
  .elsewhere{position:fixed; left:1.25rem; top:50%; transform:translateY(-50%); z-index:5; flex-direction:column; align-items:center; gap:.65rem; margin:0}
  .elsewhere::before, .elsewhere::after{content:""; width:1px; height:70px; background:var(--line)}
  .elsewhere a{background:var(--bg)}
  .elsewhere a:hover{transform:translateY(-2px)}
}
@media (min-width:1300px){.elsewhere{left:2rem}}
/* Smaller desktops: move the content right so it doesn't sit under the bar */
@media (min-width:1024px) and (max-width:1259px){.wrap{padding-left:5.5rem}}

/* Small icons in the side menu */
.nav svg{width:16px; height:16px; flex:none; margin-right:-.4rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.nav a:hover svg, .nav a.active svg{color:var(--accent); transform:scale(1.1)}

/* "Ask about Manos" chat */
.chat-fab{position:fixed; right:1.25rem; bottom:1.25rem; z-index:60; display:flex; align-items:center; gap:.5rem; padding:.8rem 1.15rem; border:0; border-radius:99px;
  background:var(--accent); color:var(--surface); font:600 .92rem var(--body); cursor:pointer; box-shadow:0 8px 24px rgba(23,37,54,.28); transition:transform .2s, box-shadow .2s}
.chat-fab:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(23,37,54,.34)}
.chat-fab svg, .chat-avatar svg, .chat-form svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none}
.chat-fab.is-open span{display:none}
@media (max-width:639px){.chat-fab span{display:none} .chat-fab{padding:.95rem}}

.chat{position:fixed; right:1.25rem; bottom:5.25rem; z-index:60; width:min(390px, calc(100vw - 2rem)); height:min(580px, calc(100dvh - 7rem));
  display:flex; flex-direction:column; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 50px rgba(23,37,54,.28); overflow:hidden; animation:pop-in .22s ease-out}
.chat[hidden]{display:none}
@media (max-width:639px){.chat{right:.5rem; left:.5rem; bottom:4.9rem; width:auto; height:calc(100dvh - 6rem)}}
.chat-head{display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; border-bottom:1px solid var(--line)}
.chat-head b{display:block; font:700 .98rem var(--display)}
.chat-mode{display:block; font-size:.74rem; color:var(--faint)}
.chat-mode::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#3BB273; margin-right:.35rem; vertical-align:1px}
.chat.is-local .chat-mode::before{background:var(--faint)}
.chat-avatar{display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); flex:none}
.chat-x{margin-left:auto; border:0; background:none; color:var(--faint); font-size:1.5rem; line-height:1; padding:.2rem .45rem; border-radius:8px; cursor:pointer}
.chat-x:hover{background:var(--accent-soft); color:var(--ink)}
.chat-log{flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; overscroll-behavior:contain}
.msg{max-width:88%; padding:.6rem .85rem; border-radius:14px; font-size:.9rem; line-height:1.5}
.msg p{margin:0 0 .35rem; max-width:none} .msg p:last-child{margin:0}
.msg ul{margin:.2rem 0 .35rem; padding-left:1.1rem} .msg li{margin:.15rem 0}
.msg a{word-break:break-word}
.msg.bot{align-self:flex-start; background:var(--bg); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.user{align-self:flex-end; background:var(--accent); color:var(--surface); border-bottom-right-radius:4px}
.msg.typing{display:flex; gap:4px; padding:.8rem .9rem}
.msg.typing span{width:6px; height:6px; border-radius:50%; background:var(--faint); animation:blink 1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s} .msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25} 40%{opacity:1}}
.chat-chips{display:flex; flex-wrap:wrap; gap:.4rem; padding:0 1rem .6rem}
.chat-chips button{flex:none; font:600 .78rem var(--body); color:var(--accent-ink); background:var(--accent-soft); border:0; padding:.4rem .75rem; border-radius:99px; cursor:pointer}
.chat-chips button:hover{background:var(--accent); color:var(--surface)}
.chat-form{display:flex; gap:.5rem; padding:.7rem 1rem; border-top:1px solid var(--line)}
.chat-form input{flex:1; min-width:0; font:400 .92rem var(--body); color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:.6rem .95rem}
.chat-form input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.chat-form button{display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--accent); color:var(--surface); cursor:pointer}
.chat-form.is-busy button{opacity:.5; cursor:wait}
.chat-note{margin:0; padding:0 1rem .7rem; font-size:.7rem; color:var(--faint); max-width:none}
@media (prefers-reduced-motion: reduce){.chat{animation:none} .msg.typing span{animation:none}}

/* Funding acknowledgement (Erasmus+ / INEDIVIM) */
.funding{margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line)}
.funding p{font-size:.9rem; max-width:36rem}
.funding-logos{display:inline-flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin:.5rem 0 1rem; padding:1rem 1.25rem; background:#fff; border:1px solid var(--line); border-radius:12px}
.funding-logos img{height:54px; width:auto}
.funding-logos img:first-child{height:72px; border-radius:4px}
.funding .funding-disclaimer{font-size:.75rem; line-height:1.55; color:var(--faint)}
.contact .funding + footer{margin-top:2rem}

/* Skip link: visible only when reached with the keyboard */
.skip-link{position:fixed; left:1rem; top:-4rem; z-index:100; padding:.6rem 1rem; border-radius:8px; background:var(--accent); color:var(--surface); font-weight:600; text-decoration:none; transition:top .15s}
.skip-link:focus{top:1rem}
main:focus{outline:none}

/* Accessibility menu (button bottom left) */
.a11y-fab{position:fixed; left:1.25rem; bottom:1.25rem; z-index:60; display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%;
  background:var(--accent); color:var(--surface); cursor:pointer; box-shadow:0 8px 24px rgba(23,37,54,.28); transition:transform .2s}
.a11y-fab:hover{transform:translateY(-2px)}
.a11y-fab svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.a11y-fab.is-active::after{content:""; position:absolute; top:2px; right:2px; width:11px; height:11px; border-radius:50%; background:#3BB273; border:2px solid var(--surface)}
.a11y{position:fixed; left:1.25rem; bottom:5.25rem; z-index:60; width:min(330px, calc(100vw - 2rem)); padding:1rem; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:16px; box-shadow:0 20px 50px rgba(23,37,54,.28); animation:pop-in .2s ease-out}
.a11y[hidden]{display:none}
.a11y-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem}
.a11y-head b{font:700 1rem var(--display)}
.a11y-x{border:0; background:none; color:var(--faint); font-size:1.5rem; line-height:1; padding:.2rem .45rem; border-radius:8px; cursor:pointer}
.a11y-x:hover{background:var(--accent-soft); color:var(--ink)}
.a11y-size{display:flex; align-items:center; gap:.5rem; padding:.6rem .75rem; margin-bottom:.6rem; background:var(--bg); border-radius:10px; font-size:.88rem}
.a11y-size > span:first-child{flex:1; font-weight:600}
.a11y-level{min-width:3.2rem; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted)}
.a11y-size button{width:38px; height:34px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); font:700 .9rem var(--body); cursor:pointer}
.a11y-size button:disabled{opacity:.35; cursor:default}
.a11y-opts{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.a11y-opts button{min-height:52px; padding:.5rem .6rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); font:600 .82rem/1.3 var(--body); cursor:pointer; text-align:left}
.a11y-opts button:hover{border-color:var(--accent)}
.a11y-opts button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--surface)}
.a11y-reset{width:100%; margin-top:.6rem; padding:.55rem; border:0; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); font:600 .85rem var(--body); cursor:pointer}

/* The options themselves */
html.a11y-contrast{--muted:#1B2838; --faint:#33445A; --line:#8593A6}
html.a11y-contrast[data-theme="dark"]{--muted:#F1F5FA; --faint:#D2DCE8; --line:#71839C}
html.a11y-contrast body::before{display:none}
html.a11y-font{--body:Verdana, Tahoma, "Segoe UI", sans-serif; --display:Verdana, Tahoma, "Segoe UI", sans-serif}
html.a11y-font body{letter-spacing:.02em; word-spacing:.06em}
html.a11y-links a{text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:3px}
html.a11y-links a:not(.btn){outline:2px dashed var(--accent); outline-offset:2px; border-radius:3px}
html.a11y-spacing body, html.a11y-spacing p, html.a11y-spacing li{line-height:1.95}
html.a11y-spacing p{margin-bottom:1.3em}
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
html.a11y-still body::before{display:none}

/* Hobbies & interests */
.hobbies{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.75rem}
@media (min-width:640px){.hobbies{grid-template-columns:1fr 1fr}}
.hobbies li{display:flex; gap:.9rem; align-items:flex-start; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:12px; transition:border-color .2s, transform .2s}
.hobbies li:hover{border-color:var(--accent); transform:translateY(-2px)}
.hobby-icon{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink)}
.hobby-icon svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hobbies h4{margin:.1rem 0 .2rem; font:500 1.02rem/1.3 var(--display); color:var(--ink)}
.hobbies p{margin:0; font-size:.9rem; line-height:1.5}

/* Faint world map behind the whole page (colour follows the theme) */
body::after{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-color:var(--map-dot);
  -webkit-mask:url("../images/world-map.svg") center 55% / min(1500px, 135vw) auto no-repeat;
          mask:url("../images/world-map.svg") center 55% / min(1500px, 135vw) auto no-repeat}
html.a11y-contrast body::after{display:none}

/* Project calendar */
.cal-total{margin:.25rem 0 1rem; font-size:.95rem}
.cal-total b{font-family:var(--display); font-weight:700; color:var(--accent); font-size:1.6rem; margin-right:.35rem; vertical-align:-2px}
.cal-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1rem}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem}
.cal-month{margin:0; font:700 1.1rem var(--display); color:var(--ink)}
.cal-nav{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:1.4rem; line-height:1; cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft)}
.cal-nav:disabled{opacity:.3; cursor:default}
.cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px}
.cal-wd{text-align:center; font-size:.72rem; font-weight:600; color:var(--faint); padding-bottom:.3rem; text-transform:uppercase}
.cal-day{position:relative; aspect-ratio:1 / .85; padding:.3rem .4rem; border-radius:8px; font-size:.82rem; font-variant-numeric:tabular-nums; color:var(--muted)}
.cal-day.is-on{background:var(--accent-soft); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent)}
.cal-day.is-edge{background:var(--accent); color:var(--surface)}
.cal-day .flag{position:absolute; right:5px; bottom:5px; width:16px; height:12px}
@media (max-width:479px){.cal-day{font-size:.72rem; padding:.2rem .25rem} .cal-day .flag{width:12px; height:9px; right:3px; bottom:3px}}
.cal-list{list-style:none; margin:1rem 0 0; padding:.75rem 0 0; border-top:1px solid var(--line)}
.cal-list li{display:flex; gap:.7rem; align-items:flex-start; padding:.35rem 0}
.cal-list .flag{margin-top:.25rem}
.cal-list b{color:var(--ink); font-weight:600; margin-right:.4rem}
.cal-list small{display:block; font-size:.82rem; color:var(--faint)}
.cal-list .cal-empty{color:var(--faint); font-size:.9rem}
.cal-jump{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.cal-jump button{display:inline-flex; align-items:center; gap:.4rem; font:600 .8rem var(--body); color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:.35rem .75rem; border-radius:99px; cursor:pointer}
.cal-jump button:hover{border-color:var(--accent); color:var(--ink)}
.cal-jump .flag{width:16px; height:12px}
#cal{position:relative}
.cal-day.is-on{cursor:pointer}
.cal-day.is-on:hover, .cal-day.is-on:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.cal-tip{position:absolute; z-index:10; width:max-content; max-width:min(320px, 100%); padding:.7rem .85rem; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 30px rgba(23,37,54,.22); pointer-events:none}
.cal-tip[hidden]{display:none}
.cal-tip-row{display:flex; gap:.6rem; align-items:flex-start}
.cal-tip-row + .cal-tip-row{margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--line)}
.cal-tip-row .flag{margin-top:.2rem}
.cal-tip b{font-weight:600; font-size:.9rem; margin-right:.35rem}
.cal-tip small{display:block; margin-top:.15rem; font-size:.78rem; line-height:1.45; color:var(--faint)}

/* Dots for the places I've been, on top of the background map (same size and position as the map) */
.bg-pins{position:fixed; z-index:0; pointer-events:none; width:min(1500px, 135vw); aspect-ratio:852.5 / 380.3; left:50%; transform:translateX(-50%);
  top:calc((100% - min(1500px, 135vw) * 380.3 / 852.5) * .55); fill:var(--accent); opacity:.5}
.bg-pins .halo{opacity:.25}
:root[data-theme="dark"] .bg-pins{opacity:.45}
html.a11y-contrast .bg-pins{display:none}

/* Discreet menu button (top right) and its section list */
.menu-fab{position:fixed; top:1rem; right:1rem; z-index:61; display:grid; place-items:center; width:40px; height:40px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 70%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--muted); cursor:pointer; opacity:.75; transition:opacity .2s, color .2s, border-color .2s}
.menu-fab:hover, .menu-fab:focus-visible, .menu-fab.is-open{opacity:1; color:var(--ink); border-color:var(--accent)}
.menu-fab svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.menu-fab .x, .menu-fab.is-open .bars{display:none}
.menu-fab.is-open .x{display:inline}
.quick-menu{position:fixed; top:3.6rem; right:1rem; z-index:61; min-width:220px; padding:.4rem; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 16px 40px rgba(23,37,54,.22); animation:pop-in .18s ease-out}
.quick-menu[hidden]{display:none}
.quick-menu ol{list-style:none; margin:0; padding:0}
.quick-menu a{display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:8px; color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:600}
.quick-menu a:hover, .quick-menu a:focus-visible{background:var(--accent-soft); color:var(--ink)}
.quick-menu a.active{color:var(--accent-ink); background:var(--accent-soft)}
.quick-menu svg{width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* My name: handwritten font + a little plane that "writes" it on page load */
h1.name{position:relative; display:inline-block; white-space:nowrap; font-family:"Mynerve", var(--display); font-weight:400; letter-spacing:0;
  font-size:clamp(2.2rem, 3.4vw, 2.9rem); line-height:1.2}
.name-plane{display:inline-block; width:.42em; height:.42em; margin-left:.12em; vertical-align:.35em; color:var(--accent)}
.name-plane svg{width:100%; height:100%; fill:currentColor; transform:rotate(45deg)}
/* Intro: hidden until the fonts are ready (a fallback shows it after 4s in any case) */
html.name-intro .name-text{clip-path:inset(0 100% 0 0); animation:name-show 0s 4s forwards}
html.name-intro .name-plane{opacity:0; animation:name-show 0s 4s forwards}
html.name-go .name-text{animation:name-write 1.6s .2s cubic-bezier(.45,.05,.35,1) forwards}
html.name-go .name-plane{opacity:1; animation:plane-fly 1.6s .2s cubic-bezier(.45,.05,.35,1) both}
@keyframes name-show{to{clip-path:inset(0 0 0 0); opacity:1}}
@keyframes name-write{to{clip-path:inset(0 0 0 0)}}
@keyframes plane-fly{from{transform:translate(calc(-1 * var(--w, 0px)), .12em)} 60%{transform:translate(calc(-.35 * var(--w, 0px)), -.08em)} to{transform:none}}