/* =========================================================
   COULEURS (reprises du CV)
   ========================================================= */
:root{
  --bg:#fbf1e4;        /* crème */
  --bg-soft:#fde4d1;   /* pêche */
  --coral:#ee7b6b;     /* corail : cadres, titres */
  --coral-strong:#d9604f;
  --brick:#9a4d46;     /* tuiles projets */
  --brick-ink:#fff4ea;
  --ink:#3c2a22;       /* texte principal */
  --ink-soft:#6f5246;
  --screen:#3a2b26;    /* cadre des médias */
  --line:#f0cdb6;
  --on-coral:#fff8f1;
  --shadow:0 3px 0 rgba(60,42,34,.12);
}
:root[data-theme="dark"]{
  --bg:#1d1411;
  --bg-soft:#2b1d18;
  --coral:#f08776;
  --coral-strong:#ff9d8c;
  --brick:#5c2c27;
  --brick-ink:#fbeee3;
  --ink:#f6e8dc;
  --ink-soft:#c9a99a;
  --screen:#120c0a;
  --line:#43302a;
  --on-coral:#2a1510;
  --shadow:0 3px 0 rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  font-family:'Lexend',system-ui,sans-serif;
  font-weight:300;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  transition:background .3s,color .3s;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

/* Bilingue : on cache la langue inactive */
html[lang="fr"] .en, html[lang="en"] .fr{display:none !important}

.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.display{font-family:'Bungee',sans-serif;font-weight:400;letter-spacing:.5px;line-height:1.05}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.nav-logo{font-family:'Bungee';font-size:17px;text-decoration:none;color:var(--ink);margin-right:auto;white-space:nowrap}
.nav-logo span{color:var(--coral)}
.nav-links{display:flex;gap:24px;list-style:none}
.nav-links a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--coral-strong)}
.nav-tools{display:flex;align-items:center;gap:10px}
.lang-switch{display:flex;border:2px solid var(--coral);border-radius:999px;overflow:hidden}
.lang-switch button{padding:4px 11px;font-size:13px;font-weight:600;color:var(--coral-strong)}
.lang-switch button[aria-pressed="true"]{background:var(--coral);color:var(--on-coral)}
.icon-btn{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;transition:border-color .2s}
.icon-btn:hover{border-color:var(--coral)}
.icon-btn svg{width:18px;height:18px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  font-weight:600;font-size:15px;text-decoration:none;
  border:2px solid var(--coral);transition:transform .15s,background .2s,color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--coral);color:var(--on-coral)}
.btn-fill:hover{background:var(--coral-strong);border-color:var(--coral-strong)}
.btn-line{color:var(--coral-strong)}
.btn-line:hover{background:var(--bg-soft)}
.btn-sm{padding:7px 16px;font-size:14px}
.btn svg{width:16px;height:16px}

/* =========================================================
   HERO
   ========================================================= */
.hero{padding:72px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.ornament{display:flex;align-items:center;gap:14px;margin-bottom:26px;color:var(--coral)}
.ornament .spark{width:30px;height:30px;flex-shrink:0}
.ornament .bar{height:4px;background:var(--coral);border-radius:4px;flex:1;max-width:420px;transform-origin:left}
.ornament .diamond{width:12px;height:12px;background:var(--coral);transform:rotate(45deg);border-radius:2px;flex-shrink:0}
.hero h1{font-size:clamp(46px,7vw,92px);color:var(--ink)}
.hero .role{font-size:clamp(18px,2.3vw,28px);color:var(--coral);margin-top:10px}
.hero .bio{font-size:18px;max-width:540px;margin:28px 0 30px;color:var(--ink-soft)}
.hero .bio strong{color:var(--ink);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-soft);margin-bottom:22px}
.status i{width:10px;height:10px;border-radius:50%;background:#58b37a;box-shadow:0 0 0 4px color-mix(in srgb,#58b37a 25%,transparent)}

.photo-frame{position:relative;max-width:400px;margin-left:auto}
.photo-frame .frame{
  border:6px solid var(--coral);border-radius:34px 34px 34px 8px;
  padding:12px;background:var(--bg);position:relative;
}
.photo-frame img,.photo-frame .ph{width:100%;aspect-ratio:1/1.05;object-fit:cover;border-radius:22px 22px 22px 4px;background:var(--bg-soft)}
.photo-frame .tag{
  position:absolute;left:28px;bottom:-20px;
  background:var(--bg);padding:2px 14px;
  font-family:'Bungee';font-size:20px;color:var(--coral);
}
.facts{display:flex;gap:0;margin-top:46px;border:2px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg-soft)}
.facts div{flex:1;padding:14px 10px;text-align:center;font-size:13px;color:var(--ink-soft);line-height:1.3}
.facts div+div{border-left:2px solid var(--line)}
.facts b{display:block;font-family:'Bungee';font-weight:400;font-size:26px;color:var(--coral-strong);margin-bottom:2px}

