/* ═══════════════════════════════════════════════════════
   SAKAL — « Passer devant »
   Palette relevée directement sur le visuel officiel :
   nuit violette → rose → pêche, étoiles filantes.
   ═══════════════════════════════════════════════════════ */

:root{
  --night:#0e0a18;
  --night-2:#141020;
  --violet:#6b4b84;
  --rose:#c4849e;
  --peach:#e9a882;
  --bone:#fbf3ef;
  --dim:rgba(251,243,239,.6);
  --faint:rgba(251,243,239,.34);
  --line:rgba(251,243,239,.11);        /* filets fins : listes, blocs */
  --trait:rgba(251,243,239,.26);       /* séparations de sections, plus affirmées */

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --pad:clamp(1.4rem,5.5vw,5rem);
  --sec:clamp(4.25rem,9.5vw,7.5rem);
  --e:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0; background:var(--night); color:var(--bone);
  font-family:var(--sans); font-size:clamp(.95rem,.9rem + .2vw,1.05rem); line-height:1.65;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;   /* clip si supporté : pas de conteneur de défilement */
}
img{display:block; max-width:100%; height:auto}
picture{display:contents}
a{color:inherit; text-decoration:none}
ul{list-style:none; margin:0; padding:0}
p{margin:0}
:focus-visible{outline:1px solid var(--peach); outline-offset:4px}

/* voile de dégradé, repris du visuel — présent sur toute la page */
.veil{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 42% at 12% 0%, rgba(107,75,132,.42), transparent 70%),
    radial-gradient(60% 40% at 92% 22%, rgba(196,132,158,.22), transparent 72%),
    radial-gradient(80% 48% at 50% 104%, rgba(233,168,130,.16), transparent 68%);
}
main,.top,.foot{position:relative; z-index:1}

/* grain de pellicule — très léger, donne du corps aux aplats sombres */
.grain{
  position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden;
  opacity:.09; mix-blend-mode:overlay;
}
/* le calque animé est plus grand que l'écran, mais reste enfermé
   dans le conteneur ci-dessus : aucun débordement horizontal */
.grain i{
  position:absolute; inset:-15%; display:block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   20%{transform:translate(-2%,1.5%)}
  40%{transform:translate(1.5%,-2%)} 60%{transform:translate(-1.5%,-1%)}
  80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* barre de progression de lecture */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:40; pointer-events:none}
.progress i{
  display:block; height:100%; width:0; transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--rose) 55%,var(--peach));
}

/* ── petites capitales espacées (remplace tout « mono ») ── */
.eyebrow{
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  font-variation-settings:'wdth' 96,'wght' 500; color:var(--dim);
  margin:0 0 clamp(1.4rem,3.5vw,2.6rem);
}

/* ── BARRE HAUTE ─────────────────────────────────────── */
.top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(1.1rem + env(safe-area-inset-top)) var(--pad) 1.1rem;
  transition:background .5s var(--e), backdrop-filter .5s, padding .5s var(--e), transform .45s var(--e);
}
.top.solid{
  background:rgba(14,10,24,.7); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line);
  padding-top:calc(.8rem + env(safe-area-inset-top)); padding-bottom:.8rem;
}
.top.hide{transform:translateY(-101%)}
.top__mark{
  font-family:var(--serif); font-weight:700; font-size:1.22rem;
  letter-spacing:.42em; text-transform:uppercase; padding-right:.42em; line-height:1;
}
.top__label{display:block; line-height:0}
.top__label img{
  width:auto; height:clamp(30px,3.6vw,42px);
  opacity:.78; transition:opacity .4s var(--e);
}
.top__label:hover img{opacity:1}

