/* Layout: medium-density sections that blend into each other by colour; all projects in one bento "slide";
   frosted-glass panels over soft organic shapes; double borders with soft outer + inner shadows; a small hard
   offset and a glow on hover; fine grain on the section backgrounds (never over images); 3D tilt for depth;
   hand-drawn (filtered) icons. Palette: the CV's navy and royal blue against orange and amber. */
:root {
  --bg: #f7f6f3; --ink: #17182f; --muted: #66677a; --line: rgba(23, 24, 47, .12);
  --glass: rgba(255, 255, 255, .7); --glass-border: rgba(255, 255, 255, .9);
  /* one blue family: deep indigo, periwinkle, ink, pale blue */
  --c1: #34408f; --c2: #9aabdc; --c3: #23264f; --c4: #c8d2ec; --c: var(--c1);
  --on1: #ffffff; --on2: #17182f; --on3: #ffffff; --on4: #17182f; --on-c: var(--on1);
  --surface-2: #ffffff; --t1: #eef0f6; --t2: #f7f6f3; --t3: #f0f2f6; --t4: #f6f5f1; --t5: #eceff6;
  --soft: rgba(23, 24, 47, .2);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.24 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Commissioner + Literata: both cover Latin and Greek, so the two languages look the same */
  --display: "Commissioner", "Segoe UI", Arial, sans-serif; --body: "Literata", Georgia, serif;
  --r: 18px;

  --step--1: clamp(.74rem, .72rem + .1vw, .8rem);
  --step-0: clamp(.95rem, .91rem + .18vw, 1.04rem);
  --step-1: clamp(1.06rem, 1rem + .3vw, 1.2rem);
  --step-2: clamp(1.3rem, 1.12rem + .7vw, 1.7rem);
  --step-3: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem);
  --step-hero: clamp(2.4rem, 1.5rem + 3.8vw, 4.4rem);
  --space-s: clamp(.6rem, .5rem + .4vw, .9rem);
  --space-m: clamp(1rem, .85rem + .7vw, 1.5rem);
  --space-l: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  --space-xl: clamp(2.6rem, 2rem + 2.8vw, 4.4rem);
  --gutter: clamp(16px, 4.5vw, 56px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111220; --ink: #e9eaf3; --muted: #9c9db2; --line: rgba(255, 255, 255, .12);
    --glass: rgba(28, 30, 50, .66); --glass-border: rgba(255, 255, 255, .1);
    --c1: #a3b0ea; --c2: #6b7ab8; --c3: #d6dbf3; --c4: #3c4677;
    --on1: #111220; --on2: #ffffff; --on3: #111220; --on4: #ffffff;
    --surface-2: #181a2c; --t1: #141629; --t2: #121320; --t3: #131626; --t4: #14141f; --t5: #15182c;
    --soft: rgba(0, 0, 0, .55);
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111220; --ink: #e9eaf3; --muted: #9c9db2; --line: rgba(255, 255, 255, .12);
  --glass: rgba(28, 30, 50, .66); --glass-border: rgba(255, 255, 255, .1);
  --c1: #a3b0ea; --c2: #6b7ab8; --c3: #d6dbf3; --c4: #3c4677;
  --on1: #111220; --on2: #ffffff; --on3: #111220; --on4: #ffffff;
  --surface-2: #181a2c; --t1: #141629; --t2: #121320; --t3: #131626; --t4: #14141f; --t5: #15182c;
  --soft: rgba(0, 0, 0, .55);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}
/* text colour that reads on each accent */
.c1 { --c: var(--c1); --on-c: var(--on1); } .c2 { --c: var(--c2); --on-c: var(--on2); } .c3 { --c: var(--c3); --on-c: var(--on3); } .c4 { --c: var(--c4); --on-c: var(--on4); }
:root:not([data-lang]) .el, :root[data-lang="en"] .el, :root[data-lang="el"] .en { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: calc(var(--step-0) * .94); line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; image-rendering: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
em { font-family: var(--body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--c1); }
:focus-visible { outline: 2.5px solid var(--c1); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.label { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--muted); }


/* hand-drawn icons: plain strokes run through the #rough displacement filter */
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); flex: none; vertical-align: -.22em; }

/* ---------- sections: alternating solid bands, separated by a hairline ---------- */
.sec { position: relative; padding-block: var(--space-xl); background: var(--noise), var(--band); border-top: 1px solid var(--line); }
.s1 { --band: var(--t1); border-top: 0; }
.s2, .s4 { --band: var(--surface-2); }
.s3, .s5 { --band: var(--bg); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-s) var(--space-m); margin-bottom: var(--space-l); }
.sec-head h2 { font-size: var(--step-3); display: flex; align-items: center; gap: .5rem; }
.sec-head h2 .ico { color: var(--c2); width: .9em; height: .9em; }
.sec-head p { max-width: 46ch; color: var(--muted); font-size: .92rem; }

/* ---------- surfaces ---------- */
.glass {
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--glass-border);
}
.panel {
  position: relative; border-radius: var(--r); padding: var(--space-m);
  border: 1.5px solid var(--ink); outline: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -14px 28px -18px var(--soft), 0 18px 36px -22px var(--soft);
  transition: box-shadow .3s, outline-color .3s, transform .3s;
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  padding: .32rem .75rem; border-radius: 999px; color: var(--ink); border: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.chip .ico { color: var(--c2); width: 1.05rem; height: 1.05rem; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; padding-top: 10px; }
.bar-inner { display: flex; align-items: center; gap: var(--space-m); width: 100%; min-height: 54px; padding: 0 .6rem 0 1.1rem; border-radius: 999px; box-shadow: 0 10px 30px -18px var(--soft); }
.mark { font-family: var(--display); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.mark .ico { color: var(--c3); }
.nav { display: flex; gap: .2rem; margin-left: auto; font-size: .88rem; font-weight: 600; }
.nav a { text-decoration: none; padding: .4rem .75rem; border-radius: 999px; transition: background .25s, color .25s; }
.nav a:hover { background: var(--ink); color: var(--bg); }
.tools { display: flex; gap: .2rem; }
.icon-btn { font: 700 .76rem/1 var(--body); letter-spacing: .06em; cursor: pointer; color: var(--ink); min-width: 38px; height: 38px; padding: 0 .55rem; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; transition: background .25s, color .25s, transform .25s; }
.icon-btn:hover { background: var(--c2); color: #17182f; transform: rotate(-6deg); }
.icon-btn svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .nav { display: none; } .tools { margin-left: auto; } }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: .75rem 1.25rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 22px -14px var(--soft); transition: color .3s, transform .2s, box-shadow .2s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c2); transform: translateY(101%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); color: #17182f; }
.btn:hover::before { transform: translateY(0); }
.btn.ghost { background: var(--glass); color: var(--ink); backdrop-filter: blur(10px); }
.btn.ghost::before { background: var(--c4); }

/* ---------- organic blobs ---------- */
.blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; display: block; filter: blur(2px); opacity: .45; animation: morph 18s ease-in-out infinite alternate, float 11s ease-in-out infinite alternate; }
.blobs i:nth-child(2) { animation-delay: 0s, -4s; } .blobs i:nth-child(3) { animation-delay: 0s, -7s; }
@keyframes float { 0% { translate: 0 0; } 33% { translate: 14px -18px; } 66% { translate: -12px 10px; } 100% { translate: 8px 16px; } }
.blobs i:nth-child(1) { width: 34vw; max-width: 460px; aspect-ratio: 1; right: -6vw; top: -8vw; background: color-mix(in srgb, var(--c2) 55%, transparent); }
.blobs i:nth-child(2) { width: 22vw; max-width: 300px; aspect-ratio: 1; left: -5vw; bottom: 6%; background: color-mix(in srgb, var(--c4) 70%, transparent); animation-duration: 22s, 13s; }
.blobs i:nth-child(3) { width: 14vw; max-width: 190px; aspect-ratio: 1; right: 38%; bottom: -4vw; background: color-mix(in srgb, var(--c2) 45%, transparent); animation-duration: 15s, 9s; }
@keyframes morph {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0deg); }
  50% { border-radius: 63% 37% 38% 62% / 57% 36% 64% 43%; transform: rotate(18deg) scale(1.06); }
  100% { border-radius: 36% 64% 52% 48% / 38% 61% 39% 62%; transform: rotate(-10deg) scale(.96); }
}

/* ---------- hero ---------- */
.hero { overflow: hidden; padding-block: var(--space-l) var(--space-xl); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.hero-text { display: grid; gap: var(--space-s); justify-items: start; }
.name { font-size: var(--step-hero); letter-spacing: -.03em; line-height: 1.02; }
.name em { display: block; color: var(--c1); }
.intro { font-size: var(--step-1); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--space-s); }

@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- ticker (a touch of maximalism) ---------- */
.ticker { background: var(--ink); color: var(--bg); overflow: hidden; }
.ticker-track { display: flex; width: max-content; animation: slide 40s linear infinite; }
.ticker ul { display: flex; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker li { display: flex; align-items: center; gap: .55rem; padding: .7rem 1.6rem; font-weight: 600; font-size: .9rem; letter-spacing: .02em; white-space: nowrap; opacity: .82; transition: opacity .25s, color .25s; }
.ticker li + li, .ticker ul + ul li:first-child { border-left: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.ticker .logo { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; transition: fill .25s, color .25s, transform .3s; }
.ticker .ico.logo { fill: none; }
.ticker li:hover { opacity: 1; }
.ticker li:hover .logo { color: var(--brand); fill: var(--brand); transform: scale(1.15) rotate(-6deg); }
.ticker li:hover .ico.logo { fill: none; stroke: var(--brand); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- projects: one horizontal rail of equal cards ---------- */
.legend { color: var(--muted); font-size: .92rem; max-width: 44ch; margin-top: .4rem; }
.rail-nav { display: flex; align-items: center; gap: .5rem; }
.rail-count { font-family: var(--display); font-weight: 700; font-size: .85rem; color: var(--muted); margin-right: .4rem; font-variant-numeric: tabular-nums; }
.rail-count b { color: var(--ink); }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: var(--surface-2); color: var(--ink); font: 700 1.05rem/1 var(--display); cursor: pointer; transition: background .25s, color .25s, border-color .25s, opacity .25s; }
.rail-btn:hover:not(:disabled) { background: var(--c1); color: var(--on1); border-color: var(--c1); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, calc((100% - 2 * 20px) / 3), 360px); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 6px 2px 18px; margin-inline: -2px; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-bar { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: var(--p, 30%); margin-left: var(--o, 0%); background: var(--c1); border-radius: 2px; transition: margin-left .2s, width .2s; }
.pcard {
  scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-radius: var(--r); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(23, 24, 47, .05), 0 14px 30px -24px var(--soft);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px var(--soft); }
.pcard-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--c) 14%, var(--surface-2)); }
.pcard-media .tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.pcard:hover .tile-img { transform: scale(1.04); }
.t-european-parliament .tile-img { object-position: center 30%; }
.tile-imgs { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 5%; padding: 8% 10%; }
.tile-imgs img { height: 100%; width: auto; min-width: 0; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 24px -12px rgba(23, 24, 47, .4); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tile-imgs img:nth-child(1) { transform: rotate(-5deg); } .tile-imgs img:nth-child(3) { transform: rotate(5deg); }
.pcard:hover .tile-imgs img:nth-child(1) { transform: rotate(-8deg) translateX(-4px); } .pcard:hover .tile-imgs img:nth-child(3) { transform: rotate(8deg) translateX(4px); }
.t-ku-leuven .tile-imgs { gap: 0; } .t-ku-leuven .tile-imgs img { margin-inline: -5%; } .t-ku-leuven .tile-imgs img:nth-child(2) { position: relative; z-index: 1; }
.tile-cover { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c1); background: color-mix(in srgb, var(--c4) 45%, var(--surface-2)); }
.tile-cover .ico { width: 3.2rem; height: 3.2rem; stroke-width: 1.6; }
.pcard-body { display: grid; gap: .3rem; padding: .85rem 1rem 1rem; flex: 1; align-content: start; }
.tile-meta { display: flex; align-items: center; gap: .4rem; min-width: 0; font-family: var(--display); font-size: .7rem; font-weight: 700; letter-spacing: .02em; color: var(--c1); white-space: nowrap; }
.tile-meta .ico { width: 1rem; height: 1rem; }
.tile-meta .num { color: var(--muted); }
.tile-meta .cat { overflow: hidden; text-overflow: ellipsis; }
.pcard h3 { font-size: 1rem; line-height: 1.25; letter-spacing: 0; }
.pcard-does { font-size: .78rem; line-height: 1.5; color: var(--muted); }
.pcard-go { margin-top: .2rem; font-family: var(--display); font-weight: 700; font-size: .76rem; color: var(--c1); }
.pcard-go .arr { display: inline-block; transition: transform .3s; }
.pcard:hover .pcard-go .arr { transform: translateX(4px); }
@media (max-width: 820px) { .rail { grid-auto-columns: 72%; } }
@media (max-width: 480px) { .rail { grid-auto-columns: 84%; } .rail-count { display: none; } }

