/* ==========================================================================
   The Eyes That See — feuille de style
   Direction : carnet de bord / instrument de navigation. Papier, encre, laiton.
   ========================================================================== */

:root{
  --paper:#F3EEE4;
  --paper-2:#FAF7F0;
  --ink:#151310;
  --brass:#9A7B3F;
  --night:#0C0E13;
  --ivory:#EAE2D0;

  /* variables animées (thème papier → nuit) */
  --bg:#F3EEE4;
  --fg:#151310;
  --muted:#7B7266;
  --rule:rgba(21,19,16,.16);
  --accent:#9A7B3F;

  --gutter:3.2vw;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --display:"Instrument Serif","Cormorant Garamond",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:1.15rem;
  line-height:1.58;
  font-variant-numeric:oldstyle-nums;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--brass);color:var(--paper)}
a{color:inherit}
p{margin:0 0 1.1rem}
main{position:relative;z-index:10}

.display{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.008em}
.mono{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-variant-numeric:lining-nums;
  color:var(--muted);
}

/* grain d'impression, très léger */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:40;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- fond animé : courbes de niveau, sous tout le contenu ----
   Le tracé est dessiné une seule fois. Tout le mouvement (parallaxe,
   dérive, respiration) passe par des transformations et une opacité
   animées, donc traitées par le GPU : aucun redessin au défilement. */