/* ── 1. HERO ─────────────────────────────────────────── */
.hero{position:relative; height:100svh; min-height:34rem; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__art{display:contents}
.hero img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:0;
  animation:apparait 1s var(--e) forwards,        /* fondu à l'arrivée */
            respire 22s ease-in-out infinite;     /* respiration lente, 5 % maxi */
}
@keyframes apparait{to{opacity:1}}
@keyframes respire{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.05)}
}
.hero__fade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,rgba(14,10,24,.5) 0%,rgba(14,10,24,0) 24%,rgba(14,10,24,0) 46%,rgba(14,10,24,.55) 74%,rgba(14,10,24,.92) 92%,var(--night) 100%);
}
.hero__foot{
  position:absolute; left:var(--pad); right:var(--pad);
  bottom:calc(clamp(3.4rem,9vh,5.5rem) + 4.4rem);
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  opacity:0; animation:rise 1.2s var(--e) .5s forwards;
}
.hero__foot .eyebrow{margin:0; color:var(--bone); opacity:.8}
.hero__cta{
  position:absolute; left:var(--pad); right:var(--pad);
  bottom:clamp(3.4rem,9vh,5.5rem);
  display:flex; justify-content:center;
  opacity:0; animation:rise 1.2s var(--e) .65s forwards;
}
/* posé sur la photo : contour et texte blancs pleins, fond transparent.
   --line (11 %) serait invisible sur un ciel clair. */
.hero__cta .btn{
  background:none; color:var(--bone); border-color:var(--bone);
  text-shadow:0 1px 10px rgba(14,10,24,.45);
}
.hero__cta .btn:hover{background:var(--bone); color:var(--night); border-color:var(--bone); text-shadow:none}
.hero__date{
  font-size:clamp(.9rem,2.6vw,1.15rem); letter-spacing:.2em; text-transform:uppercase;
  font-variation-settings:'wdth' 96,'wght' 500;
}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* portrait : le lettrage est posé sur l'image, on assombrit le bas */
@media (max-aspect-ratio:1/1){
  .hero img{object-position:58% 32%}
  .hero__fade{
    background:linear-gradient(to bottom,
      rgba(14,10,24,.5) 0%, rgba(14,10,24,0) 20%, rgba(14,10,24,0) 38%,
      rgba(14,10,24,.5) 60%, rgba(14,10,24,.9) 82%, var(--night) 100%);
  }
}

/* Lettrage repris du visuel officiel.
   Sur écran large, l'image porte déjà le titre : le h1 reste présent pour
   les lecteurs d'écran et le référencement, mais n'est pas affiché.
   En portrait, il devient le titre visible. */
.lockup{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.lockup__a{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.35rem,6vw,2rem); letter-spacing:.5em;
  text-transform:uppercase; line-height:1;
  margin-bottom:.8rem; padding-left:.5em; color:var(--bone);
  text-shadow:0 2px 24px rgba(14,10,24,.6);
}
.lockup__a i{
  display:inline-block; font-style:normal;
  opacity:0; transform:translateY(.45em);
  animation:lettre .95s var(--e) forwards;
  animation-delay:calc(var(--i) * .075s + .45s);
}
@keyframes lettre{to{opacity:1; transform:none}}
.lockup__b{
  display:block; font-size:clamp(2.9rem,15vw,5.5rem); line-height:.92;
  text-transform:uppercase; letter-spacing:-.005em;
  font-variation-settings:'wdth' 112,'wght' 700;
  color:transparent; -webkit-text-stroke:1.4px rgba(251,243,239,.95);
  paint-order:stroke fill;
  filter:drop-shadow(0 0 22px rgba(251,243,239,.3)) drop-shadow(0 2px 18px rgba(14,10,24,.5));
}
@media (max-aspect-ratio:1/1){
  .lockup{
    position:absolute; width:auto; height:auto; margin:0; overflow:visible;
    clip-path:none; white-space:normal;
    left:var(--pad); right:var(--pad); bottom:calc(clamp(7.5rem,18vh,11rem) + 4.4rem);
    opacity:0; animation:rise 1.3s var(--e) .35s forwards;
  }
}
@supports not ((-webkit-text-stroke:1px #000)){
  .lockup__b{color:var(--bone); filter:none}
}

.cue{position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); width:1px; height:clamp(28px,5vh,44px); overflow:hidden; opacity:.7}
.cue span{display:block; width:100%; height:100%; background:var(--bone); animation:drip 2.4s var(--e) infinite}
@keyframes drip{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ── SECTIONS ────────────────────────────────────────── */
.sec{padding:var(--sec) var(--pad); position:relative}
.sec + .sec::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent 0%, var(--trait) 8%, var(--trait) 92%, transparent 100%);
}
.sec[tabindex]:focus{outline:none}
/* petit accusé de réception quand on arrive sur une section */
.sec.arrivee::before{animation:filet 1.1s var(--e)}
.sec.arrivee .eyebrow{animation:accuse 1.1s var(--e)}
@keyframes filet{
  0%,25%{background:linear-gradient(90deg,transparent 0%,var(--peach) 8%,var(--peach) 92%,transparent 100%)}
  100%  {background:linear-gradient(90deg,transparent 0%,var(--trait) 8%,var(--trait) 92%,transparent 100%)}
}
@keyframes accuse{0%,25%{color:var(--peach)} 100%{color:var(--dim)}}