/* =========================================================
   SECTIONS
   ========================================================= */
section{padding:56px 0 88px}
#projets .s-head{margin-bottom:22px}
.s-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.s-title{font-size:clamp(34px,4.6vw,56px);color:var(--coral)}
.s-sub{color:var(--ink-soft);max-width:520px;margin-top:8px}

/* Filtres */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{
  padding:7px 16px;border-radius:999px;border:2px solid var(--line);
  font-size:14px;font-weight:500;color:var(--ink-soft);background:var(--bg);
  transition:all .2s;
}
.filters button:hover{border-color:var(--coral)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* =========================================================
   CARTES PROJETS (tuiles du CV)
   ========================================================= */
.carousel{position:relative}
.grid{
  --gap:26px;--col:calc((100% - 2 * var(--gap)) / 3);
  display:flex;gap:var(--gap);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:6px 4px 22px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--coral) var(--bg-soft);
  overscroll-behavior-x:contain;
}
.grid::-webkit-scrollbar{height:8px}
.grid::-webkit-scrollbar-track{background:var(--bg-soft);border-radius:8px}
.grid::-webkit-scrollbar-thumb{background:var(--coral);border-radius:8px}
.grid > .card{flex:0 0 var(--col);scroll-snap-align:start}
.grid > .card.featured{flex-basis:calc(var(--col) * 2 + var(--gap))}
.c-nav{display:flex;align-items:center;gap:10px}
.c-nav button{width:46px;height:46px;border-radius:50%;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;transition:background .2s,opacity .2s,transform .15s}
.c-nav button:hover:not(:disabled){background:var(--coral-strong);transform:scale(1.06)}
.c-nav button:disabled{opacity:.35;cursor:default}
.c-nav svg{width:20px;height:20px}
.c-count{font-weight:600;font-size:14px;color:var(--ink-soft);min-width:58px;text-align:center}
.p-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.card{
  background:var(--brick);color:var(--brick-ink);
  border:6px solid var(--coral);border-radius:26px;
  padding:12px 12px 18px;
  text-align:left;display:flex;flex-direction:column;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
  box-shadow:var(--shadow);
}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 0 color-mix(in srgb,var(--coral) 45%,transparent)}
.card:focus-visible{outline-offset:4px}
.card .screen{
  background:var(--screen);border-radius:14px;padding:8px;
  position:relative;
}
.card .screen > img,.card .screen > video,.card .screen > .ph{
  width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#2a1d18;
}
.card.featured .screen > img,.card.featured .screen > video,.card.featured .screen > .ph{aspect-ratio:16/8.2}
.ribbon{
  position:absolute;top:16px;left:16px;z-index:2;
  background:var(--coral);color:var(--on-coral);
  font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;
  display:flex;align-items:center;gap:6px;
}
.ribbon svg{width:13px;height:13px}
.card-body{padding:16px 8px 0;display:flex;flex-direction:column;flex:1}
.card-title{font-size:20px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card-meta{font-size:13px;opacity:.8;margin:4px 0 10px;font-weight:400}
.card-desc{font-size:15px;line-height:1.55;opacity:.92;flex:1}
.card.featured .card-desc{font-size:16px;max-width:640px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--brick-ink) 14%,transparent)}
.more{font-size:14px;font-weight:600;color:var(--brick-ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(3px)}

/* Placeholder média */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#e9b9a6;text-align:center;padding:12px;
  background:repeating-linear-gradient(135deg,#3a2822 0 14px,#33231e 14px 28px) !important;
  font-size:13px;font-weight:500;
}
.ph svg{width:28px;height:28px;opacity:.8}
.ph code{font-size:11px;opacity:.7;overflow-wrap:anywhere;max-width:100%}

/* =========================================================
   MODALE PROJET
   ========================================================= */
dialog.project{
  border:6px solid var(--coral);border-radius:28px;
  background:var(--bg);color:var(--ink);
  width:min(980px,calc(100vw - 24px));max-height:calc(100vh - 32px);
  margin:auto;padding:0;overflow:hidden;
}
dialog.project::backdrop{background:rgba(40,22,16,.6);backdrop-filter:blur(3px)}
dialog.project[open]{animation:pop .25s ease}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.m-scroll{overflow-y:auto;max-height:calc(100vh - 44px);padding:30px 34px 34px}
.m-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.m-title{font-size:clamp(28px,4vw,42px);color:var(--ink)}
.m-tagline{color:var(--coral-strong);font-weight:500;margin-top:6px}
.m-close{width:42px;height:42px;border-radius:50%;background:var(--coral);color:var(--on-coral);display:grid;place-items:center;flex-shrink:0}
.m-close svg{width:20px;height:20px}
.m-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.m-facts span{background:var(--bg-soft);border:2px solid var(--line);border-radius:999px;padding:4px 13px;font-size:14px;font-weight:500}
.m-media{background:var(--screen);border-radius:18px;padding:10px}
.m-media > img,.m-media > video,.m-media > .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.m-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.m-gallery > *{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:var(--screen)}
.m-gallery .ph{font-size:12px}
.m-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;margin-top:30px}
.m-block + .m-block{margin-top:24px}
.m-block h3{font-family:'Bungee';font-weight:400;font-size:18px;color:var(--coral);margin-bottom:8px}
.m-block p,.m-block li{color:var(--ink-soft);font-size:16px}
.m-block ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.m-block li{padding-left:22px;position:relative}
.m-block li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;background:var(--coral);transform:rotate(45deg);border-radius:2px}
.m-block strong{color:var(--ink);font-weight:500}
.tools{display:flex;flex-wrap:wrap;gap:6px}
.tools span{font-size:13px;font-weight:500;padding:4px 11px;border-radius:999px;background:var(--brick);color:var(--brick-ink)}
.m-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.m-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:20px;border-top:2px solid var(--line)}
.m-nav button{font-weight:600;color:var(--coral-strong);display:flex;align-items:center;gap:8px;padding:6px 4px}
.m-nav svg{width:18px;height:18px}