.bg-wrap{
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:1;pointer-events:none;overflow:hidden;
  opacity:0;will-change:transform;
}
.bg-wrap.is-ready{animation:bg-in 1.4s ease forwards, bg-breathe 42s ease-in-out 1.4s infinite}
#bg{position:absolute;top:-24px;left:-24px;animation:bg-drift 115s ease-in-out infinite}
@keyframes bg-in{from{opacity:0}to{opacity:.62}}
@keyframes bg-breathe{0%,100%{opacity:.62}50%{opacity:.48}}
@keyframes bg-drift{
  0%{transform:translate3d(-14px,0,0)}
  50%{transform:translate3d(14px,-7px,0)}
  100%{transform:translate3d(-14px,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .bg-wrap.is-ready{animation:bg-in 1.4s ease forwards}
  #bg{animation:none}
}

/* ---- en-tête ---- */
.top{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem var(--gutter);
  color:var(--fg);
  pointer-events:none;
}
.js .top{opacity:0}
/* voile dégradé : le contenu s'efface derrière l'en-tête au lieu de le heurter */
.top::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:215%;
  background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 46%,transparent 100%);
  pointer-events:none;
}
.top>*{pointer-events:auto;position:relative;z-index:1}
.wordmark{
  font-family:var(--display);font-weight:400;font-size:1.3rem;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
}
.lang{display:flex;gap:1.15rem}
.lang button{
  appearance:none;background:none;border:0;padding:0 0 .3rem;cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  color:var(--muted);border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.lang button:hover{color:var(--fg)}
.lang button[aria-current="true"]{color:var(--fg);border-color:var(--accent)}
.lang button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

/* ---- globe (conteneur fixe déplacé par le scroll sur desktop) ---- */
.globe-wrap{
  position:fixed;top:0;left:0;
  width:720px;height:720px;
  z-index:15;pointer-events:none;
  will-change:transform,opacity;
}
.globe{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;
}
.globe.is-active{pointer-events:auto;cursor:grab}
.globe.is-active:active{cursor:grabbing}

/* ---- hero ---- */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5vw;
  align-items:center;
  padding:12vh var(--gutter) 10vh;
}
.hero-head{grid-column:1/13;margin-bottom:2.2rem}
.hero-inner{grid-column:1/8}
.eyebrow{margin:0 0 2rem}
.hero h1.brand{
  margin:0;
  font-size:clamp(4.5rem,15vw,17rem);
  font-weight:400;line-height:.88;letter-spacing:-.035em;
  white-space:nowrap;
}
.brand .w1{font-style:italic}
.brand .w2{
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1.2px var(--fg);
  letter-spacing:-.02em;
}
.brand .ch{display:inline-block}
.js .brand .line-in{transform:none}
.js .brand .ch{transform:translateY(112%)}
.hero .statement{
  margin:0 0 1.6rem;
  font-size:clamp(1.7rem,3.1vw,3.3rem);
  font-style:italic;line-height:1.06;
}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-in{display:block}
.js .line-in{transform:translateY(112%)}
.hero-sub{
  font-family:var(--display);font-weight:400;
  font-size:1.5rem;line-height:1.35;max-width:24rem;margin:0 0 1.7rem;
}
.byline{margin:0}
.anchor{visibility:hidden}
.anchor-hero{grid-column:9/13;justify-self:end;align-self:center;width:min(24vw,380px);aspect-ratio:1}
.scroll-hint{
  position:absolute;left:var(--gutter);bottom:2.4rem;
  display:flex;align-items:center;gap:.9rem;
}
.scroll-hint i{
  display:block;width:1px;height:44px;background:currentColor;
  animation:hint 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes hint{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---- chapitres ---- */
.chapter{
  position:relative;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5vw;
  padding:16vh var(--gutter);
}
.ch-num{grid-column:1/2;align-self:start;margin:0;padding-top:.7rem;white-space:nowrap}
.chapter h2{font-size:clamp(2.2rem,3.6vw,3.6rem);margin:0 0 1.6rem}
.chapter .text p{max-width:33rem}

.eye .portrait{grid-column:2/5;margin:0;align-self:start}
.eye .text{grid-column:6/11}
.portrait-ph{
  aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--rule);
  display:grid;place-items:center;
}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.portrait figcaption{margin-top:.8rem}

/* ---- chapitre monde (épinglé) ---- */
.world{position:relative;height:280vh}
.world-pin{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.5vw;
  align-items:center;padding:0 var(--gutter);
}
.world .ch-num{position:absolute;left:var(--gutter);top:16vh;padding:0}
.world-text{
  grid-column:1/7;position:relative;
  min-height:3.4em;
  font-size:clamp(2.4rem,4.8vw,5.2rem);
}
.world-line{
  position:absolute;left:0;top:0;margin:0;opacity:0;
  max-width:9.5em;font-size:inherit;line-height:1.04;
}
.anchor-world{grid-column:7/13;justify-self:center;width:min(76vh,44vw);aspect-ratio:1}
.stats{
  position:absolute;left:var(--gutter);bottom:9vh;
  margin:0;padding:0;list-style:none;display:flex;gap:4.5vw;
}
.stats li{display:flex;flex-direction:column;gap:.55rem}
.stats .num{font-size:clamp(2.4rem,4vw,4.2rem);line-height:1;font-variant-numeric:lining-nums}
.stats .num i{font-style:normal;color:var(--accent)}
.todo{
  position:absolute;right:var(--gutter);bottom:2rem;
  color:#B4462F;letter-spacing:.08em;text-transform:none;
}

/* ---- ce que vous recevez + spécimen ---- */
.receive .text{grid-column:2/6}
.sheet{
  grid-column:7/12;align-self:start;
  background:var(--paper-2);color:var(--ink);
  border:1px solid rgba(21,19,16,.14);
  padding:2.3rem 2.6rem 2rem;
  box-shadow:0 46px 70px -46px rgba(21,19,16,.4);
}
.sheet header{
  display:flex;justify-content:space-between;gap:1rem;
  margin-bottom:1.5rem;padding-bottom:1rem;
  border-bottom:1px solid rgba(21,19,16,.14);
}
.sheet .mono{color:#7B7266}
.sheet .meta{display:flex;gap:2.4rem;margin:0 0 1.6rem}
.sheet .meta div{display:flex;gap:.7rem;align-items:baseline}
.sheet .meta dd{margin:0;color:var(--ink)}
.redact{
  display:inline-block;width:9.5ch;height:.95em;background:var(--ink);
  vertical-align:-.12em;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.7,0,.2,1) .35s;
}
.sheet.is-in .redact{transform:scaleX(1)}
.lines{list-style:none;margin:0;padding:0}
.lines li{
  display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;
  padding:.9rem 0;border-top:1px solid rgba(21,19,16,.1);
}
.lines li p{margin:0;font-size:1.05rem;line-height:1.5}
.lines .n{color:var(--brass);padding-top:.3rem}
.sig{margin-top:1.4rem;font-style:italic;font-size:1.35rem;text-align:right}

/* ---- langues ---- */
.abroad .text{grid-column:2/7}
.langs{grid-column:2/12;margin-top:3rem;border-bottom:1px solid var(--rule)}
.langrow{
  display:grid;grid-template-columns:1.4fr 1fr 4fr;align-items:baseline;gap:2vw;
  padding:1.15rem 0;border-top:1px solid var(--rule);
}
.langrow .name{font-family:var(--display);font-size:1.5rem;font-weight:400}
.langrow .phrase{
  font-style:italic;font-size:clamp(1.3rem,2vw,2.1rem);
  transition:color .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.langrow:hover .phrase{color:var(--accent);transform:translateX(.35em)}

/* ---- ce que je ne fais jamais ---- */
.never{padding-top:22vh;padding-bottom:22vh}
.never .big{
  grid-column:2/13;margin:0 0 3rem;
  font-size:clamp(2.6rem,6.2vw,7rem);font-style:italic;line-height:1.04;
}
.never .big span:nth-child(5) u{transition-delay:.8s}
.never .big u{
  text-decoration:none;font-style:normal;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-bottom:.02em;
  transition:background-size 1.2s cubic-bezier(.7,0,.2,1);
}
.never .big.is-in u{background-size:100% 1px}
.never .big span:nth-child(3) u{transition-delay:.4s}
.never .aside{grid-column:7/12;max-width:32rem}

/* ---- en pratique + contact ---- */
.practice .text{grid-column:2/7}
.contact{grid-column:2/12;margin-top:3rem}
.contact a{
  font-size:clamp(1.8rem,3.4vw,3.4rem);text-decoration:none;
  position:relative;display:inline-block;padding-bottom:.12em;
}
.contact a::before,.contact a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
}
.contact a::before{background:var(--rule)}
.contact a::after{
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.contact a:hover::after{transform:scaleX(1)}

/* ---- pied ---- */
.foot{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;gap:2rem;
  padding:2rem var(--gutter) 2.4rem;border-top:1px solid var(--rule);
}

/* ---- révélations ---- */
.js .rv{opacity:0;transform:translateY(22px)}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none}
  .js .line-in{transform:none}
  .js .top{opacity:1}
  .scroll-hint i{animation:none}
  .globe{opacity:1}
}

