:root{
  --bg:#F2F0EB;
  --ink:#12120F;
  --ink-2:#575550;
  --ink-3:#8A8781;
  --line:rgba(18,18,15,.13);
  --dots:.55;
  /* même courbe que le EASE de Hero.js — le CSS et Framer Motion respirent pareil */
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"]{
  --bg:#0E0E0C; --ink:#F2F0EB; --ink-2:#8D8A83; --ink-3:#5C5A55;
  --line:rgba(242,240,235,.14); --dots:.30;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100svh;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .5s,color .5s;
}

/* ---- mouchetis : confiné à la zone Andrew (hero + about + work), pas sur
   Scrollvibe. .mono-zone enveloppe ces sections, les points la couvrent. ---- */
.mono-zone{position:relative}
.dots{
  position:absolute;inset:0;z-index:9;pointer-events:none;opacity:var(--dots);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='%23121210'%3E%3Ccircle cx='14' cy='31' r='1.1'/%3E%3Ccircle cx='68' cy='12' r='.9'/%3E%3Ccircle cx='120' cy='47' r='1.2'/%3E%3Ccircle cx='177' cy='22' r='.8'/%3E%3Ccircle cx='231' cy='58' r='1.1'/%3E%3Ccircle cx='40' cy='88' r='1'/%3E%3Ccircle cx='96' cy='104' r='1.3'/%3E%3Ccircle cx='152' cy='79' r='.9'/%3E%3Ccircle cx='205' cy='113' r='1'/%3E%3Ccircle cx='250' cy='95' r='.8'/%3E%3Ccircle cx='22' cy='140' r='1.2'/%3E%3Ccircle cx='75' cy='166' r='.9'/%3E%3Ccircle cx='131' cy='133' r='1'/%3E%3Ccircle cx='188' cy='158' r='1.2'/%3E%3Ccircle cx='240' cy='176' r='.9'/%3E%3Ccircle cx='10' cy='204' r='1'/%3E%3Ccircle cx='58' cy='226' r='1.2'/%3E%3Ccircle cx='110' cy='196' r='.8'/%3E%3Ccircle cx='166' cy='240' r='1.1'/%3E%3Ccircle cx='219' cy='212' r='.9'/%3E%3Ccircle cx='142' cy='255' r='1'/%3E%3Ccircle cx='36' cy='60' r='.7'/%3E%3Ccircle cx='198' cy='66' r='.7'/%3E%3Ccircle cx='84' cy='140' r='.7'/%3E%3C/g%3E%3C/svg%3E");
}
/* ---- fond génératif de 0 et 1 (canvas) : couche faible sous le contenu ---- */
.binary{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---- « Entre les lignes » : 4 mini-IDE (scénario → correction → validation) ---- */
.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
@media (max-width:900px){ .lab-grid{grid-template-columns:1fr} }
.lab-card{
  background:#EDEDEC;border-radius:14px;padding:1.9rem 1.9rem 1.6rem;
  display:flex;flex-direction:column;gap:.9rem;
  border:1px solid transparent;transition:border-color .35s,box-shadow .35s;
}
.lab-card.is-ok{border-color:#37b87c;box-shadow:0 0 0 3px rgba(55,184,124,.16)}
.lab-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#17795a;font-weight:700;font-size:1rem;letter-spacing:0;
}
.lab-q{margin:0;font-size:1.02rem;font-weight:700;line-height:1.4;color:#151515;max-width:44ch}

/* l'éditeur */
.ide{background:#14161c;border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.07)}
.ide-bar{
  display:flex;align-items:center;gap:.42rem;
  padding:.5rem .75rem;background:#1b1e26;border-bottom:1px solid rgba(255,255,255,.06);
}
.ide-bar i{width:9px;height:9px;border-radius:50%;background:#3a3f4b;display:block}
.ide-bar i:first-child{background:#e0626b}
.ide-bar i:nth-child(2){background:#e3b341}
.ide-bar i:nth-child(3){background:#3fb950}
.ide-bar span{
  margin-left:.5rem;font-family:ui-monospace,Menlo,monospace;
  font-size:.72rem;color:#767d8c;letter-spacing:.02em;
}
.ide-body{display:flex;padding:.85rem .9rem}
.ide-gutter{
  display:flex;flex-direction:column;flex:0 0 auto;padding-right:.85rem;
  border-right:1px solid rgba(255,255,255,.06);margin-right:.85rem;
  user-select:none;
}
.ide-gutter span{
  font:500 13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#464c59;text-align:right;min-width:1.2em;
}
.ide-edit{position:relative;flex:1 1 auto;min-width:0}
/* le <pre> coloré et le <textarea> doivent se superposer AU PIXEL :
   mêmes métriques de texte, texte du textarea transparent, caret visible. */
.ide-hl,.ide-ta{
  margin:0;padding:0;border:0;
  font:500 13px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0;tab-size:2;white-space:pre;word-break:normal;
}
.ide-hl{color:#d5d9e0;pointer-events:none;overflow-x:auto}
.ide-ta{
  position:absolute;inset:0;width:100%;height:100%;
  background:transparent;color:transparent;caret-color:#5ee6a3;
  resize:none;outline:none;overflow:hidden;
}
.tk-kw{color:#c792ea}
.tk-str{color:#a5e075}
.tk-com{color:#5f6673;font-style:italic}
.tk-num{color:#f78c6c}

.lab-foot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.1rem}
.lab-run{
  border:0;border-radius:999px;padding:.6rem 1.25rem;cursor:pointer;
  background:#151515;color:#F2F0EB;font:inherit;font-size:.82rem;font-weight:700;
  transition:transform .2s,opacity .2s;
}
.lab-run:hover{transform:translateY(-2px)}
.lab-run:disabled{opacity:.5;cursor:default;transform:none}
.lab-card.is-ok .lab-run{background:#37b87c}
.lab-msg{margin:0;font-size:.82rem;font-weight:600;line-height:1.35}
.lab-msg.ok{color:#1d8a5c}
.lab-msg.ko{color:#8a5a1d}

/* ---- Spécialités : sphère 3D de skills qui tourne en continu (positions en JS) ---- */
.spec-sphere{
  position:relative;width:100%;max-width:860px;height:580px;margin:1.5rem auto 0;
  perspective:900px;
}
.spec-sphere span{
  position:absolute;left:50%;top:50%;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#EDEBE4;white-space:nowrap;
  transform:translate(-50%,-50%);will-change:transform,opacity;
  cursor:default;transition:color .2s;
  user-select:none;-webkit-user-select:none;   /* pas de rectangles de sélection */
}
.spec-sphere span:hover{color:#9d7bff}

/* ---- filets du cadre ---- */
.frame span{position:fixed;background:var(--line);z-index:8}
.f-l{left:3rem;top:0;bottom:0;width:1px}
.f-r{right:3rem;top:0;bottom:0;width:1px}
.f-t{left:0;right:0;top:5.6rem;height:1px}

/* ---- barre du haut ---- */
header{
  position:fixed;top:0;left:0;right:0;z-index:20;height:5.6rem;
  display:flex;align-items:center;justify-content:space-between;padding:0 2.6rem;
}
.wordmark{font-size:.95rem;font-weight:700;letter-spacing:.01em}
.meta{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:.72rem;font-weight:500;letter-spacing:.12em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.right{display:flex;align-items:center;gap:1.1rem}
.kbd{
  font:inherit;font-size:.72rem;padding:.35rem .5rem;border:1px solid var(--line);
  border-radius:7px;background:transparent;color:var(--ink-2);cursor:pointer;
}
.kbd:hover{color:var(--ink);border-color:var(--ink)}
.burger{width:28px;height:11px;position:relative;background:none;border:0;cursor:pointer}
.burger i{position:absolute;left:0;right:0;height:1.6px;background:var(--ink)}
.burger i:first-child{top:0}.burger i:last-child{bottom:0}

/* ---- nav latérale ---- */
/* nav à DROITE : ancrée à droite, tiret côté extérieur (flex inversé).
   Une colonne centrée verticalement — les entrées se répartissent d'elles-mêmes,
   on peut en ajouter ou en retirer sans retoucher la moindre position. */
.rail{
  position:fixed;right:2.6rem;top:50%;transform:translateY(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:flex-end;gap:1rem;
}
.rail a{
  display:flex;align-items:center;flex-direction:row-reverse;gap:.85rem;
  text-decoration:none;color:var(--ink-3);
  font-size:.72rem;font-weight:500;letter-spacing:.13em;
  /* la bascule d'une section à l'autre doit glisser, pas claquer */
  transition:color .5s var(--ease), opacity .5s var(--ease);
}
.rail a::before{
  content:"";width:14px;height:1.5px;background:currentColor;
  transition:width .5s var(--ease), opacity .5s var(--ease);
}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--ink)}
.rail a.on::before{width:32px}
/* Les inactives s'effacent au lieu de changer de graisse : une graisse ne
   s'anime pas (police non variable) et sauterait d'un cran. */
.rail a:not(.on){opacity:.55}
.rail a:not(.on)::before{opacity:.6}

.since{
  margin-top:.9rem;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;
}

/* ---- la nuit : « Entre les lignes » → footer ----
   Un seul dégradé continu porté par le conteneur .nuit : le bleu du site
   (--color-dark, #181d24) qui descend très progressivement vers le noir absolu,
   atteint à 94% — soit au moment où le footer entre en scène.
   Les sections enveloppées doivent devenir transparentes : leur aplat
   .section-dark redémarrerait la couleur à chaque section. */
.nuit{
  background:linear-gradient(180deg,
    #181d24 0%,
    #161b21 15%,
    #13181e 30%,
    #0f141a 45%,
    #0b1015 60%,
    #070a0e 74%,
    #030507 86%,
    #000 94%,
    #000 100%);
}
.nuit .section-dark{background-color:transparent}

/* ---- chrome fixe au-dessus d'une section sombre ----
   Le W., l'horloge, le rail et le « 0 → 1 » sont peints en var(--ink*) sur un
   fond clair : au-dessus du noir ils disparaissent. `sur-noir` est posé sur
   <html> par Hero.js dès qu'une section sombre atteint la bande du chrome. */
/* `.rail a` est volontairement absent : il porte déjà sa propre transition
   (couleur + opacité) plus haut, et la répéter ici l'écraserait — même
   spécificité, cette règle vient après. */
.wordmark,.meta,.since{transition:color .45s}
.frame span{transition:background .45s}
html.sur-noir .wordmark{color:#F2F0EB}
html.sur-noir .meta{color:#B5B2AA}
html.sur-noir .rail a{color:#8A8781}
html.sur-noir .rail a:hover,html.sur-noir .rail a.on{color:#F2F0EB}
html.sur-noir .since{color:#F2F0EB}
html.sur-noir .frame span{background:rgba(242,240,235,.18)}

/* ---- titre ---- */
main{position:relative;z-index:5;min-height:100svh;padding:0 2.6rem}
.display{
  font-weight:700;text-transform:uppercase;line-height:.79;letter-spacing:-.045em;
  font-size:14.6vw;padding-top:19vh;   /* « DAWOOD W. » = 1084px pour 1317 dispo : OK */
}
.display .ln{display:block;overflow:hidden;padding:.06em 0;margin:-.06em 0}
/* nowrap : le nom ne doit JAMAIS se couper en deux lignes (les tailles ci-dessous
   sont calées pour que « DAWOOD W. » tienne d'un bloc, desktop comme mobile). */
.l1,.l2{white-space:nowrap}
.l1{display:block;color:var(--ink);margin-left:.2vw}
/* « Harrington Barry » est long → plus petit que « Dawood », pour tenir sur
   une ligne et garder la hiérarchie (prénom géant, nom moyen). */
.l2{display:block;color:var(--ink-2);margin-left:10vw;font-size:.52em}

/* ---- colonne de droite ---- */
.copy{margin-left:43%;padding-top:2.2vh;max-width:56rem}
.lede{font-size:2.55vw;font-weight:700;line-height:1.22;letter-spacing:-.025em}
.dim{color:var(--ink-2)}
.note{
  margin-top:1.6rem;font-size:1.05vw;font-style:italic;font-weight:500;
  line-height:1.5;color:var(--ink-2);max-width:44rem;
}

/* ---- section 2 : about ---- */
#about{
  min-height:100svh;padding:12vh 2.6rem 10vh;position:relative;z-index:5;
  display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid var(--line);
}
.serif{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:700;font-size:5.15vw;line-height:1.06;letter-spacing:-.005em;
  color:var(--ink);max-width:100%;
}
.serif .dim{color:#75736A}
html[data-theme="dark"] .serif .dim{color:#8D8A7F}
.serif-note{
  font-family:"Playfair Display",Georgia,serif;
  font-style:italic;font-weight:700;font-size:1.35vw;color:var(--ink-2);
  margin-top:5vh;
}

/* ---- section 3 : grille + lockup ---- */
#work{
  position:relative;z-index:5;min-height:100svh;overflow:hidden;
  border-top:1px solid var(--line);
}
/* vrai visuel (Picsum) en fond de l'ENVOI : N&B, faible, animé (Ken Burns) */
.envoi-bg{
  position:absolute;inset:-6%;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.05);
  opacity:.12;mix-blend-mode:multiply;
  animation:kenburns 34s ease-in-out infinite alternate;
}
html[data-theme="dark"] .envoi-bg{opacity:.16;mix-blend-mode:screen}
@keyframes kenburns{
  from{transform:scale(1.04) translate(-1%,1%)}
  to{transform:scale(1.16) translate(2%,-2%)}
}
@media (prefers-reduced-motion:reduce){ .envoi-bg{animation:none} }
/* ---- « Ce que la machine lit » : mot → vrais octets UTF-8 (centre de l'ENVOI) ---- */
.binlab{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  z-index:6;width:min(90vw,720px);text-align:center;
}
.binlab-lead{margin:0 0 1.2rem;font-size:.9rem;font-weight:600;letter-spacing:.01em;color:var(--ink)}
/* le champ : filet fixe + texte « miroir » visible + input transparent par-dessus.
   Les deux partagent police/taille/interligne/padding → ils restent alignés,
   et le vrai caret (caret-color) apparaît pile où le faux clignotait. */
.binlab-field{
  position:relative;display:inline-block;
  width:min(460px,86vw);text-align:center;
  border-bottom:1.5px solid var(--line);
  padding:.35rem 0 .6rem;
  transition:border-color .35s;
}
.binlab-field:focus-within{border-bottom-color:var(--ink)}
.binlab-mirror{
  display:inline-block;position:relative;white-space:pre;
  font-size:2.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);min-height:1.2em;
}
.binlab-ph{color:var(--ink-3);font-weight:500}
.binlab-caret{
  position:absolute;left:100%;top:.14em;margin-left:2px;
  width:2px;height:1em;background:var(--ink);
  animation:binlab-blink 1.1s step-end infinite;
}
/* dès qu'on clique dans le champ, le VRAI caret prend le relais → on efface le
   faux. En CSS pur : ne dépend pas d'un état React, donc jamais désynchronisé. */
.binlab-field:focus-within .binlab-caret{display:none}
@keyframes binlab-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.binlab-input{
  position:absolute;inset:0;width:100%;
  font-family:inherit;font-size:2.1rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.2;text-align:center;padding:.35rem 0 .6rem;
  color:transparent;caret-color:var(--ink);background:transparent;
  border:0;outline:none;
}
@media (prefers-reduced-motion:reduce){ .binlab-caret{animation:none} }
.binlab-out{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.7rem;min-height:2.6rem}
.binlab-ch{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  animation:binlab-in .45s ease-out backwards;
}
@keyframes binlab-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.binlab-glyph{font-size:.86rem;font-weight:700;color:var(--ink);line-height:1}
.binlab-byte{display:flex;gap:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;line-height:1.25}
.binlab-byte b{font-weight:700;width:.6rem;text-align:center}
.binlab-byte b.on{color:var(--ink)}          /* le courant passe */
.binlab-byte b.off{color:var(--ink-3);opacity:.4}   /* … ou pas */
.binlab-foot{margin-top:1.5rem;font-size:.76rem;font-weight:500;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){ .binlab-ch{animation:none} }

/* 2e exemplaire dans le hero : mobile seulement (le hero y a de la place).
   Sur desktop celui de l'ENVOI suffit. */
.binlab-mobile{display:none}
@media (max-width:900px){
  .binlab{top:50%;width:92vw}
  .binlab-mirror,.binlab-input{font-size:1.5rem}
  /* dans le hero : en flux normal, pas centré en absolu comme celui de l'ENVOI */
  .binlab-mobile{display:block;margin-top:3.2rem}
  .binlab-mobile .binlab{position:static;transform:none;top:auto;left:auto;width:100%}
}

.grid-lines span{position:absolute;background:var(--line)}
.gl-v{left:50%;top:0;bottom:0;width:1px}
.gl-h{left:0;right:0;top:41%;height:1px}
.gl-dot{
  position:absolute;top:41%;left:50%;width:15px;height:15px;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
}
.g4{
  position:absolute;left:0;right:0;top:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:0 2.6rem;
}
.g4 > *{padding-top:3.5rem}
.services{list-style:none;font-size:.82rem;font-weight:700;line-height:1.95;letter-spacing:-.005em}
.pitch{
  grid-column:4;font-size:.82rem;font-weight:700;line-height:1.5;letter-spacing:-.005em;max-width:22ch;
}
.talk{
  display:inline-block;margin-top:1.4rem;padding:.78rem 1.35rem;border:0;border-radius:999px;
  background:var(--ink);color:var(--bg);font:inherit;font-size:.82rem;font-weight:700;
  cursor:pointer;box-shadow:6px 14px 26px rgba(0,0,0,.28);
  transition:transform .25s,box-shadow .25s;
}
.talk:hover{transform:translateY(-2px);box-shadow:8px 20px 34px rgba(0,0,0,.32)}
.marks{position:absolute;left:0;right:0;top:calc(41% - 4.4rem);display:grid;grid-template-columns:repeat(4,1fr);padding:0 2.6rem}
.marks i{width:6px;height:6px;border-radius:50%;background:var(--ink);display:block}
.copyright{
  position:absolute;left:73.4%;bottom:24%;font-size:.75rem;font-weight:500;color:var(--ink-2);
}
.lockup{
  position:absolute;left:0;right:0;bottom:-1.2vw;
  display:grid;grid-template-columns:1fr 1fr;padding:0 2.6rem;
  font-size:13.6vw;font-weight:700;letter-spacing:-.045em;line-height:1;
}
.lockup sup{font-size:.34em;vertical-align:top;top:-.15em;position:relative;letter-spacing:0}
.lockup .r{padding-left:9%}

/* ---- boutons ronds ---- */
.fab{
  position:fixed;bottom:2.2rem;z-index:25;width:62px;height:62px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;transition:transform .25s,border-color .25s;
}
.fab:hover{transform:scale(1.05);border-color:var(--ink)}
.fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fab-l{left:1.6rem}
.fab-r{right:2.2rem}

@media (max-width:900px){
  .frame,.rail,.meta{display:none}
  main{padding:0 1.4rem}
  /* 13.5vw (et non 16) : à 16vw « DAWOOD W. » débordait et passait à la ligne
     — vérifié à l'écran. Ici le texte fait ~284px pour ~323 dispo. */
  .display{font-size:13.5vw;padding-top:16vh}
  .l2{margin-left:8vw}
  .copy{margin-left:0;padding-top:3rem}
  .lede{font-size:1.35rem}
  .note{font-size:.9rem}
  #about{padding:8vh 1.4rem}
  .serif{font-size:2.6rem;line-height:1.1}
  .serif-note{font-size:1rem}
  .g4,.marks,.lockup{padding:0 1.4rem}
  .g4{grid-template-columns:1fr 1fr}
  .pitch{grid-column:2}
  .marks{display:none}
  .copyright{left:1.4rem;bottom:30%}
  .lockup{font-size:19vw;grid-template-columns:1fr;bottom:2vh}
  .lockup .r{padding-left:0}
  .fab{width:52px;height:52px}
}