/* =========================================================
   PARCOURS
   ========================================================= */
.path{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.path h3{font-family:'Bungee';font-weight:400;font-size:24px;color:var(--ink);margin-bottom:18px}
.timeline{list-style:none;position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:3px;background:var(--line);border-radius:3px}
.timeline li{position:relative;padding-bottom:26px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-29px;top:7px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:4px solid var(--coral)}
.t-when{font-size:14px;font-weight:600;color:var(--coral-strong)}
.t-what{font-size:19px;font-weight:600;color:var(--ink);margin:2px 0}
.t-where{font-size:15px;color:var(--ink-soft);font-weight:400}
.t-desc{font-size:15px;color:var(--ink-soft);margin-top:6px}
.years{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px}
.years li{font-size:14px;color:var(--ink-soft);padding:0 !important}
.years li::before{display:none}
.years b{color:var(--ink);font-weight:600;margin-right:6px}

/* =========================================================
   COMPÉTENCES
   ========================================================= */
.skills{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.sk-group + .sk-group{margin-top:26px}
.sk-group h3{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{border:2px solid var(--coral);border-radius:999px;padding:5px 14px;font-size:14px;font-weight:500;color:var(--ink)}
.pills.soft span{border-color:var(--line);background:var(--bg-soft)}
.qualities{display:flex;flex-direction:column;gap:14px}
.q{background:var(--bg-soft);border-radius:18px;padding:18px 20px;border-left:6px solid var(--coral)}
.q b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.q p{font-size:15px;color:var(--ink-soft)}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-box{
  border:6px solid var(--coral);border-radius:34px;padding:48px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
  background:var(--bg-soft);
}
.contact-box .s-title{margin-bottom:14px}
.contact-box p{color:var(--ink-soft);font-size:17px;max-width:460px}
.mail{display:inline-block;margin-top:22px;font-size:clamp(17px,2.2vw,22px);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:3px solid var(--coral);word-break:break-all}
.mail:hover{color:var(--coral-strong)}
.c-links{display:flex;flex-direction:column;gap:10px}
.c-link{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--bg);border:2px solid var(--line);border-radius:16px;padding:14px 18px;
  transition:border-color .2s,transform .15s;
}
.c-link:hover{border-color:var(--coral);transform:translateX(4px)}
.c-link svg{width:22px;height:22px;flex-shrink:0;color:var(--coral-strong)}
.c-link small{display:block;font-size:12px;color:var(--ink-soft)}
.c-link span{font-weight:500}

footer{padding:34px 0 44px;color:var(--ink-soft);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* =========================================================
   FREELANCE (sites clients)
   ========================================================= */
.freelance{background:var(--bg-soft);border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:80px 0 96px;margin:24px 0 40px}
.fl-head{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}
.fl-lead{font-size:18px;color:var(--ink-soft);max-width:560px;margin-top:10px}
.fl-lead strong{color:var(--ink);font-weight:500}
.fl-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:st;border:2px solid var(--coral);border-radius:20px;overflow:hidden;background:var(--bg)}
.fl-steps li{padding:14px 12px;font-size:13px;color:var(--ink-soft);line-height:1.35;counter-increment:st;position:relative}
.fl-steps li+li{border-left:2px solid var(--line)}
.fl-steps li::before{content:counter(st);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--coral);color:var(--on-coral);font-weight:600;font-size:12px;margin-bottom:8px}
.fl-steps b{display:block;color:var(--ink);font-weight:600;font-size:15px}

.case{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;margin-bottom:64px}
.case-alt{grid-template-columns:1fr 1.15fr}
.case-alt .browser{order:2}
.browser{border:6px solid var(--coral);border-radius:22px;background:var(--screen);overflow:hidden;box-shadow:12px 12px 0 color-mix(in srgb,var(--coral) 30%,transparent)}
.case-alt .browser{box-shadow:-12px 12px 0 color-mix(in srgb,var(--coral) 30%,transparent)}
.b-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bg)}
.b-bar i{width:11px;height:11px;border-radius:50%;background:var(--line)}
.b-bar i:first-child{background:var(--coral)}
.b-url{margin-left:10px;flex:1;background:var(--bg-soft);border-radius:999px;padding:3px 14px;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-view > img,.b-view > .ph{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.case-top{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.case-status,.case-kind{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:4px 12px;border-radius:999px}
.case-status{background:var(--bg);color:var(--ink);border:2px solid var(--line)}
.case-status i{width:8px;height:8px;border-radius:50%;background:#e2a33b}
.case-kind{background:var(--brick);color:var(--brick-ink)}
.case-title{font-family:'Bungee';font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.05;color:var(--ink)}
.case-client{color:var(--coral-strong);font-weight:500;margin:6px 0 18px}
.case-grid{display:flex;flex-direction:column;gap:16px}
.case-grid dt{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:4px}
.case-grid dd{color:var(--ink-soft);font-size:15px}
.case-grid ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.case-grid li{padding-left:20px;position:relative}
.case-grid li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;background:var(--coral);transform:rotate(45deg);border-radius:2px}
.case-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.case-tools span{font-size:13px;font-weight:500;padding:4px 11px;border-radius:999px;border:2px solid var(--coral);color:var(--ink)}
.fl-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--brick);color:var(--brick-ink);border:6px solid var(--coral);border-radius:26px;padding:24px 30px}
.fl-cta p{font-size:16px;opacity:.95}
.fl-cta b{display:block;font-size:20px;font-weight:600}
@media (max-width:1000px){
  .fl-head,.case,.case-alt{grid-template-columns:1fr;gap:28px}
  .case-alt .browser{order:0}
}
@media (max-width:760px){
  .freelance{padding:56px 0 64px}
  .fl-steps{grid-template-columns:1fr 1fr}
  .fl-steps li:nth-child(3){border-left:0}
  .fl-steps li:nth-child(n+3){border-top:2px solid var(--line)}
  .browser,.case-alt .browser{box-shadow:6px 6px 0 color-mix(in srgb,var(--coral) 30%,transparent)}
  .fl-cta{padding:20px}
  .case{margin-bottom:48px}
}

/* =========================================================
   ANIMATION D'ENTRÉE (une seule, sur le hero)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .ornament .bar{animation:draw .9s .1s cubic-bezier(.2,.8,.2,1) both}
  .ornament .spark{animation:spin-in .9s both}
  .hero h1,.hero .role,.hero .bio,.hero-cta,.status{animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
  .status{animation-delay:.05s}.hero h1{animation-delay:.12s}.hero .role{animation-delay:.22s}
  .hero .bio{animation-delay:.32s}.hero-cta{animation-delay:.42s}
  .photo-frame{animation:rise .8s .25s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin-in{from{transform:rotate(-180deg) scale(0)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .grid{--col:calc((100% - var(--gap)) / 2)}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .photo-frame{margin:0 auto}
  .nav-links{display:none}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .grid{--gap:16px;--col:84%}
  .grid > .card.featured{flex-basis:84%}
  .c-nav button{width:40px;height:40px}
  .card.featured .screen > img,.card.featured .screen > video,.card.featured .screen > .ph{aspect-ratio:16/10}
  .path,.skills,.m-cols,.contact-box{grid-template-columns:1fr}
  .contact-box{padding:28px 20px;border-radius:26px}
  .m-scroll{padding:22px 18px 26px}
  .m-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .m-gallery .ph code,.m-gallery .ph span{display:none}
  .nav .wrap{gap:12px}
  .nav-cv-label{display:none}
  .hero{padding:44px 0 72px}
  .hero .bio{font-size:16px}
  .facts b{font-size:21px}
}