/* ---- mobile / tablette ---- */
@media (max-width:900px){
  :root{--gutter:6vw}
  body{font-size:1.06rem}
  .top{padding:1.1rem var(--gutter)}
  .wordmark{font-size:.82rem;letter-spacing:.14em}
  .hero{grid-template-columns:1fr;padding-top:20vh;align-content:start}
  .hero-inner{grid-column:1}
  .hero-head{grid-column:1;margin-bottom:1.6rem}
  .hero h1.brand{font-size:clamp(3.8rem,23vw,6.4rem);white-space:normal;line-height:.9}
  .brand .w2{display:block}
  .hero .statement{font-size:clamp(1.5rem,6.5vw,2.2rem)}
  .anchor-hero{display:none}
  .chapter{grid-template-columns:1fr;padding:12vh var(--gutter)}
  .chapter>*{grid-column:1!important}
  .ch-num{margin-bottom:1.4rem;padding-top:0}
  .eye .portrait{max-width:62%;margin-bottom:2.2rem}
  .world{height:auto}
  .world-pin{position:relative;height:auto;display:block;padding:12vh var(--gutter)}
  .world .ch-num{position:static;margin-bottom:1.4rem}
  .world-text{min-height:0;font-size:clamp(2rem,9vw,3rem)}
  .world-line{position:static;opacity:1;margin-bottom:.5em;max-width:none}
  .anchor-world{display:none}
  .globe-wrap{
    position:relative;display:block;
    width:min(88vw,420px);height:min(88vw,420px);
    margin:2.4rem auto;transform:none!important;opacity:1!important;
  }
  .stats{position:static;margin-top:1rem;gap:9vw}
  .todo{position:static;display:block;margin-top:1.6rem}
  .sheet{margin-top:2rem;padding:1.6rem 1.4rem 1.4rem}
  .sheet header{flex-direction:column;gap:.4rem}
  .sheet .meta{flex-wrap:wrap;gap:1rem 1.6rem}
  .langrow{grid-template-columns:1fr;gap:.25rem}
  .langrow:hover .phrase{transform:none}
  .never{padding-top:14vh;padding-bottom:14vh}
  .never .big{font-size:clamp(2.2rem,10vw,4rem)}
  .foot{flex-direction:column;gap:.6rem}
}