/* ── 2. SORTIE / COMPTE À REBOURS ────────────────────── */
.drop__grid{display:grid; gap:clamp(2.4rem,6vw,5rem); align-items:center}
@media (min-width:900px){
  .drop__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(3rem,7vw,7rem)}
}
.drop__cover{margin:0; position:relative; max-width:26rem; perspective:1100px}
.drop__cover img{
  width:100%; aspect-ratio:1; object-fit:cover;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.85);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .5s var(--e);
}
.drop__cover.tilt img{transition:transform .12s linear}
.drop__cover::after{
  content:''; position:absolute; inset:-14% -10% -22%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,132,158,.34),transparent 72%); filter:blur(28px);
  animation:halo 7s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{transform:scale(1);   opacity:.85}
  50%    {transform:scale(1.09); opacity:1}
}

.wordmark{margin:0 0 clamp(1.8rem,4.5vw,3rem)}
.wordmark__a{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.15rem,3vw,1.45rem); letter-spacing:.48em;
  text-transform:uppercase; color:var(--dim); line-height:1;
  margin-bottom:clamp(.6rem,1.6vw,1rem); padding-left:.48em;
}
.wordmark__b{
  display:block; font-size:clamp(2.5rem,8.2vw,6rem); line-height:.94;
  text-transform:uppercase; letter-spacing:-.028em;
  font-variation-settings:'wdth' 106,'wght' 700;
}

.mot{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em}
.mot > b{
  display:inline-block; font-weight:inherit;
  transform:translateY(115%);
  transition:transform 1s var(--e); transition-delay:var(--md,0s);
}
.revele .mot > b{transform:none}

.count{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.count__u{padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1rem,3.2vw,2.4rem) clamp(1.1rem,2.6vw,1.6rem) 0}
.count__u + .count__u{border-left:1px solid var(--line); padding-left:clamp(1rem,3.2vw,2.4rem)}
.count__u{display:grid; gap:.55rem}
.count__u b{
  display:block; position:relative; overflow:hidden;
  font-size:clamp(2.4rem,8vw,4.4rem); line-height:1.12; height:1.12em;
  min-width:1.32em;                     /* les .n sont en absolu : la largeur doit être posée ici */
  font-variation-settings:'wdth' 88,'wght' 250;
  letter-spacing:.01em; font-variant-numeric:tabular-nums; color:var(--bone);
}
.count__u b .n{
  position:absolute; inset:0; display:block;
  transition:transform .55s var(--e), opacity .55s var(--e);
}
.count__u b .n.bas{transform:translateY(100%); opacity:0}
.count__u b .n.haut{transform:translateY(-100%); opacity:0}
.count__u i{
  font-style:normal; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint); font-variation-settings:'wdth' 96,'wght' 500;
}
.count.out .count__u b{color:var(--peach)}

/* La liste des plateformes occupe désormais la colonne de droite, plus
   étroite que la pleine largeur d'origine : typographie resserrée. */
.drop__listen{margin-top:clamp(1.4rem,3vw,2rem)}
.drop__listen .eyebrow{margin-bottom:clamp(.9rem,2vw,1.2rem)}
.drop__listen .plat a{padding:clamp(.8rem,1.9vw,1.15rem) 0}
.drop__listen .plat__name{font-size:clamp(1.15rem,2.9vw,1.8rem)}
.drop__listen .link-all{margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.drop__meta{
  margin:clamp(1.8rem,4vw,2.6rem) 0 0; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--faint); font-variation-settings:'wdth' 96,'wght' 400;
}
.drop__cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:clamp(2rem,4.5vw,2.8rem)}