/* ---------- about / experience / skills ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-l); align-items: start; }
.duo .panel h3 { font-size: var(--step-1); display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.duo .panel h3 .ico { color: var(--c3); }
.lead { font-size: .95rem; line-height: 1.75; }
.edu { display: grid; gap: .55rem; margin-top: var(--space-m); padding-top: var(--space-s); border-top: 1.5px dashed var(--line); font-size: .9rem; }
.edu b { display: block; font-weight: 700; }
.edu p > span { color: var(--muted); display: block; }
.row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .9rem; padding: .7rem 0; border-bottom: 1.5px dashed var(--line); }
.row:last-child { border-bottom: 0; }
.row .when { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.row b { font-weight: 700; display: block; line-height: 1.35; }
.row i { font-style: normal; color: var(--muted); display: block; font-size: .85rem; }
.row a { font-size: .8rem; font-weight: 700; text-decoration: none; display: inline-block; margin-top: .25rem; padding: .05rem .55rem; border-radius: 999px; border: 1.5px solid var(--ink); transition: background .25s, color .25s; }
.row a:hover { background: var(--c2); color: #17182f; }
.skills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-m); }
.skills .panel { padding: var(--space-s) var(--space-m) var(--space-m); background: color-mix(in srgb, var(--c) 18%, var(--glass)); }
.skills .ico { width: 2rem; height: 2rem; color: var(--c); margin-bottom: .3rem; }
.skills h3 { font-size: 1rem; margin-bottom: .3rem; }
.skills p { font-size: .88rem; color: var(--muted); }
.langs { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .row { grid-template-columns: 1fr; gap: .05rem; } .skills { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact .panel { display: grid; gap: var(--space-m); padding: var(--space-l); }
.contact h2 { font-size: var(--step-3); letter-spacing: -.03em; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.c-list { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-s); }
.c-item { display: grid; gap: .25rem; align-content: start; min-width: 0; padding: .8rem .9rem; border-radius: 16px; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--c) 16%, var(--bg)); transition: background .3s, color .3s, transform .3s; }
.c-item:hover { background: var(--c); color: var(--on-c); transform: translateY(-3px) rotate(-1deg); }
.c-item .label { color: inherit; opacity: .75; display: flex; align-items: center; gap: .35rem; }
.c-item .v { font-weight: 700; overflow-wrap: break-word; }
.c-item .v a { text-decoration: none; }
.copy { font: 700 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--bg); border: 1.5px solid var(--ink); border-radius: 999px; padding: .3rem .6rem; cursor: pointer; justify-self: start; }
@media (max-width: 900px) { .c-list { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .c-list { grid-template-columns: 1fr; } }

footer { background: color-mix(in srgb, var(--c1) 8%, var(--t5)); border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
footer a { text-decoration: none; font-weight: 700; }

/* ---------- case study ---------- */
.case-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-l); align-items: center; }
.case-card { display: grid; gap: var(--space-s); }
.back { font-size: .88rem; font-weight: 700; text-decoration: none; justify-self: start; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .8rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--glass); transition: background .25s; margin-bottom: var(--space-s); }
.back:hover { background: var(--c2); color: #17182f; }
.case-card .tile-top { color: var(--c); font-size: .74rem; }
.case-card h1 { font-size: var(--step-3); letter-spacing: -.02em; }
.roles { display: flex; flex-wrap: wrap; gap: .35rem; }
.roles span { font-size: .8rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--c) 20%, var(--bg)); }
.summary { font-size: var(--step-1); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; margin: .4rem 0 0; padding-top: var(--space-s); border-top: 1.5px dashed var(--line); }
.facts dt { margin-bottom: .1rem; color: var(--c); }
.facts dd { margin: 0; font-size: .88rem; font-weight: 600; }
.case-cover { position: relative; perspective: 1000px; }
.case-cover .float { position: relative; margin: 0; border-radius: 18px; overflow: hidden; border: 1.5px solid var(--ink); outline: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 4px; box-shadow: 0 30px 50px -28px var(--soft); transform: rotateY(-8deg) rotateX(3deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); background: color-mix(in srgb, var(--c) 18%, var(--bg)); }
.case-cover:hover .float { transform: rotateY(-4deg) rotateX(2deg); }
.case-cover .float > img { width: 100%; max-height: 420px; object-fit: cover; object-position: top; }
.case-cover .float.pad { padding: 6%; display: flex; gap: 6%; justify-content: center; align-items: center; }
.case-cover .float.pad img { width: auto; max-width: 46%; max-height: 340px; border-radius: 10px; border: 1.5px solid var(--ink); object-fit: contain; }
.case-cover .tile-cover { position: relative; min-height: 300px; place-items: center; padding: 1rem; }
.case-cover .tile-cover .ico { width: 6rem; height: 6rem; margin: 0; }
@media (max-width: 820px) { .case-grid { grid-template-columns: 1fr; } }

.gallery { display: grid; gap: var(--space-m); }
.gallery + .gallery, .tiles + .gallery { margin-top: var(--space-m); }
.gallery figure { margin: 0; min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.g-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; max-width: 560px; margin-inline: auto; }
.shot {
  display: block; width: 100%; padding: 0; cursor: zoom-in; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--c) 16%, var(--bg));
  border: 1.5px solid var(--ink); outline: 1px solid color-mix(in srgb, var(--ink) 55%, transparent); outline-offset: 4px; box-shadow: 0 18px 34px -22px var(--soft);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, box-shadow .3s, outline-color .3s;
}
.shot:hover { box-shadow: 0 22px 40px -24px var(--soft); }
.shot.pad { padding: clamp(.8rem, 3vw, 2rem); }
.shot.pad img { border-radius: 8px; margin-inline: auto; }
.shot img { width: 100%; }
figcaption { font-size: .82rem; color: var(--muted); margin-top: .7rem; }
@media (max-width: 560px) { .g-2 { grid-template-columns: 1fr; } }

.case-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.case-body h2 { font-size: var(--step-1); display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.case-body h2 .ico { color: var(--c3); }
.did { display: grid; gap: .55rem; }
.did li { padding-left: 1.3rem; position: relative; }
.did li::before { content: ""; position: absolute; left: .2rem; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--c1); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.stats div { display: grid; padding: .7rem .8rem; border-radius: 14px; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--c) 18%, var(--bg)); transition: background .3s, color .3s, transform .3s; }
.stats div:hover { background: var(--c); color: var(--on-c); transform: rotate(-1.5deg); }
.stats b { font-family: var(--display); font-weight: 700; font-size: var(--step-3); line-height: 1.05; font-variant-numeric: tabular-nums; }
.stats div > span { font-size: .82rem; opacity: .8; }
.note { font-size: .88rem; font-style: italic; color: var(--muted); margin-top: var(--space-m); }
.sub + .sub { margin-top: var(--space-l); }
.sub h2 { font-size: var(--step-2); }
.sub > p { color: var(--muted); max-width: 60ch; margin: .3rem 0 var(--space-m); }
@media (max-width: 820px) { .case-body { grid-template-columns: 1fr; } }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-s); }
.tile-s { border-radius: 18px; padding: var(--space-m); min-height: 8.5rem; display: grid; align-content: space-between; gap: .6rem; border: 2px solid var(--ink); background: color-mix(in srgb, var(--c) 22%, var(--bg)); box-shadow: inset 0 -14px 24px -18px var(--soft); transition: background .3s, color .3s, transform .3s, box-shadow .3s; }
.tile-s:nth-child(1) { --c: var(--c4); --on-c: var(--on4); } .tile-s:nth-child(2) { --c: var(--c2); --on-c: var(--on2); } .tile-s:nth-child(3) { --c: var(--c3); --on-c: var(--on3); } .tile-s:nth-child(4) { --c: var(--c1); --on-c: var(--on1); }
.tile-s:hover { background: var(--c); color: var(--on-c); transform: translateY(-4px) rotate(-1deg); box-shadow: 5px 5px 0 var(--ink); }
.tile-s b { font-family: var(--display); font-size: var(--step-2); line-height: 1.1; }
.tile-s > span { font-size: .85rem; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.next { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; padding: var(--space-m) var(--space-l); }
.next b { font-family: var(--display); font-size: var(--step-2); }
.next .go { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--ink); background: var(--c2); color: #17182f; flex: none; transition: transform .35s; }
.next:hover .go { transform: rotate(-45deg); }

/* ---------- lightbox ---------- */
dialog.lb { border: 2px solid var(--ink); border-radius: 16px; padding: 0; background: var(--bg); color: var(--ink); max-width: min(92vw, 1100px); max-height: 92vh; overflow: hidden; }
dialog.lb::backdrop { background: rgba(20, 16, 34, .6); backdrop-filter: blur(6px); }
dialog.lb img { max-height: calc(92vh - 56px); width: auto; margin-inline: auto; }
dialog.lb .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem .5rem .4rem 1rem; font-size: .8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blobs i, .ticker-track, .hero-stack .float { animation: none; }
  .tile, .tile-img, .shot, .btn::before, .hero-stack .float { transition: none; }
}

