/* patsoocloudlab.fr — shared styles (index.html, profil.html)
   Layout system: 82rem "planes" (r22) floating over a fixed animated ground, pill nav, word flow,
   depth rise. Charcoal + vivid green, Sora + JetBrains Mono. Single dark theme on purpose. */

:root {
  --ink: #0C0D0D;
  --coal: #141616;
  --card: #181A1A;
  --line: #262A29;
  --fg: #EDEFEB;
  --fg-soft: #C9CEC9;
  --mut: #98A09B;
  --green: #22E06B;
  --green-deep: #0E8F43;
  --green-tint: rgb(34 224 107 / .12);
  --paper: #F1F3EF;
  --paper-mut: #5B625E;
  --paper-line: #D9DDD6;
  --hair: rgb(255 255 255 / .08);
  --hair-strong: rgb(255 255 255 / .16);

  --e1: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px -1px rgb(0 0 0 / .25);
  --e2: 0 2px 4px rgb(0 0 0 / .25), 0 12px 28px -8px rgb(0 0 0 / .45);
  --e3: 0 4px 10px rgb(0 0 0 / .3), 0 26px 56px -14px rgb(0 0 0 / .55), 0 60px 110px -40px rgb(0 0 0 / .5);
  --edge: inset 0 1px 0 rgb(255 255 255 / .06);
  --r-md: 14px;
  --r-lg: 22px;

  --f: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 82rem;
  --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --t-xs: clamp(.75rem, .72rem + .15vw, .82rem);
  --t-sm: clamp(.875rem, .84rem + .18vw, .95rem);
  --t-base: clamp(1rem, .96rem + .22vw, 1.125rem);
  --t-lg: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-xl: clamp(1.5rem, 1.3rem + 1.1vw, 2.1rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 3.4vw, 4.4rem);
  --t-3xl: clamp(2.6rem, 1.8rem + 4.2vw, 4.8rem);

  --ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font-family: var(--f); font-size: var(--t-base); line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--green); color: var(--ink); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.g { color: var(--green); }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--green); color: var(--ink); padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600; }
.skip:focus { left: 0; }

/* ---- i18n: both languages in the markup, the inactive one is hidden ---- */
html[data-lang="en"] [data-lang="fr"],
html:not([data-lang="en"]) [data-lang="en"] { display: none !important; }

/* ---- section label ---- */
.label {
  font: 500 clamp(.82rem, .78rem + .2vw, .95rem)/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--green);
  display: inline-flex; gap: .7em; align-items: center;
}
.label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; }

/* ---- fixed animated ground ---- */
#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 100%, rgb(12 13 13 / .85), transparent 60%),
              linear-gradient(180deg, rgb(12 13 13 / .25), rgb(12 13 13 / .55));
}
main, footer, .bar { position: relative; z-index: 1; }