.btn{
  display:inline-flex; align-items:center; gap:.9rem; padding:1rem 1.7rem;
  background:var(--bone); color:var(--night); border:1px solid var(--bone);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  font-variation-settings:'wdth' 96,'wght' 600;
  transition:background .45s var(--e),color .45s var(--e),border-color .45s var(--e);
}
.btn span{width:14px; height:1px; background:currentColor; position:relative; transition:transform .45s var(--e)}
.btn span::after{content:''; position:absolute; right:0; top:-3px; width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg)}
.btn:hover{background:var(--peach); border-color:var(--peach); color:var(--night)}
.btn:hover span{transform:translateX(5px)}
.btn--ghost{background:none; color:var(--bone); border-color:var(--line)}
.btn--ghost:hover{background:none; border-color:var(--bone); color:var(--bone)}

.player{margin-top:clamp(3rem,7vw,5rem); aspect-ratio:16/9; background:#000; overflow:hidden}
.player iframe{width:100%; height:100%; border:0; display:block}

/* ── 3. ÉCOUTER ──────────────────────────────────────── */
.plats{border-top:1px solid var(--line); position:relative}

/* curseur partagé : un seul bloc qui glisse d'une ligne à l'autre,
   équivalent vanilla du layoutId de Motion */
.plat__pill{
  --debord:clamp(.85rem,2vw,1.6rem);      /* le filet se pose dans la marge, pas sur le texte */
  position:absolute; top:0; z-index:0;
  left:calc(var(--debord) * -1); width:calc(100% + var(--debord));
  opacity:0; pointer-events:none; will-change:transform;
  border-left:2px solid rgba(251,243,239,.45);
  background:linear-gradient(90deg,
    rgba(251,243,239,.10) 0%, rgba(251,243,239,.045) 42%, transparent 76%);
}
.plat{border-bottom:1px solid var(--line); position:relative; z-index:1}
.plat.soon a{cursor:default}   /* pas de lien encore, mais le survol reste lisible */
.plat.soon .plat__name{color:var(--faint)}
.plat__soon{
  flex:none; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--line); padding:.4rem .7rem;
}
.plat a{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:clamp(1.15rem,3vw,1.9rem) 0;
  transition:color .45s var(--e);
}
.plat__name{
  font-size:clamp(1.5rem,5.2vw,3rem); line-height:1.05; text-transform:uppercase;
  letter-spacing:-.02em; font-variation-settings:'wdth' 98,'wght' 400;
  transition:font-variation-settings .6s var(--e);
}
.plat i{
  flex:none; width:26px; height:1px; background:var(--faint); position:relative;
  transition:background .45s,transform .5s var(--e);
}
.plat i::after{content:''; position:absolute; right:0; top:-4px; width:9px; height:9px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  color:var(--faint); transform:rotate(45deg); transition:color .45s}
@media (hover:hover){
  .plat a:hover{color:var(--bone)}
  .plat a:hover .plat__name{
    transform:translateX(clamp(.8rem,2.2vw,1.7rem));
    font-variation-settings:'wdth' 112,'wght' 500;
  }
  .plat a:hover i{background:var(--bone); transform:translateX(6px)}
  .plat a:hover i::after{color:var(--bone)}
}
.link-all{
  display:inline-block; margin-top:clamp(2rem,4vw,2.8rem); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
  border-bottom:1px solid var(--line); padding-bottom:.4rem; transition:color .4s,border-color .4s;
}
.link-all:hover{color:var(--peach); border-color:var(--peach)}

/* ── 4. RÉSEAUX ──────────────────────────────────────── */
.socs{display:grid; gap:clamp(.2rem,1vw,.6rem)}
@media (min-width:820px){.socs{grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}}
.socs li{position:relative}
.socs a{position:relative; isolation:isolate}
.socs a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(196,132,158,.24),rgba(107,75,132,.12));
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .55s var(--e);
}
.socs a{
  display:grid; gap:.6rem; padding:clamp(1.5rem,4vw,2.6rem) clamp(0rem,2vw,1.8rem);
  border-bottom:1px solid var(--line); background:var(--night); transition:background .5s var(--e), color .45s;
}
@media (min-width:820px){.socs a{border-bottom:0; justify-items:center; text-align:center; padding-block:clamp(2.2rem,5vw,3.4rem)}}
.socs span{
  font-size:clamp(1.25rem,3.4vw,1.9rem); text-transform:uppercase; letter-spacing:-.01em;
  font-variation-settings:'wdth' 100,'wght' 400;
}
.socs em{font-style:normal; font-size:.68rem; letter-spacing:.1em; color:var(--dim)}
@media (hover:hover){
  .socs a:hover{color:var(--peach)}
  .socs a:hover::before{transform:scaleY(1)}
}