/* UI text in the sans; reading text stays in the serif */
.label, .chip, .nav, .btn, .icon-btn, .mark, .tile-top, .roles span, .copy, .ticker, .row .when, .row a, .back, .c-item .label, .stats b, .tile-s b, .facts dt { font-family: var(--display); }
.label, .chip, .tile-top, .facts dt { letter-spacing: .1em; }
.name { text-transform: uppercase; letter-spacing: -.005em; line-height: .98; font-weight: 800; }
.name em { font-family: var(--display); font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.sec-head h2, .contact h2, .case-card h1 { text-transform: uppercase; }
.sec-head h2 em, .contact h2 em, .case-card h1 em { text-transform: none; }
.tagline { font-family: var(--body); font-style: italic; font-size: var(--step-1); color: var(--muted); }
.tagline .dot { color: var(--c2); font-style: normal; padding-inline: .4em; }
.tile h3 { font-weight: 700; letter-spacing: 0; }
figcaption { font-style: italic; }

/* ---------- hero: work in device frames, layered in perspective ---------- */
.hero-stack { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1.12; justify-self: center; perspective: 1400px; container-type: inline-size; }
.hero-stack .float {
  position: absolute; display: block; text-decoration: none; color: var(--ink); transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(calc(var(--by) + var(--ry, 0deg))) rotateX(calc(var(--bx) + var(--rx, 0deg))) rotate(var(--bz)) translate(var(--tx, 0), var(--ty, 0));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, filter .4s;
  box-shadow: 0 2px 4px rgba(21, 19, 61, .08), 0 22px 44px -18px var(--soft), 0 50px 80px -40px var(--soft);
  animation: bob 8s ease-in-out infinite alternate;
}
.hero-stack .float img { display: block; width: 100%; }

/* browser window */
.hero-stack .browser { --by: -10deg; --bx: 5deg; --bz: 0deg; width: 70%; left: 24%; top: 22%; z-index: 2; border-radius: 14px; overflow: hidden; background: #ffffff; border: 1px solid rgba(21, 19, 61, .14); }
.hero-stack .chrome { display: flex; align-items: center; gap: 1.1cqw; height: max(18px, 4.8cqw); padding: 0 1.8cqw; background: linear-gradient(#f7f7fb, #ececf4); border-bottom: 1px solid rgba(21, 19, 61, .1); }
.hero-stack .chrome i { width: max(6px, 1.6cqw); height: max(6px, 1.6cqw); border-radius: 50%; background: #ff6b5f; } .hero-stack .chrome i:nth-child(2) { background: #ffbe55; } .hero-stack .chrome i:nth-child(3) { background: #3fc77a; }
.hero-stack .chrome .url { margin-left: 1.6cqw; flex: 1; max-width: 60%; height: max(12px, 2.9cqw); border-radius: 999px; background: #ffffff; border: 1px solid rgba(21, 19, 61, .08); font: 600 max(7px, 1.7cqw)/max(12px, 2.9cqw) var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5c5e7c; padding-left: 8px; letter-spacing: .02em; }

@keyframes bob { from { translate: 0 0; } to { translate: 0 -8px; } }
@media (max-width: 820px) { .hero-stack { max-width: 460px; margin-top: var(--space-s); } }
@media (prefers-reduced-motion: reduce) { .hero-stack .float { animation: none; transition: none; } }

/* printed newspaper: cream newsprint, masthead, columns, centre fold, curled corner */
.hero-stack .paper {
  --by: -12deg; --bx: 5deg; --bz: -5deg; width: 40%; left: 1%; top: 2%; z-index: 1; animation-delay: -3s;
  display: flex; flex-direction: column; gap: 5px; padding: 9px 9px 12px; border-radius: 2px; color: #1d1a16;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(0, 0, 0, .07) 50%, rgba(255, 255, 255, .5) 50.6%, transparent 52%),
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .5), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    #f3ecdc;
  box-shadow: 0 1px 1px rgba(60, 45, 20, .15), 0 18px 34px -14px rgba(40, 30, 10, .45), 0 40px 70px -40px rgba(21, 19, 61, .45);
  border: 0;
}
.hero-stack .paper::after { /* curled bottom-right corner */
  content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--t1) 50%, #e3d9c2 50%, #cfc3a6 100%); box-shadow: -2px -2px 4px -1px rgba(40, 30, 10, .25);
  border-top-left-radius: 4px;
}
.hero-stack .masthead { display: grid; gap: 3px; text-align: center; font-family: "Literata", Georgia, serif; }
.hero-stack .mh-top, .hero-stack .mh-rule { display: flex; justify-content: space-between; font-size: 1.05cqw; letter-spacing: .06em; text-transform: uppercase; color: #4a4338; }
.hero-stack .mh-top { border-bottom: .5px solid #1d1a16; padding-bottom: 2px; }
.hero-stack .mh-title { font-size: 3.6cqw; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-style: italic; }
.hero-stack .mh-rule { border-top: 2px solid #1d1a16; border-bottom: .5px solid #1d1a16; padding: 2px 0; }
.hero-stack .print { display: block; overflow: hidden; border: .5px solid rgba(29, 26, 22, .35); }
.hero-stack .print img { aspect-ratio: 4 / 4.6; object-fit: cover; object-position: top; mix-blend-mode: multiply; filter: sepia(.18) saturate(.85) contrast(1.05); }
.hero-stack .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 6px; }
.hero-stack .cols i { display: block; height: 2.6cqw; background: repeating-linear-gradient(#5a5246 0 1px, transparent 1px 3.5px); opacity: .55; }
.hero-stack .paper { padding: 2cqw 2cqw 2.6cqw; gap: 1.2cqw; }

/* phone: titanium frame, side buttons, dynamic island, status bar, glass glare */
.hero-stack .phone {
  --by: -10deg; --bx: 4deg; --bz: 4deg; width: 26%; right: 0; bottom: 0; z-index: 3; animation-delay: -5s;
  padding: 4px; border-radius: 17% / 8%; border: 0;
  background: linear-gradient(140deg, #6b6f7c 0%, #2b2d35 18%, #9a9ea9 40%, #3a3c45 62%, #a7abb5 85%, #50535c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 2px 3px rgba(0, 0, 0, .25), 0 26px 50px -18px rgba(10, 8, 30, .6), 0 50px 80px -40px rgba(21, 19, 61, .5);
}
.hero-stack .phone .screen {
  position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 19.5; border-radius: 15% / 7%; background: #000;
  box-shadow: 0 0 0 3px #0b0b0f;
}
.hero-stack .phone .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; padding-top: 11%; background: #000; }
.hero-stack .phone .screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 28%, transparent 42%);
}
.hero-stack .status { position: absolute; top: 0; left: 0; right: 0; height: 11%; display: flex; align-items: center; justify-content: space-between; padding: 0 11%; color: #fff; z-index: 2; font: 700 2.1cqw/1 -apple-system, "SF Pro Text", "Segoe UI", sans-serif; }
.hero-stack .island { position: absolute; left: 50%; top: 22%; translate: -50% 0; width: 34%; height: 42%; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px #1a1a1f; }
.hero-stack .sig { display: flex; align-items: flex-end; gap: .25cqw; height: 1.5cqw; }
.hero-stack .sig i { display: block; width: .35cqw; background: #fff; border-radius: 1px; }
.hero-stack .sig i:nth-child(1) { height: 30%; } .hero-stack .sig i:nth-child(2) { height: 55%; } .hero-stack .sig i:nth-child(3) { height: 80%; } .hero-stack .sig i:nth-child(4) { height: 100%; }
.hero-stack .batt { width: 2.6cqw; height: 1.3cqw; margin-left: .6cqw; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .85); background: linear-gradient(90deg, #fff 75%, transparent 75%) content-box; padding: 1px; }
.hero-stack .home { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; width: 36%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .85); z-index: 2; }
.hero-stack .btns i { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a3c45, #8d919c); }
.hero-stack .btns i:nth-child(1) { left: -2px; top: 17%; height: 5%; }
.hero-stack .btns i:nth-child(2) { left: -2px; top: 25%; height: 9%; }
.hero-stack .btns i:nth-child(3) { left: -2px; top: 36%; height: 9%; }
.hero-stack .btns i:nth-child(4) { right: -2px; left: auto; top: 28%; height: 13%; }

/* titles live inside each object */
.hero-stack .tag-in {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5cqw; padding: 0 1.4cqw; height: max(13px, 3cqw); border-radius: 999px; white-space: nowrap;
  font: 700 max(7px, 1.6cqw)/1 var(--display); letter-spacing: .04em; color: #34408f; background: rgba(52, 64, 143, .1); transition: background .3s, color .3s;
}
.hero-stack .tag-in .ico { width: max(8px, 1.8cqw); height: max(8px, 1.8cqw); }
.hero-stack .imprint {
  display: block; text-align: left; padding-top: .8cqw; border-top: .5px solid #1d1a16;
  font: italic max(6px, 1.35cqw)/1.2 "Literata", Georgia, serif; color: #4a4338; letter-spacing: .02em; transition: color .3s;
}
.hero-stack .views {
  position: absolute; left: 7%; bottom: 5.5%; z-index: 2; display: inline-flex; align-items: center; gap: .5cqw; padding: .5cqw 1.3cqw; border-radius: 999px;
  font: 700 max(6px, 1.7cqw)/1.2 -apple-system, "SF Pro Text", "Segoe UI", sans-serif; color: #fff; background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s, color .3s;
}
.hero-stack .views .ico { width: max(7px, 1.8cqw); height: max(7px, 1.8cqw); }
.hero-stack .browser:hover .tag-in { background: #34408f; color: #fff; }
.hero-stack .paper:hover .imprint { color: #34408f; }
.hero-stack .phone:hover .views { background: #ffffff; color: #17182f; }

/* calligraphic section title */
.sec-head h2.script { font-family: var(--body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.8rem); line-height: 1.05; color: var(--c1); }

.tile-top { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-family: var(--display); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.tile-top .ico { width: 1.1rem; height: 1.1rem; }
.tile-top .num { opacity: .6; }

/* ---------- hero: slow aurora wash behind everything ---------- */
.hero { isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, var(--c2) 38%, transparent), transparent 70%),
    radial-gradient(35% 45% at 80% 25%, color-mix(in srgb, var(--c4) 60%, transparent), transparent 70%),
    radial-gradient(45% 40% at 60% 85%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%);
  filter: blur(30px); opacity: .9;
  animation: aurora 38s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(6%, -4%) rotate(8deg) scale(1.08); }
  66%  { transform: translate(-5%, 5%) rotate(-6deg) scale(.96); }
  100% { transform: translate(4%, 3%) rotate(4deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ================= micro-interactions ================= */
/* intro: letters rise, the work stack lands */
.name .nm { display: inline-block; }
.name em.nm { display: block; }
.js .name .ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(4deg); animation: rise .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 35ms + 100ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .hero .tagline, .js .hero .intro, .js .hero-actions { opacity: 0; animation: fadeUp .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.js .hero .tagline { animation-delay: .65s; } .js .hero .intro { animation-delay: .8s; } .js .hero-actions { animation-delay: .95s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .hero-stack { animation: land 1.2s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes land { from { opacity: 0; transform: perspective(1200px) rotateX(18deg) translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.rail.reveal { opacity: 1; transform: none; }
.rail.reveal .pcard { opacity: 0; translate: 0 30px; transition: opacity .8s cubic-bezier(.2, .8, .2, 1), translate .8s cubic-bezier(.2, .8, .2, 1), transform .3s, box-shadow .3s, border-color .3s; }
.rail.reveal.in .pcard { opacity: 1; translate: 0 0; }
.rail.reveal .pcard:nth-child(2) { transition-delay: 90ms, 90ms, 0s, 0s, 0s; } .rail.reveal .pcard:nth-child(3) { transition-delay: 180ms, 180ms, 0s, 0s, 0s; }
.rail.reveal .pcard:nth-child(n+4) { transition-delay: 270ms, 270ms, 0s, 0s, 0s; }

/* section titles: a line draws under them */
.sec-head h2 { position: relative; }
.sec-head h2::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 2.6rem; height: 2px; border-radius: 2px; background: var(--c1); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .8, .2, 1) .25s; }
.sec-head.in h2::after, .sec-head:not(.reveal) h2::after { transform: scaleX(1); }

/* reading progress */
.progress { position: fixed; left: 0; top: 0; z-index: 90; width: 100%; height: 2px; background: var(--c1); transform-origin: left; transform: scaleX(0); pointer-events: none; }

/* menu: current section */
.nav a { position: relative; }
.nav a.on { color: var(--c1); }
.nav a::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c1); transform: translateX(-50%) scale(0); transition: transform .3s; }
.nav a.on::after { transform: translateX(-50%) scale(1); }
.nav a:hover::after { background: var(--bg); }

/* magnetic buttons ease back */
.btn, .rail-btn, .icon-btn { transition: translate .35s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s, border-color .25s, box-shadow .2s, transform .2s, opacity .25s; }

@media (prefers-reduced-motion: reduce) {
  .js .name .ch, .js .hero .tagline, .js .hero .intro, .js .hero-actions, .js .hero-stack { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* logo */
.mark { gap: .6rem; }
.logo-word { display: block; white-space: nowrap; font-family: var(--display); font-size: .9rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--muted); padding-top: .15em; }
.logo-word b { font-weight: 800; color: var(--ink); }
@media (max-width: 400px) { .logo-word { font-size: .76rem; letter-spacing: .08em; } }

/* logo: P/d mark + name on one line */
.logo-mark { width: auto; height: 32px; flex: none; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.logo-mark .lk { fill: var(--ink); } .logo-mark .l1 { fill: var(--c1); }
.mark:hover .logo-mark { transform: rotate(-6deg); }

/* ================= premium layer =================
   Single hairline borders, layered soft shadows, white surfaces, quieter accents. */
:root { --hair: rgba(23, 24, 47, .1); --shadow-1: 0 1px 1px rgba(23, 24, 47, .04), 0 2px 6px rgba(23, 24, 47, .04), 0 18px 40px -22px rgba(23, 24, 47, .22); --shadow-2: 0 1px 1px rgba(23, 24, 47, .05), 0 6px 14px rgba(23, 24, 47, .06), 0 30px 60px -28px rgba(23, 24, 47, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hair: rgba(255, 255, 255, .09); --shadow-1: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7); --shadow-2: 0 1px 1px rgba(0, 0, 0, .3), 0 30px 60px -28px rgba(0, 0, 0, .8); } }
:root[data-theme="dark"] { --hair: rgba(255, 255, 255, .09); --shadow-1: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7); --shadow-2: 0 1px 1px rgba(0, 0, 0, .3), 0 30px 60px -28px rgba(0, 0, 0, .8); }

body { letter-spacing: .003em; }
.sec { padding-block: clamp(3.2rem, 2.4rem + 3.6vw, 6rem); border-top: 1px solid var(--hair); }

/* headings */
.eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: .6; }
.sec-head h2, .contact h2 { font-weight: 600; letter-spacing: .02em; }
.sec-head h2::after { display: none; }
.name { font-weight: 700; letter-spacing: -.01em; }

/* surfaces: one hairline + soft depth, no double outlines */
.panel, .shot, .pcard, .hero-stack .browser, .case-cover .float {
  outline: 0 !important; border: 1px solid var(--hair) !important; box-shadow: var(--shadow-1) !important;
}
.panel { background: var(--surface-2) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; padding: clamp(1.2rem, 1rem + 1vw, 2rem); }
.pcard:hover, .shot:hover { box-shadow: var(--shadow-2) !important; }
.panel:hover { box-shadow: var(--shadow-1) !important; }
.skills .panel { background: var(--surface-2) !important; }
.skills .ico { color: var(--c1); }
.row { border-bottom-style: solid; border-bottom-color: var(--hair); }
.edu { border-top-style: solid; border-top-color: var(--hair); }
.row a { border-color: var(--hair); }

/* contact */
.c-item { background: transparent; border: 1px solid var(--hair); }
.c-item:hover { background: var(--c1); color: var(--on1); transform: translateY(-2px); }
.copy { border-color: var(--hair); background: var(--surface-2); }

/* buttons: no hard offset shadow */
.btn { border-width: 1px; box-shadow: var(--shadow-1); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--bg); }
.btn::before { background: var(--c1); }
.btn.ghost { background: transparent; border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; }
.btn.ghost::before { background: var(--ink); }
.btn.ghost:hover { color: var(--bg); }
.icon-btn { border-width: 1px; border-color: var(--hair); }
.icon-btn:hover { background: var(--ink); color: var(--bg); transform: none; }
.chip { border-color: var(--hair); }
.tile-s:hover { box-shadow: var(--shadow-2); transform: translateY(-3px); }
.stats div { border-width: 1px; border-color: var(--hair); }
.roles span { border-width: 1px; border-color: var(--hair); }
.back { border-width: 1px; border-color: var(--hair); }

/* tools band: light and quiet */
.ticker { background: var(--surface-2); color: var(--muted); border-block: 1px solid var(--hair); }
.ticker li { opacity: 1; font-weight: 500; }
.ticker li + li, .ticker ul + ul li:first-child { border-left-color: var(--hair); }
.ticker li:hover { color: var(--ink); }

/* nav */
.bar-inner { box-shadow: var(--shadow-1); border: 1px solid var(--hair); }
.stats div { background: var(--surface-2); box-shadow: var(--shadow-1); }
.stats div:hover { background: var(--c1); color: var(--on1); transform: translateY(-2px); }
.tile-s { border-width: 1px; border-color: var(--hair); background: var(--surface-2); box-shadow: var(--shadow-1); }
.next .go { background: var(--c1); color: var(--on1); border-color: var(--c1); }
.case-card h1 { font-weight: 700; letter-spacing: .005em; }

/* one title per section: large italic serif in the accent blue */
.sec-head h2.title, .contact h2.title {
  margin: 0; font-family: var(--body); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 1.9rem + 2.8vw, 4.2rem); line-height: 1.05; color: var(--c1);
}
.sec-head h2.title::after { display: none; }
.sec-head { align-items: end; }

/* italics (titles, tagline, emphasis) in Noto Serif Display: clean high-contrast strokes in Latin and Greek */
:root { --italic: "Noto Serif Display", Georgia, serif; }
.sec-head h2.title, .contact h2.title, .tagline, em, figcaption, .note, .imprint, .hero-stack .mh-title { font-family: var(--italic); }
.sec-head h2.title, .contact h2.title { font-weight: 400; letter-spacing: -.015em; }
.tagline { font-size: calc(var(--step-1) * 1.05); }
.name em { font-family: var(--display); }

/* hero stack: fanned layout with less overlap; hovered piece comes to the front */
.hero-stack { aspect-ratio: 1.18; max-width: 600px; }
.hero-stack .paper { --by: -8deg; --bx: 3deg; --bz: -7deg; width: 36%; left: 0; top: 8%; }
.hero-stack .browser { --by: -6deg; --bx: 3deg; --bz: 1deg; width: 64%; left: 25%; top: 4%; }
.hero-stack .phone { --by: -6deg; --bx: 3deg; --bz: 5deg; width: 24%; right: 3%; bottom: 0; }
.hero-stack .mh-top, .hero-stack .mh-rule { white-space: nowrap; gap: .6em; }
.hero-stack .mh-rule span:first-child { overflow: hidden; text-overflow: ellipsis; }
.hero-stack .float { transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s, filter .4s; }
.hero-stack .float:hover { z-index: 10; --ty: -12px; box-shadow: 0 2px 4px rgba(23, 24, 47, .08), 0 40px 70px -26px rgba(23, 24, 47, .45); }
.hero-stack:hover .float:not(:hover) { filter: saturate(.85) brightness(.97); }

/* newspaper: neutral off-white stock, true-colour print, no dimming */
.hero-stack .paper {
  color: #1c1d2b;
  background:
    linear-gradient(90deg, transparent 49.2%, rgba(0, 0, 0, .05) 50%, rgba(255, 255, 255, .6) 50.6%, transparent 52%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .32 0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    #f6f6f4;
}
.hero-stack .paper::after { background: linear-gradient(225deg, var(--t1) 50%, #e6e6e2 50%, #d6d6d1 100%); }
.hero-stack .print img { mix-blend-mode: normal; filter: none; }
.hero-stack .mh-top, .hero-stack .mh-rule, .hero-stack .imprint { color: #555766; }
.hero-stack .cols i { background: repeating-linear-gradient(#8a8c99 0 1px, transparent 1px 3.5px); }
.hero-stack:hover .float:not(:hover) { filter: none; }

/* phone shows a real screenshot (it brings its own status bar) */
.hero-stack .phone .screen img { padding-top: 0; object-position: top; }
.hero-stack .island { top: 1.1%; height: 3.4%; width: 30%; }
.hero-stack .status { height: 100%; pointer-events: none; }
.hero-stack .views { bottom: 11%; }

/* project card media: clean, equal-height pieces */
.tile-imgs { gap: 4%; padding: 9% 7%; }
.tile-imgs img { height: 100%; width: auto; max-width: 31%; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(23, 24, 47, .35); }
.t-creative .tile-imgs img { aspect-ratio: 3 / 4; }
.t-creative .tile-imgs img:nth-child(3) { aspect-ratio: 3 / 4; object-position: center; }
.t-tiktok .tile-img { object-position: center top; }

/* experience: two equal-height cards, tighter about text */
.duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.duo .lead { font-size: .9rem; line-height: 1.7; }
.duo .edu { gap: .45rem; margin-top: var(--space-s); padding-top: var(--space-s); font-size: .84rem; }
.duo .edu b { line-height: 1.35; }
.duo .edu p > span { font-size: .8rem; }
.duo .edu .label .ico { display: none; }
.duo .row { padding: .6rem 0; }
.duo .row b { font-size: .92rem; }
.duo .row i { font-size: .8rem; }

/* cards get their own surface so they stand out from the section band (most visible in dark mode) */
:root { --card: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card: #23263f; --hair: rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] { --card: #23263f; --hair: rgba(255, 255, 255, .12); }
.panel, .skills .panel, .pcard, .stats div, .tile-s, .copy { background: var(--card) !important; }
.pcard-media, .tile-cover { background: color-mix(in srgb, var(--c1) 10%, var(--card)); }
.c-item { background: color-mix(in srgb, var(--card) 70%, transparent); }
.t-ku-leuven .tile-imgs img { max-width: 38%; object-fit: contain; box-shadow: 0 10px 22px -12px rgba(23, 24, 47, .35); }
.t-ku-leuven .tile-imgs { gap: 4%; }
.t-ku-leuven .tile-imgs img { margin-inline: 0; max-width: 31%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }

/* experience: compact rows (date above the role, full-width text) */
.duo .panel { padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.duo .panel h3 { margin-bottom: .5rem; }
.duo .row { grid-template-columns: 1fr; gap: .05rem; padding: .55rem 0; }
.duo .row:first-of-type { padding-top: 0; }
.duo .row .when { font-size: .74rem; padding-top: 0; letter-spacing: .02em; }
.duo .row b { font-size: .9rem; line-height: 1.3; }
.duo .row i { font-size: .78rem; line-height: 1.4; }
.duo .row a { margin-top: .3rem; font-size: .74rem; padding: .05rem .5rem; }
.duo .lead { font-size: .86rem; line-height: 1.65; }
.duo .edu { gap: .35rem; font-size: .82rem; }
.duo .edu b { font-size: .84rem; }

/* ================= 60 · 30 · 10 =================
   60  dominant  — neutral off-white page + white cards (dark: deep blue-black + slate cards)
   30  secondary — deep navy-indigo for text, titles, icons, labels and structure
   10  accent    — one vivid blue, reserved for calls to action and "you are here" cues */
:root { --ink: #1b1e45; --c1: #2b2f6e; --muted: #5d6080; --accent: #2557e8; --on-accent: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #e8e9f4; --c1: #c3c9f0; --muted: #a2a5c2; --accent: #7896ff; --on-accent: #0e1024; } }
:root[data-theme="dark"] { --ink: #e8e9f4; --c1: #c3c9f0; --muted: #a2a5c2; --accent: #7896ff; --on-accent: #0e1024; }

/* accent: CTAs only */
.btn:not(.ghost) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn:not(.ghost)::before { background: color-mix(in srgb, var(--accent) 80%, #000); }
.btn:not(.ghost):hover { color: var(--on-accent); }
.pcard-go, .row a, .pcard-go .arr { color: var(--accent); }
.row a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rail-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rail-bar i, .progress { background: var(--accent); }
.nav a.on { color: var(--accent); }
.nav a::after { background: var(--accent); }
.next .go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.c-item:hover { background: var(--accent); color: var(--on-accent); }
.copy:hover { border-color: var(--accent); color: var(--accent); }

/* secondary: everything structural stays in the navy family (no accent) */
.tile-meta, .tile-meta .ico, .skills .ico, .case-card .tile-top, .facts dt, .duo .panel h3 .ico { color: var(--c1); }
.stats div:hover, .tile-s:hover { background: var(--c1); color: var(--bg); }

/* phones and small tablets: stack the experience cards, tidy headers */
@media (max-width: 820px) {
  .duo { grid-template-columns: 1fr; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .sec-head .rail-nav { align-self: stretch; justify-content: flex-end; margin-top: -.4rem; }
}
@media (max-width: 480px) {
  .sec-head h2.title, .contact h2.title { font-size: 2.4rem; }
  .sec-head .btn { padding: .6rem 1rem; font-size: .85rem; }
  .duo .row a { white-space: nowrap; }
  .skills { gap: .7rem; }
}
@media (max-width: 480px) {
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills .panel { padding: .9rem; }
  .skills h3 { font-size: .9rem; } .skills p { font-size: .8rem; }
  .skills .ico { width: 1.6rem; height: 1.6rem; }
  .hero-actions { gap: .5rem; }
  .hero-actions .btn { padding: .65rem 1rem; font-size: .85rem; }
  .hero-actions .btn:not(.ghost) { flex: 1 0 100%; justify-content: center; }
  .hero-actions .btn.ghost { flex: 1; justify-content: center; }
}
@media (max-width: 820px) { .case-cover { display: none; } .case-card h1 { font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); } }

/* project cards: each image sits in a quiet mat with a thin frame */
.pcard-media { background: color-mix(in srgb, var(--c1) 6%, var(--card)); border-bottom: 1px solid var(--hair); }
.pcard-media .tile-img {
  inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border-radius: 10px;
  outline: 1px solid var(--hair); outline-offset: 0; box-shadow: 0 1px 2px rgba(23, 24, 47, .06), 0 10px 24px -14px rgba(23, 24, 47, .35);
}
.pcard:hover .pcard-media .tile-img { transform: scale(1.02); }
.tile-imgs { padding: 12px 7%; }

/* section titles: bold, upright sans (replaces the italic serif) */
.sec-head h2.title, .contact h2.title {
  font-family: var(--display); font-style: normal; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; font-size: clamp(2.3rem, 1.7rem + 2.4vw, 3.6rem);
}
@media (max-width: 820px) { .sec-head h2.title, .contact h2.title { font-size: 2.2rem; } }
.tagline .tg { white-space: nowrap; }
/* tagline: always one line, sized to the width of the hero text column */
.hero-text { container-type: inline-size; }
.hero .tagline { white-space: nowrap; font-size: min(1.1rem, 3.7cqi); }
.tagline .dot { padding-inline: .3em; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.case-body.solo { grid-template-columns: minmax(0, 1fr); }
.case-body.solo > * { max-width: 860px; }
.shot.video { cursor: default; overflow: hidden; }
.shot.video video { display: block; width: 100%; height: auto; }
.did-h { font-family: var(--display); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c1); margin: var(--space-m) 0 .6rem; }
.panel > h2 + .did-h { margin-top: .4rem; }
.sub > .gallery + .gallery { margin-top: var(--space-m); }
/* screen recording: not full width */
.g-video { max-width: 760px; margin-inline: auto; }
/* light page, dark page and phone side by side at the same height (columns follow each image's shape) */
.g-trio { grid-template-columns: 1.6fr 1.6fr .955fr; align-items: start; gap: clamp(.6rem, 2vw, var(--space-m)); }
.g-trio figcaption { font-size: .8rem; }
.sub > h2 { margin-bottom: var(--space-m); }
.sub > p + .gallery { margin-top: 0; }
/* tools strip: a label says what the logos are */
.ticker { display: flex; align-items: stretch; overflow: visible; }
.ticker-label { flex: none; display: flex; align-items: center; margin: 0; padding: .7rem 1.4rem .7rem max(var(--gutter), (100vw - 1160px) / 2 + var(--gutter));
  font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c1); white-space: nowrap;
  border-right: 1px solid var(--hair); background: var(--surface-2); position: relative; z-index: 1; }
.ticker-win { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.ticker:hover .ticker-track { animation-play-state: running; }
.ticker-win:hover .ticker-track { animation-play-state: paused; }
@media (max-width: 700px) {
  .ticker { flex-direction: column; }
  .ticker-label { justify-content: center; padding: .55rem var(--gutter) 0; border-right: 0; font-size: .68rem; }
  .ticker-win { -webkit-mask-image: none; mask-image: none; }
}
/* tools label: one short word, centred in its own box */
.ticker-label { justify-content: center; padding-inline: 1.6rem; min-width: 7.5rem; }
@media (max-width: 700px) { .ticker-label { min-width: 0; padding: .55rem var(--gutter) 0; } }
/* case hero: title on top, then the text box and the photo side by side at the same size and height */
.case-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-items: start; }
.case-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); align-items: stretch; }
.case-row > .panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.case-row .summary { font-size: clamp(.98rem, .92rem + .3vw, 1.08rem); line-height: 1.6; }
.case-row .facts dd { font-size: .84rem; }
.case-row .case-cover { perspective: none; display: flex; min-height: 0; }
.case-row .case-cover .float { flex: 1; display: flex; transform: none; outline: 0; }
.case-row .case-cover:hover .float { transform: none; }
.case-row .case-cover .float > img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.case-row .case-cover .float.pad img { max-height: 100%; }
.case-row .case-cover .tile-cover { flex: 1; min-height: 0; }
.case-card h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
@media (max-width: 820px) { .case-row { grid-template-columns: minmax(0, 1fr); } }
/* the text sets the height; the photo fills it */
.case-row .case-cover .float { position: relative; min-height: 260px; }
.case-row .case-cover .float > img { position: absolute; inset: 0; }
.case-row .case-cover .float.pad { padding: 0; }
.case-row .case-cover .float.pad img { position: static; }
@media (max-width: 820px) { .case-row .case-cover { display: none; } }
/* "What I did" spans the full width; the numbers sit underneath it */
.case-body, .case-body.solo { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
.case-body > *, .case-body.solo > * { max-width: none; }
.case-body .stats { grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr)); }
@media (max-width: 520px) { .case-body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* TikTok grid and Instagram reel: same height, columns follow each image's shape */
.g-tt { grid-template-columns: .751fr .461fr; align-items: start; max-width: 620px; margin-inline: auto; gap: clamp(.7rem, 2vw, var(--space-m)); }
.g-tt figcaption { font-size: .8rem; }
/* logo (square) and Instagram profile (wide): same height, columns follow each image's shape */
.g-logo { grid-template-columns: 1fr 2.01fr; align-items: start; gap: clamp(.7rem, 2vw, var(--space-m)); }
@media (max-width: 600px) { .g-logo { grid-template-columns: minmax(0, 1fr); } .g-logo figure:first-child { max-width: 240px; width: 100%; margin-inline: auto; } }
/* app outlines (CapCut, Edits): drawn with a stroke, never filled */
.ticker .logo.app, .ticker li:hover .logo.app { fill: none; stroke: currentColor; stroke-width: 3.6; }
.ticker li:hover .logo.app { color: var(--brand); }
/* Procreate: grey like the others, its own colours on hover */
.ticker .logo.pc .pc-base { fill: currentColor; transition: opacity .25s; }
.ticker .logo.pc .pc-img { opacity: 0; transition: opacity .25s; }
.ticker li:hover .logo.pc .pc-base { opacity: 0; }
.ticker li:hover .logo.pc .pc-img { opacity: 1; }
/* hero tagline: clean upright sans instead of the italic serif */
.hero .tagline { font-family: var(--display); font-style: normal; font-weight: 500; letter-spacing: .01em; color: var(--muted); font-size: min(1.05rem, 3.6cqi); }
.hero .tagline .dot { color: var(--c1); padding-inline: .45em; font-weight: 700; }
/* hero tagline: five fields on two fixed lines, sized to the column */
.hero .tagline { white-space: nowrap; line-height: 1.55; font-size: min(1.05rem, 3.5cqi); }
.hero .tagline .tl { display: block; }
.hero .tagline .dot { padding-inline: .45em; }
/* paired images: smaller, so they never show larger than their resolution allows */
.gallery.g-2 { max-width: 900px; margin-inline: auto; }
/* EP: the issue is narrower so it matches the calendar's height (columns follow each image's shape) */
.gallery.g-ep { grid-template-columns: .682fr .838fr; align-items: start; max-width: 820px; }
/* framed cover (EP portrait): a postcard — narrower column, the whole square photo, a Brussels stamp and postmark */
.case-row:has(.case-cover.framed) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.case-row .case-cover.framed { position: relative; padding: 6px 4px 4px; }
.case-row .case-cover.framed .float { position: relative; flex: 1; display: block; aspect-ratio: 4 / 5; min-height: 0; border-radius: 6px; overflow: visible;
  background: #fbf8f1; border: 0; padding: 14px 14px 0; box-shadow: 0 26px 40px -24px rgba(10, 20, 60, .55), 0 2px 8px rgba(10, 20, 60, .12); transform: rotate(1.2deg); }
.case-row .case-cover.framed:hover .float { transform: rotate(0deg); }
.case-row .case-cover.framed .float > img { position: static; inset: auto; transform: none; display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1; object-fit: cover; border: 0; border-radius: 2px; box-shadow: none; }
.case-row .case-cover.framed .stamp { position: absolute; top: -4px; right: -2px; width: 23%; max-width: 74px; transform: rotate(6deg); filter: drop-shadow(0 4px 6px rgba(10, 20, 60, .3)); z-index: 2; }
.case-row .case-cover.framed .stamp svg, .case-row .case-cover.framed .postmark svg { display: block; width: 100%; height: auto; }
.case-row .case-cover.framed .postmark { position: absolute; left: 9%; bottom: 3.5%; width: 46%; color: rgba(29, 63, 191, .55); transform: rotate(-8deg); z-index: 2; }
/* the bar is fixed (sticky breaks when a host page makes an ancestor the scroller); a spacer keeps the page below it */
body { overflow-x: clip; }
.bar { position: fixed; top: 0; left: 0; right: 0; }
.bar-space { display: none; }
/* the bar floats over the first (blue) section; that section gets the room underneath */
main > .sec:first-child { padding-top: calc(var(--space-xl, 4rem) + 36px); }
section[id] { scroll-margin-top: 76px; }
.gallery.g-kul { max-width: 560px; margin-inline: auto; }
/* side-by-side (KU Leuven): image left, "What I did" right, same height */
.side-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-m); align-items: center; }
.side-row > .gallery { max-width: none; margin: 0; }
.side-row > .panel { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 820px) { .side-row { grid-template-columns: minmax(0, 1fr); } }
/* side-by-side: the text box takes exactly the photo's height; the caption sits under the photo */
.side-row { align-items: stretch; row-gap: .5rem; }
.side-row > .gallery, .side-row > .gallery > figure { display: contents; }
.side-row .shot { grid-column: 1; grid-row: 1; align-self: start; }
.side-row figcaption { grid-column: 1; grid-row: 2; margin: 0; }
.side-row > .panel { grid-column: 2; grid-row: 1; align-self: stretch; justify-content: center; padding: clamp(1rem, 2vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.7rem); }
.side-row > .panel h2 { margin-bottom: .5rem; }
.side-row .did { gap: .35rem; }
.side-row .did li { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; line-height: 1.6; font-size: clamp(.86rem, .8rem + .25vw, .97rem); }
@media (max-width: 820px) { .side-row > .panel { grid-column: 1; grid-row: 3; } }
.gallery.g-gb { grid-template-columns: 1.191fr .877fr; align-items: start; max-width: 820px; margin-inline: auto; }
/* "See more" sits at the same spot on every card: bottom left */
.pcard { display: flex; flex-direction: column; }
.pcard-body { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.pcard-go { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
/* captions, notes and emphasis: the clean sans instead of the italic display serif (easier to read);
   the newspaper masthead in the hero keeps its serif as part of the illustration */
figcaption, .note { font-family: var(--display); font-style: normal; font-weight: 500; font-size: .84rem; line-height: 1.5; letter-spacing: .005em; color: var(--muted); }
em { font-family: inherit; font-style: italic; }
.name em { font-family: var(--display); font-style: normal; }
/* EP postcard: its height follows the text box (no more empty space above the paragraph) */
.case-row .case-cover.framed { min-height: 0; }
.case-row .case-cover.framed .float { position: absolute; inset: 6px 4px 4px; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 0; }
.case-row .case-cover.framed .float > img { width: auto; height: calc(100% - 70px); max-width: 100%; aspect-ratio: 1; flex: none; }
.case-row .case-cover.framed .float > img { height: calc(100% - 62px); }
.case-row .case-cover.framed .postmark { width: 32%; bottom: 3px; left: 7%; }
/* top bar: page links centred between the logo and the language/theme buttons */
@media (min-width: 761px) {
  .bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .bar-inner .mark { justify-self: start; }
  .bar-inner .nav { margin-left: 0; justify-self: center; }
  .bar-inner .tools { justify-self: end; }
}
/* EP postcard: as wide as the photo + its border (polaroid look), centred in the column; stamp and postmark follow its edges */
.case-row .case-cover.framed { container-type: size; }
.case-row .case-cover.framed > * { --pw: min(100cqh - 44px, 100cqw - 8px); }
.case-row .case-cover.framed .float { left: 0; right: 0; width: var(--pw); margin-inline: auto; }
.case-row .case-cover.framed .stamp { right: calc((100cqw - var(--pw)) / 2 - 10px); }
.case-row .case-cover.framed .postmark { left: calc((100cqw - var(--pw)) / 2 + 10px); width: calc(var(--pw) * .32); }
/* postmark: a touch bigger and sitting inside the cream strip */
.case-row .case-cover.framed > * { --pw: min(100cqh - 54px, 100cqw - 8px); }
.case-row .case-cover.framed .float > img { height: calc(100% - 72px); }
.case-row .case-cover.framed .postmark { width: calc(var(--pw) * .4); bottom: 10px; left: calc((100cqw - var(--pw)) / 2 + 18px); transform: rotate(-6deg); }
/* "In numbers" in its own box like "What I did": same padding, so headings and edges line up; more air between the boxes */
.case-body, .case-body.solo { gap: clamp(1.2rem, 2.4vw, 2rem); }
.case-body .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: clamp(.7rem, 1.4vw, 1rem); }
.stats-panel .stats div { padding: .9rem 1rem; }
@media (max-width: 520px) { .case-body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "What I did" as cards (Quantum): more air, each point readable on its own */
.did-grid { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(.7rem, 1.4vw, 1rem); }
.did-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--hair); }
.did-card > b { font-family: var(--display); font-size: .92rem; font-weight: 700; color: var(--c1); }
.did-card > span { font-size: .9rem; line-height: 1.65; }
.did-h { margin: clamp(1.2rem, 2.4vw, 1.8rem) 0 .8rem; }
.panel > h2 + .did-h { margin-top: .6rem; }
.did-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.did-card > span { display: block; }
.did-card > span::first-letter { text-transform: uppercase; }
@media (max-width: 700px) { .did-grid { grid-template-columns: minmax(0, 1fr); } }
/* every paragraph fully justified; build-time soft hyphens keep the word spacing even */
p.summary, .lead, .did li, .did-card > span, .note, .skills .panel p, .pcard-does, .sub > p, .duo .panel p {
  text-align: justify; text-justify: inter-word; hyphens: manual; -webkit-hyphens: manual; }
h1, h2, h3, .tagline, figcaption, .label { hyphens: none; -webkit-hyphens: none; }
.pcard-does { text-align: left; }
/* running text in the same simple sans as the headings (the serif stays only in the hero newspaper illustration) */
:root { --body: "Commissioner", "Segoe UI", Arial, sans-serif; }
body { line-height: 1.7; letter-spacing: .003em; }
p.summary, .lead, .did li, .did-card > span, .note, .skills .panel p, .sub > p, .pcard-does, .row i, .edu p > span { font-weight: 400; }
.duo .panel p.label { font-weight: 700; }
.facts dd, .row b, .edu b { font-weight: 600; }
/* Quantum website: three cards side by side (style, interactive features, technology) */
@media (min-width: 980px) { .did-grid:first-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.did-lead { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.did-pts { list-style: none; margin: .1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.did-pts li { position: relative; padding-left: 1rem; font-size: .88rem; line-height: 1.55; text-align: left; hyphens: manual; }
.did-pts li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--c1); }
@media (max-width: 520px) { .did-card > span { text-align: left; } }
/* Quantum website: the recording and the light/dark/phone row share one width, so their edges line up */
.gallery.g-video, .gallery.g-trio { max-width: 900px; margin-inline: auto; }
/* no group labels inside "What I did"; a little space still separates the website and logo cards */
.did-h { display: none; }
.did-grid + .did-grid { margin-top: clamp(.7rem, 1.4vw, 1rem); }
.panel > h2 + .did-h + .did-grid { margin-top: .2rem; }
/* business cards: shown like printed cards */
.gallery.g-cards .shot { border-radius: 10px; box-shadow: 0 22px 34px -20px rgba(10, 20, 60, .55); }
/* identity row in "What I did": logo + business cards (+ stickers later) side by side */
@media (min-width: 980px) { .did-grid:nth-of-type(2) { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.sub > h2, .sub > p { max-width: 900px; margin-inline: auto; }
/* Quantum: the website is one card (one deliverable) with a column per aspect; logo and business cards sit below as their own cards */
.did-grid.did-one { grid-template-columns: minmax(0, 1fr) !important; }
.did-wide > b { font-size: 1rem; }
.did-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); margin-top: .3rem; }
.did-col { min-width: 0; }
.did-col + .did-col { border-left: 1px solid var(--hair); padding-left: clamp(1rem, 2.4vw, 1.8rem); }
.did-col h4 { margin: 0 0 .5rem; font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.did-grid:nth-of-type(2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .did-cols { grid-template-columns: minmax(0, 1fr); } .did-col + .did-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 1rem; } }
@media (max-width: 700px) { .did-grid:nth-of-type(2) { grid-template-columns: minmax(0, 1fr); } }
/* Quantum: every gallery and section title spans the full content width, like the hero and the "My role" box */
.page-quantum .gallery, .page-quantum .gallery.g-video, .page-quantum .gallery.g-trio, .page-quantum .gallery.g-2,
.page-quantum .sub > h2, .page-quantum .sub > p { max-width: none; margin-inline: 0; }
.page-quantum .sub > .gallery + .gallery { margin-top: var(--space-m); }
/* "My role" cards: more air under each title and after the last bullet */
.did-card { padding: 1.15rem 1.2rem 1.35rem; gap: .7rem; }
.did-card > b { margin-bottom: .15rem; }
.did-col h4 { margin-bottom: .8rem; }
.did-pts { gap: .55rem; }
.did-cols { margin-top: .5rem; padding-bottom: .2rem; }

/* case hero cover: the whole image is shown (4:3), the text box matches its height; it lifts on hover */
.case-row .case-cover:not(.framed) .float { aspect-ratio: 4 / 3; min-height: 0; height: auto; flex: none; width: 100%; align-self: center;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.case-row .case-cover:not(.framed) .float > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.case-row .case-cover:not(.framed):hover .float { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--shadow-2); }
.case-row .case-cover:not(.framed):hover .float > img { transform: scale(1.03); }
.case-row .case-cover:not(.framed) { align-items: center; }
@media (prefers-reduced-motion: reduce) { .case-row .case-cover .float, .case-row .case-cover .float > img { transition: none; } }

/* summaries at the top of every project: a touch smaller */
.case-row .summary { font-size: clamp(.92rem, .88rem + .2vw, 1rem); line-height: 1.65; }
/* case hero: wider text box, narrower cover, so their heights match and the paragraph has no empty space above it */
.case-row:not(:has(.case-cover.framed)) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; }
.case-row:not(:has(.case-cover.framed)) > .panel { justify-content: center; align-self: stretch; }
/* case hero (v3): the text box sets the height with even padding; the cover fills that height */
.case-row:not(:has(.case-cover.framed)) { grid-template-columns: minmax(0, var(--txt, 1fr)) minmax(0, 1fr); align-items: stretch; }
.case-row:not(:has(.case-cover.framed)) > .panel { justify-content: center; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.2rem, 2.2vw, 1.7rem); }
.case-row .case-cover:not(.framed) { display: flex; align-items: stretch; }
.case-row .case-cover:not(.framed) .float { aspect-ratio: auto; height: auto; flex: 1; align-self: stretch; min-height: 0; }
@media (max-width: 820px) {
  .case-row:not(:has(.case-cover.framed)) { grid-template-columns: minmax(0, 1fr); }
  .case-row .case-cover:not(.framed) { display: none; }
}
/* equal halves: the cover keeps at least a 3:2 shape (little cropping); the text box matches its height */
.case-row .case-cover:not(.framed) .float { aspect-ratio: 3 / 2; height: auto; flex: 1; align-self: stretch; }
/* case hero: the text sits a bit higher in its box */
.case-row:not(:has(.case-cover.framed)) > .panel { justify-content: flex-start; padding-top: clamp(1.1rem, 2vw, 1.4rem); }
/* case hero: the line and the facts sit lower, at the bottom of the box; the summary stays at the top */
.case-row:not(:has(.case-cover.framed)) > .panel .facts { margin-top: auto; }
.case-row:not(:has(.case-cover.framed)) > .panel .summary { margin-bottom: 1rem; }
/* the dashed line sits exactly halfway between the summary and the facts */
.case-row > .panel .facts { border-top: 0; padding-top: 0; margin-top: 0; }
.case-row > .panel .summary { margin-bottom: 0; }
.facts-rule { border: 0; border-top: 1.5px dashed var(--line); margin: .9rem 0; width: 100%; }
.case-row:not(:has(.case-cover.framed)) > .panel { gap: .9rem; }
.case-row:not(:has(.case-cover.framed)) > .panel .facts-rule { margin: auto 0; }
.facts-rule { position: relative; top: -5px; }
/* square artwork (physics.solver logo): shown whole and smaller, centred on its own black, no light edge */
.case-row .case-cover.fit .float { background: #000; border-color: #000; }
.case-row .case-cover.fit .float > img { object-fit: contain; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.side-row > .panel { justify-content: flex-start; }
.side-row > .panel > .did { margin-block: auto; }

/* ================= palette 10 · 60-30-10 =================
   60  dominant  — periwinkle: page, section bands (lighter/deeper shades of the same hue), ticker, footer
   30  secondary — navy: text, titles, name, menu, structure
   10  accent    — coral-red: calls to action, "you are here", the rule under section titles
   The home hero keeps its own cream + pastel lava lamp. */
:root { --bg: #f3f4fc; --surface-2: #f3f4fc; --t1: #f3f4fc; --t5: #e3e6f6;
  --ink: #1b1e45; --c1: #1b1e45; --muted: #606280; --accent: #f04e55; --on-accent: #ffffff;
  --line: rgba(27, 30, 69, .14); --hair: rgba(27, 30, 69, .11);
  --band-a: #eef0fb; --band-b: #f8f9fd; --band-c: #e9ebf9; --band-strip: #e3e6f6; --hero-bg: #fcf8f3; --lava-o: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #13152b; --surface-2: #13152b; --t1: #13152b; --t5: #161933;
  --ink: #e8e9f4; --c1: #c3c9f0; --muted: #a2a5c2; --accent: #ff6b70; --on-accent: #14152b;
  --line: rgba(255, 255, 255, .12); --hair: rgba(255, 255, 255, .09);
  --band-a: #191c38; --band-b: #161933; --band-c: #1d2142; --band-strip: #161933; --hero-bg: #13152b; --lava-o: .78;
  --lava-1: #ff6f5e; --lava-2: #ff4f9a; --lava-3: #9b6bff; --lava-4: #2fd39a; --lava-5: #4f7dff; } }
:root[data-theme="dark"] {
  --bg: #13152b; --surface-2: #13152b; --t1: #13152b; --t5: #161933;
  --ink: #e8e9f4; --c1: #c3c9f0; --muted: #a2a5c2; --accent: #ff6b70; --on-accent: #14152b;
  --line: rgba(255, 255, 255, .12); --hair: rgba(255, 255, 255, .09);
  --band-a: #191c38; --band-b: #161933; --band-c: #1d2142; --band-strip: #161933; --hero-bg: #13152b; --lava-o: .78;
  --lava-1: #ff6f5e; --lava-2: #ff4f9a; --lava-3: #9b6bff; --lava-4: #2fd39a; --lava-5: #4f7dff; }

/* home hero: lava lamp over cream (pastel blobs that rise, fall, merge and split) */
.hero:has(.lava) { background: var(--hero-bg); }
.hero .wrap { position: relative; z-index: 2; }
.lava { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: var(--lava-o); }
.lava::after { content: ""; position: absolute; inset: 0; background: var(--noise); }
.lava svg { width: 100%; height: 100%; display: block; }
.lava .lb { transform-box: fill-box; transform-origin: center; animation: lava-up 11s ease-in-out infinite alternate; }
.lava .lb:nth-of-type(2) { animation-duration: 14s; animation-delay: -4s; }
.lava .lb:nth-of-type(3) { animation-duration: 9s; animation-delay: -2s; }
.lava .lb:nth-of-type(4) { animation-name: lava-down; animation-duration: 13s; }
.lava .lb:nth-of-type(5) { animation-name: lava-down; animation-duration: 16s; animation-delay: -6s; }
.lava .lb:nth-of-type(6) { animation-duration: 10s; animation-delay: -3s; }
@keyframes lava-up { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-230px) scale(.8); } 100% { transform: translateY(-120px) scale(1.15); } }
@keyframes lava-down { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(200px) scale(.85); } 100% { transform: translateY(90px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .lava .lb { animation-duration: 60s; } }
/* dark mode: deeper, saturated versions of the same five colours so the blobs glow instead of turning grey */
#lava-a stop:nth-child(1) { stop-color: var(--lava-1, #ffd0bd); } #lava-a stop:nth-child(2) { stop-color: var(--lava-2, #f9c6d3); }
#lava-a stop:nth-child(3) { stop-color: var(--lava-3, #d9ccff); } #lava-b stop:nth-child(1) { stop-color: var(--lava-4, #cfe9da); }
#lava-b stop:nth-child(2) { stop-color: var(--lava-5, #c9d7ff); }

/* sections stand apart: each band is its own shade of the dominant colour and slides up over the previous one
   like a sheet of paper, with rounded top corners and a soft shadow */
.sec.s2 { --band: var(--band-a); } .sec.s3 { --band: var(--band-b); } .sec.s4 { --band: var(--band-a); } .sec.s5 { --band: var(--band-c); }
.sec:not(.s1) { border-top: 0; border-radius: 44px 44px 0 0; box-shadow: 0 -14px 34px -22px rgba(27, 30, 69, .4); }
.sec + .sec:not(.s1) { margin-top: -44px; }
.ticker { background: var(--band-strip); border-block: 1px solid var(--line); }
footer { position: relative; background: var(--band-strip); }
.sec-head h2::after { background: var(--accent); width: 3.2rem; height: 4px; }
@media (max-width: 700px) {
  .sec:not(.s1) { border-radius: 28px 28px 0 0; }
  .sec + .sec:not(.s1) { margin-top: -28px; }
}

/* each project has its own tint of the dominant colour (60%): its hero lava, section bands and card;
   navy text (30%) and the coral-red accent (10%) stay the same everywhere */
.proj-quantum { --band-a: #fdf4ef; --band-b: #fefaf7; --band-c: #fceee5; --hero-bg: #fef7f4; --lava-1: #ffd0bd; --lava-2: #ffdcc2; --lava-3: #f9c6d3; --lava-4: #ffe7c4; --lava-5: #fcd5c4; }
.proj-european-parliament { --band-a: #f3f6fd; --band-b: #f9fafe; --band-c: #ecf0fc; --hero-bg: #f7f8fe; --lava-1: #c9d7ff; --lava-2: #b9c8f5; --lava-3: #d9ccff; --lava-4: #fff1b8; --lava-5: #c9d7ff; }
.proj-tiktok { --band-a: #fdf3f7; --band-b: #fef9fb; --band-c: #fcecf2; --hero-bg: #fef7f9; --lava-1: #f9c6d3; --lava-2: #ffc6e4; --lava-3: #d9ccff; --lava-4: #c6f1ff; --lava-5: #f9c6d3; }
.proj-global-bites { --band-a: #f3f9f5; --band-b: #f9fcfa; --band-c: #ebf6f0; --hero-bg: #f6fbf8; --lava-1: #cfe9da; --lava-2: #bfe8d4; --lava-3: #fff1b8; --lava-4: #ffd0bd; --lava-5: #cfe9da; }
.proj-creative { --band-a: #f7f4fd; --band-b: #fbfafe; --band-c: #f2eefc; --hero-bg: #f9f7fe; --lava-1: #d9ccff; --lava-2: #c9d7ff; --lava-3: #f9c6d3; --lava-4: #d9ccff; --lava-5: #cfe9da; }
.proj-ku-leuven { --band-a: #f2f9fc; --band-b: #f9fcfd; --band-c: #ebf5fa; --hero-bg: #f6fbfd; --lava-1: #c3e4f3; --lava-2: #c9d7ff; --lava-3: #cfe9da; --lava-4: #c9d7ff; --lava-5: #d9ccff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .proj-quantum { --band-a: #232234; --band-b: #1c1c30; --band-c: #2a2738; --hero-bg: #1e1e32; --lava-1: #ff753d; --lava-2: #ff903d; --lava-3: #ff3d6f; --lava-4: #ffb03d; --lava-5: #ff783d; } :root:not([data-theme="light"]) .proj-european-parliament { --band-a: #1f2239; --band-b: #1a1c33; --band-c: #25283f; --hero-bg: #1c1e35; --lava-1: #3d6fff; --lava-2: #3d6eff; --lava-3: #6f3dff; --lava-4: #ffd93d; --lava-5: #3d6fff; } :root:not([data-theme="light"]) .proj-tiktok { --band-a: #232137; --band-b: #1c1c32; --band-c: #2a263c; --hero-bg: #1e1e34; --lava-1: #ff3d6f; --lava-2: #ff3da3; --lava-3: #6f3dff; --lava-4: #3dcfff; --lava-5: #ff3d6f; } :root:not([data-theme="light"]) .proj-global-bites { --band-a: #1f2336; --band-b: #1a1d32; --band-c: #242a3b; --hero-bg: #1c1f33; --lava-1: #58e493; --lava-2: #4feea0; --lava-3: #ffd93d; --lava-4: #ff753d; --lava-5: #58e493; } :root:not([data-theme="light"]) .proj-creative { --band-a: #212239; --band-b: #1b1c33; --band-c: #26273f; --hero-bg: #1d1e35; --lava-1: #6f3dff; --lava-2: #3d6fff; --lava-3: #ff3d6f; --lava-4: #6f3dff; --lava-5: #58e493; } :root:not([data-theme="light"]) .proj-ku-leuven { --band-a: #1f2339; --band-b: #1a1d33; --band-c: #24293f; --hero-bg: #1c1f35; --lava-1: #3dc2ff; --lava-2: #3d6fff; --lava-3: #58e493; --lava-4: #3d6fff; --lava-5: #6f3dff; } }
:root[data-theme="dark"] .proj-quantum { --band-a: #232234; --band-b: #1c1c30; --band-c: #2a2738; --hero-bg: #1e1e32; --lava-1: #ff753d; --lava-2: #ff903d; --lava-3: #ff3d6f; --lava-4: #ffb03d; --lava-5: #ff783d; } :root[data-theme="dark"] .proj-european-parliament { --band-a: #1f2239; --band-b: #1a1c33; --band-c: #25283f; --hero-bg: #1c1e35; --lava-1: #3d6fff; --lava-2: #3d6eff; --lava-3: #6f3dff; --lava-4: #ffd93d; --lava-5: #3d6fff; } :root[data-theme="dark"] .proj-tiktok { --band-a: #232137; --band-b: #1c1c32; --band-c: #2a263c; --hero-bg: #1e1e34; --lava-1: #ff3d6f; --lava-2: #ff3da3; --lava-3: #6f3dff; --lava-4: #3dcfff; --lava-5: #ff3d6f; } :root[data-theme="dark"] .proj-global-bites { --band-a: #1f2336; --band-b: #1a1d32; --band-c: #242a3b; --hero-bg: #1c1f33; --lava-1: #58e493; --lava-2: #4feea0; --lava-3: #ffd93d; --lava-4: #ff753d; --lava-5: #58e493; } :root[data-theme="dark"] .proj-creative { --band-a: #212239; --band-b: #1b1c33; --band-c: #26273f; --hero-bg: #1d1e35; --lava-1: #6f3dff; --lava-2: #3d6fff; --lava-3: #ff3d6f; --lava-4: #6f3dff; --lava-5: #58e493; } :root[data-theme="dark"] .proj-ku-leuven { --band-a: #1f2339; --band-b: #1a1d33; --band-c: #24293f; --hero-bg: #1c1f35; --lava-1: #3dc2ff; --lava-2: #3d6fff; --lava-3: #58e493; --lava-4: #3d6fff; --lava-5: #6f3dff; }
/* case pages: the same lava, quieter — fewer, paler blobs that drift more slowly behind the glass panels */
.hero:has(.lava.soft) { background: var(--hero-bg); }
.lava.soft { opacity: calc(var(--lava-o) * .6); }
.lava.soft .lb { animation-duration: 18s; }
.lava.soft .lb:nth-of-type(2n) { animation-duration: 23s; }
.page-quantum .hero .blobs, .hero:has(.lava) .blobs { display: none; }
/* home cards carry their project's tint, so each project is recognisable before you open it */
.pcard.t-quantum { --tint: #f6c9ae; } .pcard.t-european-parliament { --tint: #c3d0f5; } .pcard.t-tiktok { --tint: #f5c3d5; }
.pcard.t-global-bites { --tint: #c2e3cf; } .pcard.t-creative { --tint: #d5c9f5; } .pcard.t-ku-leuven { --tint: #bfe0ef; }
.pcard .pcard-media { background: color-mix(in srgb, var(--tint, transparent) 45%, transparent); }
.pcard { border-top: 4px solid var(--tint, transparent); }
/* dark mode, case pages: the blobs stay in the background — the work is the focus there, not the effect */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lava.soft { opacity: .16; } }
:root[data-theme="dark"] .lava.soft { opacity: .16; }

/* experience: "About me" with the portrait cut-out inside it on the left, standing on the box's bottom edge;
   then experience and education side by side */
.me.duo { display: flex; flex-direction: column; gap: var(--space-m); }
.me-about { display: grid; grid-template-columns: clamp(130px, 14vw, 180px) minmax(0, 1fr); column-gap: var(--space-l); padding-bottom: 0 !important; overflow: hidden; }
.me-text { align-self: center; padding-bottom: clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.me-about .lead + .lead { margin-top: .6rem; }
.me-photo { margin: 0; align-self: end; position: relative; isolation: isolate; }
.me-photo img { position: relative; z-index: 1; width: 100%; }
/* a soft arch of colour behind the portrait, wider than the shoulders, with the head rising just above it */
.me-arch { position: absolute; z-index: 0; left: -7%; right: -7%; bottom: 0; top: 9%; border-radius: 999px 999px 0 0;
  background: linear-gradient(165deg, #ffd6c6 0%, #f8cbe0 48%, #d8cdff 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .me-arch { background: linear-gradient(165deg, #3a2c52 0%, #33295a 48%, #26305f 100%); } }
:root[data-theme="dark"] .me-arch { background: linear-gradient(165deg, #3a2c52 0%, #33295a 48%, #26305f 100%); }
.me-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-m); align-items: stretch; }
.me .row { grid-template-columns: 9.2rem minmax(0, 1fr); gap: .8rem; padding: .6rem 0; }
.me .row:first-of-type { padding-top: .15rem; }
.me .row .when { padding-top: .12rem; }
@media (max-width: 900px) { .me-pair { grid-template-columns: minmax(0, 1fr); } }
/* phones: text first, the portrait below it, still standing on the bottom edge */
@media (max-width: 640px) {
  .me-about { grid-template-columns: minmax(0, 1fr); }
  .me-photo { order: 2; width: 150px; margin-inline: auto; }
  .me-text { padding-bottom: var(--space-s); }
}
@media (max-width: 460px) { .me .row { grid-template-columns: 1fr; gap: .05rem; } }
/* education: a small "Erasmus" heading for the exchange semester and the summer school */
.me-sub { margin: .9rem 0 .1rem; padding-top: .7rem; border-top: 1.5px solid var(--line); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c1); }
.me-sub + .row { border-top: 0; }
.me-edu .row:has(+ .me-sub) { border-bottom: 0; }
/* Erasmus: its own box below everything, the two stays side by side */
.me-ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-l); }
.me-ex .row { border-bottom: 0; padding-top: .15rem; }
.me-ex .row + .row { border-left: 1px solid var(--hair); padding-left: var(--space-l); margin-left: calc(-1 * var(--space-l) / 2); }
@media (max-width: 900px) {
  .me-ex { grid-template-columns: minmax(0, 1fr); }
  .me-ex .row + .row { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--hair); padding-top: .6rem; }
}
/* Erasmus box: slimmer — dates sit above the titles so each stay gets the full column width */
.me-erasmus { padding-block: clamp(.9rem, .8rem + .5vw, 1.2rem) !important; }
.me-erasmus h3 { margin-bottom: .35rem; }
.me-ex .row { grid-template-columns: 1fr; gap: .1rem; padding: 0; align-content: start; }
.me-ex .row .when { padding-top: 0; }
.me-ex .row b { line-height: 1.3; }
/* Hannover only as wide as it needs, Tartu takes the rest so its long title breaks once at most */
.me-ex { grid-template-columns: max-content minmax(0, 1fr); column-gap: calc(var(--space-l) * 1.4); }
.me-ex .row + .row { padding-left: calc(var(--space-l) * 1.4); margin-left: calc(-1 * var(--space-l) * .7); }
.me-ex .row b { text-wrap: pretty; }
@media (max-width: 900px) { .me-ex { grid-template-columns: minmax(0, 1fr); } .me-ex .row + .row { padding-left: 0; margin-left: 0; } }
/* dark mode: the about / experience / education / Erasmus boxes a step lighter so they lift off the section */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #experience .panel { background: #2c3050 !important; border-color: rgba(255, 255, 255, .1); } }
:root[data-theme="dark"] #experience .panel { background: #2c3050 !important; border-color: rgba(255, 255, 255, .1); }
/* logo: the second "p" a shade lighter than the first, so the two letters read apart */
.logo-mark .lk { fill: var(--ink); } .logo-mark .l1 { fill: #4b55b0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-mark .l1 { fill: #9ba6f0; } }
:root[data-theme="dark"] .logo-mark .l1 { fill: #9ba6f0; }
/* skills: left-aligned lists — justified text opened big gaps in these short lines */
.skills .panel p { text-align: left; hyphens: none; -webkit-hyphens: none; word-spacing: normal; }

/* phones & tablets: the SVG "goo" filter is too heavy for mobile Safari (it stutters and streaks), so touch screens
   get a light version — soft gradient blobs moved only with transforms (GPU), same colours, same rise-and-fall */
.lava-lite { display: none; position: absolute; inset: 0; }
.lava-lite i { position: absolute; border-radius: 50%; will-change: transform; transform: translate3d(0, 0, 0);
  animation: lite-up 12s ease-in-out infinite alternate; }
.lava-lite i:nth-child(1) { width: 62vw; height: 62vw; right: -14vw; bottom: -18vw; background: radial-gradient(circle at 40% 40%, var(--lava-2, #f9c6d3) 0 52%, transparent 71%); }
.lava-lite i:nth-child(2) { width: 46vw; height: 46vw; right: 18vw; bottom: -20vw; background: radial-gradient(circle, var(--lava-1, #ffd0bd) 0 50%, transparent 70%); animation-duration: 15s; animation-delay: -5s; }
.lava-lite i:nth-child(3) { width: 40vw; height: 40vw; right: -8vw; top: -12vw; background: radial-gradient(circle, var(--lava-3, #d9ccff) 0 50%, transparent 70%); animation-name: lite-down; animation-duration: 14s; }
.lava-lite i:nth-child(4) { width: 24vw; height: 24vw; right: -6vw; top: 52%; background: radial-gradient(circle, var(--lava-1, #ffd0bd) 0 50%, transparent 70%); animation-duration: 10s; animation-delay: -3s; }
.lava-lite i:nth-child(5) { width: 54vw; height: 54vw; left: -22vw; bottom: -24vw; background: radial-gradient(circle, var(--lava-4, #cfe9da) 0 50%, transparent 70%); animation-duration: 13s; animation-delay: -6s; }
.lava-lite i:nth-child(6) { width: 34vw; height: 34vw; left: -12vw; top: -10vw; background: radial-gradient(circle, var(--lava-5, #c9d7ff) 0 50%, transparent 70%); animation-name: lite-down; animation-duration: 16s; }
@keyframes lite-up { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -26vh, 0) scale(.85); } 100% { transform: translate3d(0, -12vh, 0) scale(1.12); } }
@keyframes lite-down { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, 22vh, 0) scale(.88); } 100% { transform: translate3d(0, 10vh, 0) scale(1.08); } }
@media (hover: none), (max-width: 820px) {
  .lava svg { display: none; }
  .lava-lite { display: block; }
}
@media (prefers-reduced-motion: reduce) { .lava-lite i { animation-duration: 60s; } }
/* touch screens: crisp blobs (clean edge, soft gradient inside) like the desktop lava, not blurred spots */
.lava-lite i:nth-child(1) { background: linear-gradient(170deg, var(--lava-1, #ffd0bd), var(--lava-2, #f9c6d3) 55%, var(--lava-3, #d9ccff)); }
.lava-lite i:nth-child(2) { background: linear-gradient(170deg, var(--lava-2, #f9c6d3), var(--lava-1, #ffd0bd)); }
.lava-lite i:nth-child(3) { background: linear-gradient(170deg, var(--lava-1, #ffd0bd), var(--lava-3, #d9ccff)); }
.lava-lite i:nth-child(4) { background: linear-gradient(170deg, var(--lava-2, #f9c6d3), var(--lava-3, #d9ccff)); }
.lava-lite i:nth-child(5) { background: linear-gradient(170deg, var(--lava-4, #cfe9da), var(--lava-5, #c9d7ff)); }
.lava-lite i:nth-child(6) { background: linear-gradient(170deg, var(--lava-5, #c9d7ff), var(--lava-4, #cfe9da)); }
.lava-lite i:nth-child(1) { width: 52vw; height: 52vw; right: -12vw; bottom: -14vw; }
.lava-lite i:nth-child(2) { width: 36vw; height: 36vw; right: 26vw; bottom: -14vw; }
.lava-lite i:nth-child(3) { width: 30vw; height: 30vw; right: -10vw; top: -8vw; }
.lava-lite i:nth-child(4) { width: 18vw; height: 18vw; right: -4vw; top: 50%; }
.lava-lite i:nth-child(5) { width: 42vw; height: 42vw; left: -16vw; bottom: -16vw; }
.lava-lite i:nth-child(6) { width: 26vw; height: 26vw; left: -10vw; top: -8vw; }
.lava-lite i:nth-child(3), .lava-lite i:nth-child(6) { animation-name: lite-down-s; }
@keyframes lite-down-s { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, 7vh, 0) scale(.9); } 100% { transform: translate3d(0, 3vh, 0) scale(1.05); } }
/* education: the Communication Sciences courses as a small two-column bullet list */
.courses { list-style: none; margin: .45rem 0 .1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .2rem 1.2rem; }
.courses li { position: relative; padding-left: .9rem; font-size: .8rem; line-height: 1.4; color: var(--ink); }
.courses li::before { content: ""; position: absolute; left: 0; top: .5em; width: .38rem; height: .38rem; border-radius: 50%; background: var(--accent); }
@media (max-width: 460px) { .courses { grid-template-columns: minmax(0, 1fr); } }
.courses { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
/* contact: the call-to-action title is a sentence, so it sits a size smaller than the section titles */
.contact h2.title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.08; text-wrap: balance; max-width: 22ch; }
@media (max-width: 820px) { .contact h2.title { font-size: 1.9rem; } }

/* experience: a folder with three tabs (work / studies / Erasmus) below "About me"; items newest first */
.folder { display: grid; grid-template-columns: repeat(3, max-content) 1fr; }
.folder input { position: absolute; opacity: 0; pointer-events: none; }
.folder .k-work { --k: #f04e55; } .folder .k-study { --k: #4b55b0; } .folder .k-erasmus { --k: #2f9e74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .folder .k-work { --k: #ff6b70; } :root:not([data-theme="light"]) .folder .k-study { --k: #9ba6f0; } :root:not([data-theme="light"]) .folder .k-erasmus { --k: #4fd1a1; } }
:root[data-theme="dark"] .folder .k-work { --k: #ff6b70; } :root[data-theme="dark"] .folder .k-study { --k: #9ba6f0; } :root[data-theme="dark"] .folder .k-erasmus { --k: #4fd1a1; }
.fd-tab { cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem .9rem; margin-right: -.6rem; border-radius: 16px 16px 0 0;
  font: 800 .95rem/1 var(--display); color: var(--ink); background: color-mix(in srgb, var(--k) 16%, var(--card)); border: 1px solid var(--hair); border-bottom: 0;
  position: relative; transform: translateY(6px); transition: transform .25s; }
.fd-tab em { font-style: normal; font-size: .7rem; background: var(--k); color: #fff; border-radius: 999px; padding: .2rem .45rem; }
.fd-tab:hover { transform: translateY(2px); }
.folder input:focus-visible + .fd-tab { outline: 2px solid var(--accent); outline-offset: 2px; }
#fd-work:checked + .fd-tab, #fd-study:checked + .fd-tab, #fd-erasmus:checked + .fd-tab { transform: none; background: var(--card); z-index: 3; box-shadow: 0 -6px 16px -10px rgba(27, 30, 69, .3); }
.fd-page { display: none; grid-column: 1 / -1; position: relative; z-index: 2; background: var(--card); border: 1px solid var(--hair); border-top: 5px solid var(--k);
  border-radius: 0 20px 20px 20px; padding: 1.4rem 1.5rem; box-shadow: 0 14px 30px -20px rgba(27, 30, 69, .45); }
#fd-work:checked ~ .fd-p-work, #fd-study:checked ~ .fd-p-study, #fd-erasmus:checked ~ .fd-p-erasmus { display: block; }
.fd-item { display: grid; grid-template-columns: 9.4rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.fd-item:first-child { padding-top: 0; } .fd-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fd-when { justify-self: start; font: 800 .72rem/1.2 var(--display); color: var(--k); background: color-mix(in srgb, var(--k) 12%, transparent); padding: .35rem .6rem; border-radius: 8px; white-space: nowrap; }
.fd-item b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.fd-item i { display: block; font-style: normal; color: var(--muted); font-size: .84rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fd-page, :root:not([data-theme="light"]) .fd-tab:is(#fd-work:checked + *, #fd-study:checked + *, #fd-erasmus:checked + *) { background: #2c3050; } }
:root[data-theme="dark"] .fd-page, :root[data-theme="dark"] #fd-work:checked + .fd-tab, :root[data-theme="dark"] #fd-study:checked + .fd-tab, :root[data-theme="dark"] #fd-erasmus:checked + .fd-tab { background: #2c3050; }
@media (max-width: 640px) {
  .folder { grid-template-columns: repeat(3, auto); }
  .fd-tab { padding: .65rem .8rem .8rem; font-size: .82rem; gap: .35rem; }
  .fd-item { grid-template-columns: 1fr; gap: .35rem; }
  .fd-page { padding: 1.1rem; border-radius: 0 16px 16px 16px; }
}

/* about me: the portrait plus the three paragraphs as three coloured, slightly tilted cards */
.about { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.ab-photo { display: flex; align-items: flex-end; justify-content: center; background: var(--card); border: 1px solid var(--hair); border-radius: 24px; padding: 1.4rem 1rem 0; overflow: hidden; }
.ab-photo .me-photo { width: 100%; max-width: 210px; }
.ab0 { --ab: #ffd6c6; --abk: #e2574c; } .ab1 { --ab: #ddd3ff; --abk: #6a4be0; } .ab2 { --ab: #cdeedd; --abk: #2f9e74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab0 { --ab: #4a3040; --abk: #ff8a7a; } :root:not([data-theme="light"]) .ab1 { --ab: #3a3266; --abk: #b9a3ff; } :root:not([data-theme="light"]) .ab2 { --ab: #244a42; --abk: #5fe0b0; } :root:not([data-theme="light"]) .ab-photo { background: #2c3050; } }
:root[data-theme="dark"] .ab0 { --ab: #4a3040; --abk: #ff8a7a; } :root[data-theme="dark"] .ab1 { --ab: #3a3266; --abk: #b9a3ff; } :root[data-theme="dark"] .ab2 { --ab: #244a42; --abk: #5fe0b0; } :root[data-theme="dark"] .ab-photo { background: #2c3050; }
.ab-card { position: relative; background: var(--ab); border-radius: 24px; padding: 1.4rem 1.4rem 1.5rem; overflow: hidden; transform: rotate(-.8deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.ab-card.ab1 { transform: rotate(.8deg); }
.ab-card:hover { transform: translateY(-5px); box-shadow: 0 22px 36px -22px rgba(27, 30, 69, .5); }
.ab-num { position: absolute; right: 1rem; top: .4rem; font-family: var(--display); font-weight: 900; font-size: 4.2rem; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--abk) 45%, transparent); }
.ab-ico { width: 2.8rem; height: 2.8rem; border-radius: 14px; background: var(--card); display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(27, 30, 69, .35); }
.ab-ico svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: var(--abk); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ab-card h3 { margin: .9rem 0 .5rem; font: 800 1.2rem/1.15 var(--display); color: var(--ink); }
.ab-card p { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--ink); text-align: left; hyphens: manual; }
.about + .folder { margin-top: var(--space-l); }
@media (max-width: 980px) { .about { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .about { grid-template-columns: 1fr; } .ab-photo .me-photo { width: 170px; } .ab-card, .ab-card.ab1 { transform: none; } }
/* portrait box: the whole box in the pink-to-lilac gradient (no separate arch); card text fully justified */
.ab-photo { background: linear-gradient(165deg, #ffd6c6, #f8cbe0 48%, #d8cdff); border: 0; }
.ab-photo .me-arch { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-photo { background: linear-gradient(165deg, #3a2c52, #33295a 48%, #26305f); } }
:root[data-theme="dark"] .ab-photo { background: linear-gradient(165deg, #3a2c52, #33295a 48%, #26305f); }
.ab-card p { text-align: justify; text-align-last: left; }
.ab-card p + p { margin-top: .6rem; }
/* the portrait grows with the box (the cards set its height), as large as fits, standing on the bottom edge */
@media (min-width: 561px) {
  .ab-photo { position: relative; padding: 0; min-height: 320px; }
  .ab-photo .me-photo { position: absolute; left: 4%; right: 4%; bottom: 0; top: auto; height: 93%; width: auto; max-width: none; margin: 0; aspect-ratio: auto; }
  .ab-photo .me-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
}
/* core skills as small chips under the about-me cards (replaces the old skills section) */
.ab-chips { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.ab-chips li { font: 700 .82rem/1 var(--display); color: var(--ink); background: var(--card); border: 1px solid var(--hair); border-radius: 999px; padding: .55rem .95rem;
  box-shadow: 0 6px 14px -10px rgba(27, 30, 69, .35); transition: transform .25s, border-color .25s, color .25s; }
.ab-chips li::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); margin-right: .5rem; vertical-align: .08em; }
.ab-chips li:hover { transform: translateY(-2px); border-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-chips li { background: #2c3050; } }
:root[data-theme="dark"] .ab-chips li { background: #2c3050; }
.ab-chips + .folder { margin-top: var(--space-l); }
/* all skills, grouped: a label per category and its chips, in one light panel under the about-me cards */
.ab-chips { display: none; }
.ab-skills { margin-top: 1.2rem; background: var(--card); border: 1px solid var(--hair); border-radius: 22px; padding: 1.1rem 1.4rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; box-shadow: 0 12px 28px -20px rgba(27, 30, 69, .4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-skills { background: #2c3050; } }
:root[data-theme="dark"] .ab-skills { background: #2c3050; }
.sk-row { display: grid; gap: .45rem; }
.sk-h { display: flex; align-items: center; gap: .45rem; font: 800 .72rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sk-h .ico { width: 1rem; height: 1rem; color: var(--accent); }
.sk-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sk-row li { font: 700 .8rem/1 var(--display); color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); border: 1px solid var(--hair);
  border-radius: 999px; padding: .5rem .8rem; transition: transform .25s, border-color .25s; }
.sk-row li:hover { transform: translateY(-2px); border-color: var(--accent); }
.ab-skills + .folder { margin-top: var(--space-l); }
@media (max-width: 760px) { .ab-skills { grid-template-columns: 1fr; padding: 1rem; } }
/* skills: internal + external comms on the first row, the three tool groups below; chips never stretch */
.ab-skills { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.sk-row { grid-column: span 2; align-content: start; }
.sk-row.sk0, .sk-row.sk1 { grid-column: span 3; }
.sk-row ul { align-items: flex-start; }
.sk-row li { white-space: nowrap; }
@media (max-width: 980px) { .ab-skills { grid-template-columns: 1fr 1fr; } .sk-row, .sk-row.sk0, .sk-row.sk1 { grid-column: auto; } }
@media (max-width: 760px) { .ab-skills { grid-template-columns: 1fr; } }
.sk-row.sk0 { grid-column: 1 / -1; }
@media (max-width: 980px) { .sk-row.sk0 { grid-column: 1 / -1; } }

/* folder: four tabs; work / studies / Erasmus read as a horizontal timeline, oldest on the left */
.folder { grid-template-columns: repeat(4, max-content) 1fr; }
.folder .k-skills { --k: #6a4be0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .folder .k-skills { --k: #b9a3ff; } }
:root[data-theme="dark"] .folder .k-skills { --k: #b9a3ff; }
#fd-skills:checked ~ .fd-p-skills { display: block; }
#fd-skills:checked + .fd-tab { transform: none; background: var(--card); z-index: 3; box-shadow: 0 -6px 16px -10px rgba(27, 30, 69, .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #fd-skills:checked + .fd-tab { background: #2c3050; } }
:root[data-theme="dark"] #fd-skills:checked + .fd-tab { background: #2c3050; }
.fd-p-skills .fd-item { grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; }
.fd-p-skills .fd-when { padding: .45rem; } .fd-p-skills .fd-when .ico { width: 1.1rem; height: 1.1rem; display: block; }
@media (min-width: 821px) {
  #fd-work:checked ~ .fd-p-work, #fd-study:checked ~ .fd-p-study, #fd-erasmus:checked ~ .fd-p-erasmus { display: flex; gap: 0; padding-top: 2.4rem; overflow-x: auto; }
  :is(.fd-p-work, .fd-p-study, .fd-p-erasmus) .fd-item { flex: 1 1 0; min-width: 210px; grid-template-columns: 1fr; gap: .45rem; align-content: start;
    border: 0; border-top: 2px solid color-mix(in srgb, var(--k) 35%, transparent); padding: 1.4rem 1.2rem 0 0; position: relative; }
  :is(.fd-p-work, .fd-p-study, .fd-p-erasmus) .fd-item:first-child { padding-top: 1.4rem; }
  :is(.fd-p-work, .fd-p-study, .fd-p-erasmus) .fd-item::before { content: ""; position: absolute; top: -.56rem; left: 0; width: 1rem; height: 1rem; border-radius: 50%;
    background: var(--k); box-shadow: 0 0 0 4px var(--card); }
  :is(.fd-p-work, .fd-p-study, .fd-p-erasmus) .fd-item:last-child::after { content: ""; position: absolute; top: -.42rem; right: 0; border: .4rem solid transparent; border-left-color: color-mix(in srgb, var(--k) 45%, transparent); transform: translateX(100%); }
}
@media (max-width: 640px) {
  .folder { grid-template-columns: repeat(4, auto); }
  .fd-tab { padding: .6rem .55rem .75rem; font-size: .76rem; gap: .25rem; margin-right: -.35rem; }
  .fd-tab em { font-size: .6rem; padding: .12rem .32rem; }
}

/* ================= about me: one card — portrait on the left, five tabs on the right ================= */
.pf { display: grid; grid-template-columns: clamp(190px, 20vw, 250px) minmax(0, 1fr); background: var(--card); border: 1px solid var(--hair);
  border-radius: 26px; overflow: hidden; box-shadow: 0 16px 34px -24px rgba(27, 30, 69, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf { background: #2c3050; } }
:root[data-theme="dark"] .pf { background: #2c3050; }
.pf-ph { background: linear-gradient(165deg, #ffd6c6, #f8cbe0 48%, #d8cdff); display: flex; align-items: flex-end; justify-content: center; padding: 1.4rem 1rem 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pf-ph { background: linear-gradient(165deg, #3a2c52, #33295a 48%, #26305f); } }
:root[data-theme="dark"] .pf-ph { background: linear-gradient(165deg, #3a2c52, #33295a 48%, #26305f); }
.pf-ph img { width: 100%; max-width: 230px; display: block; }
.pf-tb { padding: 1.5rem 1.8rem 1.7rem; display: flex; flex-wrap: wrap; gap: .35rem; align-content: start; min-height: 360px; }
.pf-tb input { position: absolute; opacity: 0; pointer-events: none; }
.pf-tb label { cursor: pointer; font: 800 .82rem/1 var(--display); padding: .62rem .95rem; border-radius: 999px; color: var(--muted); border: 1px solid var(--hair); transition: background .2s, color .2s, border-color .2s; }
.pf-tb label:hover { border-color: var(--ink); color: var(--ink); }
.pf-tb input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pf-tb input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-pane { display: none; flex-basis: 100%; margin-top: 1.1rem; animation: pf-in .35s ease; }
#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; }
@keyframes pf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-about p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.75; text-align: justify; text-align-last: left; hyphens: manual; }
.pf-about p:last-child { margin-bottom: 0; }
.pf-rows, .pf-sk { list-style: none; margin: 0; padding: 0; }
.pf-rows > li { padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.pf-rows > li:first-child { padding-top: 0; } .pf-rows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-w { display: block; font: 700 .74rem/1.3 var(--display); color: var(--accent); margin-bottom: .15rem; }
.pf-rows b { display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.pf-rows i { display: block; font-style: normal; color: var(--muted); font-size: .84rem; }
.pf-rows .courses { margin-top: .4rem; }
.pf-sk { display: grid; gap: .75rem; }
.pf-sk li { font-size: .88rem; line-height: 1.6; color: var(--muted); }
.pf-sk b { color: var(--ink); font-weight: 800; margin-right: .3rem; }
@media (max-width: 760px) {
  .pf { grid-template-columns: 1fr; }
  .pf-ph img { max-width: 170px; }
  .pf-tb { padding: 1.1rem; min-height: 0; }
  .pf-tb label { padding: .55rem .75rem; font-size: .78rem; }
}

/* ================= motion & touch polish (Emil Kowalski's design-engineering rules) =================
   strong custom curves; UI motion under 300ms; press feedback on every pressable; hover motion only
   where a real pointer can hover; no grey tap flash; scroll reveals quicker; nothing scales from 0 */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }

/* touch: no tap flash, no 300ms tap delay, controls don't select their label on long-press */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
a, button, label, [role="button"], .pcard, .c-item { touch-action: manipulation; }
button, label, .btn, .icon-btn, .rail-btn, .copy, .pf-tb label, .nav a { -webkit-user-select: none; user-select: none; }

/* press feedback: everything pressable gives under the finger/cursor */
.btn, .icon-btn, .rail-btn, .copy, .pf-tb label, .c-item, .next, .pcard, .back {
  transition-property: transform, translate, background, color, border-color, box-shadow, opacity;
  transition-duration: 200ms; transition-timing-function: var(--ease-out); }
.btn:active, .icon-btn:active, .rail-btn:active:not(:disabled), .copy:active, .pf-tb label:active, .back:active { transform: scale(.97); translate: 0 0; transition-duration: 100ms; }
.pcard:active, .c-item:active, .next:active { transform: scale(.985); transition-duration: 100ms; }

/* hover motion: quicker (≤250ms) and only on devices that truly hover */
.pcard, .pcard .tile-img, .pcard-media .tile-img, .tile-imgs img, .hero-stack .float, .case-cover .float, .case-row .case-cover .float, .case-row .case-cover .float > img,
.ab-card, .logo-mark, .next .go, .stats div, .tile-s, .ticker .logo, .panel { transition-duration: 250ms; transition-timing-function: var(--ease-out); }
@media not ((hover: hover) and (pointer: fine)) {
  .ab-card:hover, .ab-chips li:hover, .btn:hover, .c-item:hover, .case-cover:hover .float, .case-row .case-cover:hover .float,
  .fd-tab:hover, .hero-stack .float:hover, .icon-btn:hover, .mark:hover .logo-mark, .next:hover .go, .panel:hover, .pcard:hover,
  .pcard:hover .pcard-go .arr, .pcard:hover .tile-img, .pcard:hover .tile-imgs img, .shot:hover, .sk-row li:hover, .stats div:hover,
  .ticker li:hover .logo, .tile-s:hover { transform: none; translate: none; box-shadow: none; }
  .btn:hover::before { transform: translateY(101%); }
  .case-cover:not(.framed):hover .float > img { transform: none; }
}

/* the nav's "you are here" dot grows from a small dot, not from nothing */
.nav a::after { transform: translateX(-50%) scale(.4); opacity: 0; transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.nav a.on::after { opacity: 1; }

/* scroll reveals: shorter travel, half the time */
.reveal { transform: translateY(14px); transition: opacity .5s var(--ease-out) var(--d, 0ms), transform .5s var(--ease-out) var(--d, 0ms); }
.rail.reveal .pcard { translate: 0 16px; transition: opacity .5s var(--ease-out), translate .5s var(--ease-out), transform 200ms var(--ease-out), box-shadow 250ms, border-color 250ms; }

/* about-me tabs: a short, interruptible fade-in (transition + @starting-style) instead of a keyframe that restarts */
.pf-pane { animation: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), filter 200ms var(--ease-out); }
@starting-style { .pf-pane { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
.pf-tb label { transition-duration: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .rail.reveal .pcard { transform: none; translate: none; transition: opacity .3s ease; }
  .pf-pane { transition: opacity .15s ease; }
  @starting-style { .pf-pane { transform: none; filter: none; } }
}

/* ================= accessibility & legibility pass (Impeccable detector) ================= */
/* dark mode: hover fills a step lighter so the dark label on them passes WCAG AA (was 4.2:1) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.icon-btn:hover, .row a:hover, .back:hover, .next .go) { background: #a9b4ee; } :root:not([data-theme="light"]) .btn::before { background: #a9b4ee; } }
:root[data-theme="dark"] :is(.icon-btn:hover, .row a:hover, .back:hover, .next .go) { background: #a9b4ee; } :root[data-theme="dark"] .btn::before { background: #a9b4ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { color: #17182f; } }
:root[data-theme="dark"] .btn:hover { color: #17182f; }
/* tools label: never below 12px */
.ticker-label { font-size: .75rem; }
@media (max-width: 700px) { .ticker-label { font-size: .75rem; } }
/* projects progress bar: driven by transform from JS, so only transform transitions */
.rail-bar i { margin-left: 0; transition: transform .2s var(--ease-out, ease-out); will-change: transform; }
/* role-column headings are now h3 (h2 → h3, no skipped level); same look as before */
.did-col h3 { margin: 0 0 .8rem; font-family: var(--display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
/* comfortable leading on multi-line titles */
.pcard h3, .pf-rows b, .row b, .did-card b { line-height: 1.35; }