/* ---- buttons & links ---- */
.btn {
  display: inline-flex; align-items: center; gap: .55em; padding: .85em 1.35em; border-radius: 12px; border: 0;
  background: var(--green); color: var(--ink); font: 600 var(--t-sm) var(--f); white-space: nowrap; min-height: 44px; cursor: pointer;
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 8px 22px -8px rgb(34 224 107 / .55), 0 1px 2px rgb(0 0 0 / .3);
  transition: transform 140ms var(--ease), box-shadow 160ms var(--ease), filter 140ms;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 12px 30px -8px rgb(34 224 107 / .7), 0 1px 2px rgb(0 0 0 / .3); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--lg { padding: 1.05em 1.7em; font-size: var(--t-base); border-radius: 14px; }
.btn--ghost { background: rgb(255 255 255 / .06); color: var(--fg); box-shadow: var(--edge), 0 0 0 1px var(--hair-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: rgb(255 255 255 / .11); filter: none; box-shadow: var(--edge), 0 0 0 1px rgb(255 255 255 / .26); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.link { color: var(--green); font-weight: 500; border-bottom: 1px solid rgb(34 224 107 / .35); transition: border-color 140ms var(--ease); }
.link:hover { border-bottom-color: var(--green); }

/* ---- top bar & pill ---- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.4vw, 1.75rem) var(--gutter); }
.brand { font-weight: 700; letter-spacing: .04em; font-size: .95rem; display: flex; align-items: center; gap: .55rem; text-transform: uppercase; }
.brand i { width: 10px; height: 10px; border-radius: 2px; background: var(--green); box-shadow: 0 0 14px var(--green); display: block; }
.links { display: flex; align-items: center; gap: .25rem; }
.links > a:not(.btn) {
  font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mut);
  padding: .55rem .8rem; border-radius: 999px; transition: background-color 140ms, color 140ms;
}
.links > a:not(.btn):hover, .links > a[aria-current] { background: rgb(255 255 255 / .06); color: var(--fg); }
.links .btn { padding: .6em 1.05em; border-radius: 999px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; margin-left: .4rem; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-left: .4rem; }
.lang button {
  all: unset; cursor: pointer; font: 500 .7rem var(--mono); color: var(--mut); padding: .35rem .6rem; border-radius: 999px;
  min-width: 2.2rem; text-align: center; box-sizing: border-box;
}
.lang button[aria-pressed="true"] { background: var(--fg); color: var(--ink); }
.lang button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 860px) { .links > a:not(.btn) { display: none; } }

.pill {
  position: fixed; top: calc(.9rem + env(safe-area-inset-top, 0px)); left: 50%; z-index: 30; transform: translate(-50%, -160%);
  display: flex; align-items: center; gap: .2rem; padding: .35rem .4rem .35rem .7rem; border-radius: 999px;
  background: rgb(20 22 22 / .72); box-shadow: var(--edge), 0 0 0 1px var(--hair-strong), 0 10px 30px -12px rgb(0 0 0 / .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  transition: transform 560ms var(--ease), opacity 420ms var(--ease), visibility 0s linear 560ms;
  opacity: 0; visibility: hidden;
}
.pill.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.pill a:not(.btn):not(.brand) {
  font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mut);
  padding: .5rem .7rem; border-radius: 999px; white-space: nowrap; transition: background-color 140ms, color 140ms;
}
.pill a:not(.btn):not(.brand):hover { background: rgb(255 255 255 / .06); color: var(--fg); }
.pill .brand { margin-right: .4rem; font-size: .8rem; }
.pill .btn { padding: .5em .95em; border-radius: 999px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; min-height: 36px; }
@media (max-width: 640px) { .pill a:not(.btn):not(.brand) { display: none; } }

/* ---- hero ---- */
.hero { position: relative; min-height: min(88vh, 840px); display: grid; align-items: center; padding-inline: var(--gutter); padding-block: var(--s6) var(--s9); overflow: hidden; }
.hero .copy { position: relative; z-index: 2; max-width: min(46rem, 100%); }
.stats { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; }
.stats li { display: grid; gap: .2rem; }
.n { font-weight: 600; font-size: clamp(1.25rem, 1rem + 1.1vw, 1.85rem); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.n i { font-style: normal; color: var(--green); }
.stats small { color: var(--mut); font-size: .78rem; }
.hero h1 { font-size: clamp(2.7rem, 1.5rem + 6vw, 6.4rem); max-width: 11ch; line-height: .96; letter-spacing: -.045em; }
.sub { margin-top: var(--s5); font-size: var(--t-lg); line-height: 1.5; max-width: 38ch; color: var(--fg-soft); font-weight: 300; }
.sub b { font-weight: 500; color: var(--fg); }
.cta { margin-top: var(--s6); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.portrait { position: absolute; z-index: 1; right: clamp(1rem, 6vw, 7rem); bottom: 0; width: clamp(16rem, 29vw, 29rem); height: 90%; pointer-events: none; }
.portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; border-radius: 999px 999px 26px 26px;
  filter: grayscale(1) contrast(1.08) brightness(.9);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.plate { position: absolute; inset: 8% -10% -2% -10%; z-index: -1; border-radius: 999px 999px 26px 26px; background: radial-gradient(ellipse at 50% 35%, rgb(34 224 107 / .22), rgb(34 224 107 / .06) 55%, transparent 75%); }
.scrim { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: min(64vw, 60rem); background: linear-gradient(to right, rgb(12 13 13 / .8), rgb(12 13 13 / .45) 55%, transparent); pointer-events: none; }
.tagline { position: absolute; z-index: 2; right: clamp(1rem, 6vw, 7rem); bottom: var(--s6); font: 500 .7rem var(--mono); letter-spacing: .14em; color: #D6DBD7; display: flex; gap: .5rem; align-items: center; text-transform: uppercase; }
.tagline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 860px) {
  .hero { align-items: end; min-height: auto; padding-top: 46vh; }
  .portrait { width: clamp(12rem, 50vw, 17rem); height: 44vh; right: auto; left: 50%; translate: -50% 0; bottom: auto; top: 2vh; z-index: 0; }
  .scrim { width: 100%; top: auto; height: 72%; background: linear-gradient(to top, rgb(12 13 13 / .97) 40%, rgb(12 13 13 / .7) 62%, transparent); }
  .tagline { display: none; }
}

/* ---- motion ---- */
.fw { display: inline-block; animation: flow 820ms var(--ease) both; animation-delay: calc(var(--d, 0ms) + var(--i, 0) * 42ms); }
@keyframes flow { from { opacity: .001; transform: translate3d(0, .45em, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.blk { animation: blk 1000ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes blk { from { opacity: .001; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes depth { from { opacity: .001; transform: translate3d(0, 44px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .depth { animation: depth linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

/* ---- planes ---- */
.plane {
  position: relative; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto;
  background: rgb(20 22 22 / .82); border-radius: var(--r-lg);
  box-shadow: var(--edge), 0 0 0 1px var(--hair), var(--e2);
  padding: clamp(2.5rem, 5.5vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  scroll-margin-top: 5rem;
}
.plane + .plane, .logos + .plane { margin-top: clamp(1.5rem, 4vw, 3rem); }
.plane.paper { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px rgb(255 255 255 / .6), var(--e3); }
.plane.paper .label { color: var(--green-deep); }
.plane.paper .label::before { background: var(--green-deep); box-shadow: none; }
.sec-h { display: grid; gap: var(--s4); margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 50rem; }
.sec-h h2 { font-size: var(--t-2xl); }
.sec-h p { color: var(--mut); max-width: 52ch; }
.paper .sec-h p { color: var(--paper-mut); }

/* ---- "now" cards ---- */
.up { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 1000px) { .up { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .up { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--edge), 0 0 0 1px var(--hair), var(--e1);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--edge), 0 0 0 1px rgb(34 224 107 / .35), var(--e2); }
.card .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--green-tint); display: grid; place-items: center; color: var(--green); }
.card .ic svg { width: 20px; height: 20px; }
.card h3 { font-size: var(--t-lg); letter-spacing: -.025em; }
.card p { color: var(--mut); font-size: var(--t-sm); }
.card .k { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: var(--t-sm); padding-top: var(--s3); border-top: 1px solid var(--hair); }
.card .k b { font-weight: 600; font-variant-numeric: tabular-nums; }
.card .k span { color: var(--green); font-weight: 500; white-space: nowrap; }

/* ---- stack strip ---- */
.logos { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--maxw)); margin: clamp(2.5rem, 6vw, 5rem) auto; text-align: center; display: grid; gap: var(--s5); justify-items: center; }
.logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) clamp(1.5rem, 4vw, 3.25rem); }
.logos li { font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.05rem, 1rem + .6vw, 1.4rem); color: #6B736F; transition: color 160ms var(--ease); }
.logos li:hover { color: var(--fg); }

/* ---- expertise (paper) ---- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.svc {
  background: #fff; border: 1px solid var(--paper-line); border-radius: var(--r-md); padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s5); min-height: 250px; position: relative; overflow: hidden;
  transition: transform 220ms var(--ease), box-shadow 300ms var(--ease);
}
.svc:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgb(12 13 13 / .35); }
.svc .n2 { font: 500 .75rem var(--mono); color: var(--paper-mut); display: flex; justify-content: space-between; }
.svc .n2 svg { width: 20px; height: 20px; transition: transform .45s var(--ease), color .3s; }
.svc:hover .n2 svg { transform: rotate(-45deg); color: var(--green-deep); }
.svc h3 { font-size: var(--t-xl); margin-bottom: .5rem; }
.svc p { color: var(--paper-mut); font-size: var(--t-sm); max-width: 46ch; }
.proof { display: flex; flex-wrap: wrap; gap: 6px; }
.proof span { font: 500 .72rem var(--mono); padding: 5px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--paper-line); }
.proof span.kpi { background: #E3F7EC; border-color: #BFE9D0; color: #0B6B35; }
.svc::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.svc:hover::after { transform: scaleX(1); }

/* ---- projects: staggered rooms ---- */
.rooms { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
@media (max-width: 900px) { .rooms { grid-template-columns: minmax(0, 1fr); } }
.room { margin: 0; --lift: 0px; transform: translateY(var(--lift)); }
.room:nth-child(1) { --lift: -2vh; } .room:nth-child(2) { --lift: 4vh; } .room:nth-child(3) { --lift: -1vh; }
@media (max-width: 900px) { .room { --lift: 0px !important; } }
.frame { border-radius: 16px; overflow: hidden; box-shadow: var(--e3), 0 0 0 1px var(--hair); background: #0F1111; aspect-ratio: 4 / 3; position: relative; max-width: 100%; }
.room:nth-child(1) .frame { aspect-ratio: 3 / 2; }
.room:nth-child(2) .frame { aspect-ratio: 3 / 4; }
.room figcaption { margin-top: var(--s4); display: grid; gap: var(--s2); }
.room h3 { font-size: var(--t-xl); }
.room p { color: var(--mut); font-size: var(--t-sm); }
.room .go { font-size: var(--t-sm); margin-top: .2rem; justify-self: start; }
.tags { display: flex; gap: var(--s2); flex-wrap: wrap; }
.tags span { font: 500 .7rem var(--mono); letter-spacing: .04em; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--mut); }
.tags span.live { color: var(--green); border-color: rgb(34 224 107 / .35); }

.v-topo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-topo .e { stroke: #2C3231; stroke-width: 1.3; fill: none; }
.v-topo rect { fill: #151817; stroke: #2F3534; }
.v-topo rect.on { stroke: rgb(34 224 107 / .6); }
.v-topo text { font: 10px var(--mono); fill: #B9C0BB; }
.v-topo .p { fill: var(--green); filter: drop-shadow(0 0 4px var(--green)); }
.v-vidio { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 60%, rgb(34 224 107 / .14), transparent 70%), #0F1111; }
.v-vidio .ph { width: 56%; aspect-ratio: 9 / 18; border-radius: 26px; background: #050606; border: 2px solid #2E3433; padding: 7px; box-shadow: 0 30px 60px -20px #000; animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }
.v-vidio .sc {
  width: 100%; height: 100%; border-radius: 20px; overflow: hidden; position: relative;
  background: linear-gradient(115deg, transparent 46%, #D5DED2 46% 49%, transparent 49%),
              linear-gradient(25deg, transparent 60%, #D5DED2 60% 62%, transparent 62%),
              linear-gradient(160deg, transparent 30%, #CBE3D2 30% 41%, transparent 41%), #EEF2EB;
}
.v-vidio .pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--green-deep); animation: drop .7s var(--ease) both; }
.v-vidio .pin:nth-child(2) { animation-delay: .2s; } .v-vidio .pin:nth-child(3) { animation-delay: .4s; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) rotate(-45deg); } to { opacity: 1; transform: rotate(-45deg); } }
.v-vidio .sh { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 14px 14px 0 0; padding: 10px; display: grid; gap: 6px; }
.v-vidio .sh i { display: block; height: 7px; border-radius: 4px; background: #E2E6DF; }
.v-vidio .sh i:first-child { width: 60%; background: #0C0D0D; }
.v-vidio .pts { display: flex; justify-content: space-between; font: 600 8.5px var(--f); color: var(--green-deep); }
.v-domi { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 50%, #1A1E1D, #0F1111); }
.v-domi .tb { display: flex; gap: 6px; align-items: center; transform: rotate(-8deg); }
.v-domi .t { width: 36px; height: 72px; border-radius: 8px; background: #F3F4F1; display: grid; grid-template-rows: 1fr 1fr; padding: 6px; gap: 6px; box-shadow: 0 12px 24px -10px #000; animation: place .6s var(--ease) both; }
.v-domi .t.h { width: 72px; height: 36px; grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.v-domi .t i { border-radius: 3px; background: radial-gradient(circle, #0C0D0D 2.6px, transparent 3px) 0 0 / 11px 11px; }
.v-domi .t:nth-child(2) { animation-delay: .15s; } .v-domi .t:nth-child(3) { animation-delay: .3s; }
.v-domi .t.a { outline: 2px solid var(--green); outline-offset: 2px; }
@keyframes place { from { opacity: 0; transform: translateY(-18px) scale(1.08); } to { opacity: 1; transform: none; } }
.v-domi .hud { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; justify-content: space-between; font: 500 9.5px var(--mono); color: var(--mut); }
.v-domi .hud b { color: var(--green); font-weight: 500; }

/* ---- parcours ---- */
.bio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .bio { grid-template-columns: minmax(0, 1fr); } }
.bio h2 { font-size: var(--t-2xl); margin: var(--s4) 0 var(--s5); }
.bio .body { display: grid; gap: var(--s4); color: #BFC5C0; max-width: 58ch; font-weight: 300; }
.bio .body b { color: var(--fg); font-weight: 500; }
.bio .more { margin-top: var(--s5); display: flex; gap: var(--s5); flex-wrap: wrap; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.photos figure { margin: 0; display: grid; gap: var(--s2); }
.photos .ph { border-radius: 16px; overflow: hidden; box-shadow: var(--e2), 0 0 0 1px var(--hair); aspect-ratio: 3 / 4; background: #111; position: relative; }
.photos .ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05) brightness(.85); animation: kb 18s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kb { to { transform: scale(1.1) translate(-2%, 1%); } }
.photos figure:nth-child(2) { margin-top: var(--s8); }
.photos figcaption { font: 500 .7rem var(--mono); letter-spacing: .08em; color: var(--mut); text-transform: uppercase; }
.term { position: absolute; inset: 0; background: #070808; color: #C9D3CD; font: 500 10.5px/1.8 var(--mono); padding: 14px; overflow: hidden; }
.term b { color: var(--green); font-weight: 500; }
.term em { color: var(--green); font-style: normal; }
.term s { color: var(--mut); text-decoration: none; }

.xp { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; border-top: 1px solid var(--hair); }
.xp > li { display: grid; grid-template-columns: 5.5rem minmax(0, 1.1fr) minmax(0, 1.4fr); gap: var(--s3) var(--s6); padding-block: var(--s5); border-bottom: 1px solid var(--hair); align-items: start; transition: background-color .2s; }
.xp > li:hover { background: rgb(255 255 255 / .02); }
@media (max-width: 820px) { .xp > li { grid-template-columns: 4.5rem minmax(0, 1fr); } .xp .what { grid-column: 2; } }
.xp .y { font: 500 .82rem var(--mono); color: var(--mut); font-variant-numeric: tabular-nums; padding-top: .25rem; }
.xp > li.now .y { color: var(--green); }
.xp .who b { display: block; font-size: var(--t-lg); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.xp .who span { font-size: var(--t-sm); color: var(--mut); }
.xp .what { display: grid; gap: .6rem; font-size: var(--t-sm); color: #BFC5C0; }
.xp .what b { font-weight: 600; }
.xp .what .tags span { font-size: .66rem; }

.edu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) { .edu { grid-template-columns: minmax(0, 1fr); } }
.edu > div { background: var(--card); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--hair); padding: var(--s5); display: grid; gap: .35rem; align-content: start; }
.edu .label { margin-bottom: .4rem; font-size: .72rem; }
.edu b { font-weight: 600; font-size: var(--t-sm); }
.edu span:not(.label) { font-size: var(--t-xs); color: var(--mut); }

/* ---- contact + footer ---- */
.close { text-align: center; display: grid; justify-items: center; gap: var(--s5); overflow: hidden; }
.close::before { content: ""; position: absolute; width: 640px; height: 640px; left: 50%; top: -40%; translate: -50% 0; background: radial-gradient(circle, rgb(34 224 107 / .14), transparent 60%); pointer-events: none; }
.close h2 { font-size: var(--t-3xl); max-width: 14ch; position: relative; }
.close p { color: var(--mut); max-width: 44ch; font-size: var(--t-lg); line-height: 1.5; font-weight: 300; }
.close .cta { justify-content: center; margin-top: var(--s2); }
footer {
  width: min(100% - 2 * var(--gutter), var(--maxw)); margin: clamp(2.5rem, 6vw, 5rem) auto 0; padding-block: var(--s6) var(--s8);
  border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; font-size: var(--t-sm); color: var(--mut);
}
footer nav { display: flex; gap: var(--s5); flex-wrap: wrap; margin-left: auto; }
footer a:hover { color: var(--fg); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- OpenWebUI spacing & type scale (screen only: the CV print stays as it was)
   Spec: docs/superpowers/specs/2026-10-13-owui-spacing-design.md ---- */
@media screen {
  :root {
    --gutter: 20px; --maxw: 100%;
    --t-xs: 12px; --t-sm: 14px; --t-base: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 20px; --t-3xl: 24px;
    --fs-eye: 11px; --plane-pad: 40px 20px; --g-cards: 20px;
  }
  body { line-height: 1.625; }
  .plane { padding: var(--plane-pad); }
  .plane + .plane, .logos + .plane { margin-top: 24px; }
  .label { font-size: var(--fs-eye); letter-spacing: .18em; }
  .sec-h { gap: 0; max-width: 42rem; margin-bottom: 48px; }
  .sec-h .label { margin-bottom: 16px; }
  .sec-h h2 { font-size: var(--t-2xl); line-height: 1.25; }
  .sec-h p { margin-top: 24px; font-size: var(--t-base); }
  .btn { min-height: 0; padding: 14px 28px; font-size: 14px; line-height: 20px; }
  .btn--lg { padding: 14px 28px; font-size: 14px; min-width: 224px; justify-content: space-between; }
  .cta { margin-top: 40px; gap: 20px; }
  .grid2 { gap: var(--g-cards); }
  .close { gap: 0; }
  .close .label { margin-bottom: 16px; }
  .close h2 { font-size: var(--t-2xl); line-height: 1.25; max-width: 28rem; }
  .close p { margin-top: 24px; font-size: var(--t-base); line-height: 1.625; }
  .close .cta { margin-top: 40px; }
  footer { margin-top: 48px; padding-block: 40px 32px; gap: 8px 24px; font-size: 14px; }
  footer nav { gap: 8px 24px; }
}
@media screen and (min-width: 1024px) {
  :root { --gutter: 60px; --t-base: 16px; --t-lg: 18px; --t-xl: 24px; --t-2xl: 24px; --t-3xl: 36px; --plane-pad: 60px; --g-cards: 32px; }
  .plane + .plane, .logos + .plane { margin-top: 32px; }
  footer { padding-block: 48px 40px; }
}