/* ── 5. CONTACT ──────────────────────────────────────── */
.mail{
  display:inline-block; font-size:clamp(1.3rem,5.6vw,3.4rem); line-height:1.15;
  letter-spacing:-.025em; font-variation-settings:'wdth' 96,'wght' 400; word-break:break-word;
  background-image:linear-gradient(var(--peach),var(--peach));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .6s var(--e), color .5s;
  padding-bottom:.12em;
}
.mail:hover{color:var(--peach); background-size:100% 1px}

/* ── FOOTER ──────────────────────────────────────────── */
.foot{
  padding:clamp(3rem,7vw,5rem) var(--pad) calc(1.8rem + env(safe-area-inset-bottom));
  position:relative;
}
.foot::before{
  content:''; position:absolute; inset:0 0 auto; height:70%; pointer-events:none;
  background:radial-gradient(70% 100% at 18% 0%, rgba(107,75,132,.22), transparent 72%);
}
.foot::after{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent 0%, var(--trait) 8%, var(--trait) 92%, transparent 100%);
}
.foot > *{position:relative}

.foot__top{
  display:grid; gap:clamp(2.2rem,5vw,3rem);
  padding-bottom:clamp(2.4rem,5vw,3.4rem);
}
@media (min-width:420px) and (max-width:759px){
  /* les deux listes côte à côte pour raccourcir le pied de page sur mobile */
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand,.foot__label{grid-column:1 / -1}
}
@media (min-width:760px){
  .foot__top{grid-template-columns:1.45fr .85fr .85fr auto; gap:clamp(1.5rem,4vw,3.5rem)}
  .foot__label{justify-items:end; text-align:right}
}

.foot__name{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.7rem,4.4vw,2.4rem); letter-spacing:.34em;
  text-transform:uppercase; line-height:1; padding-left:.34em; margin-bottom:.9rem;
}
.foot__rel{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); font-variation-settings:'wdth' 96,'wght' 400;
}

.foot__h{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint); font-variation-settings:'wdth' 96,'wght' 500;
  margin-bottom:1.1rem;
}
.foot__nav{display:grid; gap:.62rem; align-content:start}
.foot__nav a{
  font-size:.9rem; letter-spacing:.02em; color:var(--dim); width:fit-content;
  background-image:linear-gradient(var(--peach),var(--peach));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  padding-bottom:2px; transition:color .35s, background-size .45s var(--e);
}
.foot__nav a:hover{color:var(--peach); background-size:100% 1px}

.foot__label{display:grid; align-content:start}
.foot__logo{display:block; line-height:0; width:fit-content}
.foot__logo img{width:auto; height:clamp(42px,5vw,54px); opacity:.7; transition:opacity .4s var(--e)}
.foot__logo:hover img{opacity:1}

.foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-top:clamp(1.4rem,3vw,1.9rem); border-top:1px solid var(--line);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.foot__bar p{margin:0}
.foot__bar i{font-style:normal}
.foot__up{
  display:inline-flex; align-items:center; gap:.6rem; color:var(--dim);
  transition:color .35s;
}
.foot__up::after{
  content:''; width:7px; height:7px; border-top:1px solid currentColor;
  border-right:1px solid currentColor; transform:rotate(-45deg); transition:transform .4s var(--e);
}
.foot__up:hover{color:var(--peach)}
.foot__up:hover::after{transform:rotate(-45deg) translate(2px,-2px)}

/* ── APPARITIONS ─────────────────────────────────────── */
.up{opacity:0; transform:translateY(20px); transition:opacity 1s var(--e),transform 1s var(--e); transition-delay:var(--d,0s)}
.up.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .up{opacity:1; transform:none}
  .hero__foot,.hero__cta,.lockup,.lockup__a i{opacity:1; transform:none}
  .hero img{opacity:1; animation:none; transform:none}
  .grain{display:none}
  .mot > b{transform:none}
  .drop__cover::after{animation:none}
  .top.hide{transform:none}
}