/* ============================================================
   CAFÉ INTERVIEW — le comptoir, version 2
   Une photographie du vrai bar, découpée en plans de profondeur.
   Plus de 3D temps réel : la profondeur vient de la superposition,
   comme sur les héros de HorizonX.
   ============================================================ */

/* ---------- 1. L'enseigne ---------- */

/* Le tracé de l'enseigne est servi en masque : le fichier reste en cache
   à part, et la couleur se pilote au CSS, donc le même tracé sert de néon
   rouge sur le noir et d'encre sur les aplats clairs. */
.mark{
  display:block;
  width:clamp(108px,10.5vw,168px);
  aspect-ratio:1000 / 387;
  background:currentColor;
  -webkit-mask:url('interview-logo.svg') center/contain no-repeat;
  mask:url('interview-logo.svg') center/contain no-repeat;
  color:var(--neon);
  --glow:1;
  filter:
    drop-shadow(0 0 calc(3px * var(--glow)) rgba(255,120,105,calc(.85 * var(--glow))))
    drop-shadow(0 0 calc(12px * var(--glow)) rgba(255,46,31,calc(.7  * var(--glow))))
    drop-shadow(0 0 calc(34px * var(--glow)) rgba(255,46,31,calc(.42 * var(--glow))));
  transition:filter .5s var(--ease),color .5s var(--ease);
}

/* Sur les aplats clairs le tube ne rayonne pas, il devient de l'encre */
.panel--mint  .mark,
.panel--cream .mark{--glow:0;color:var(--accent)}

/* L'amorçage : le tube hésite deux fois avant de tenir */
.mark.strike{animation:strike 1.25s steps(1,end) 1 both}
@keyframes strike{
  0%{opacity:.12} 9%{opacity:1} 13%{opacity:.18}
  19%{opacity:1}  24%{opacity:.4} 30%{opacity:1}
  35%{opacity:.55} 42%{opacity:1} 100%{opacity:1}
}
.mark.steady{animation:breathe 7s var(--ease-io) infinite;animation-delay:-2.4s}
@keyframes breathe{
  0%,100%{opacity:1} 47%{opacity:.95} 50%{opacity:1} 54%{opacity:.92} 57%{opacity:1}
}

/* ---------- 2. Navigation ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:clamp(16px,2vw,28px) var(--gut);
  pointer-events:none;
  color:var(--cream);
}
.nav > *{pointer-events:auto}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(6,14,12,.72),rgba(6,14,12,0));
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.nav.solid::before{opacity:1}
.mark-link{display:block;line-height:0;text-decoration:none}

/* Au-dessus des aplats clairs, la nav passe en encre : un tube au néon
   posé sur du vert menthe ou du crème ne rayonne pas, il salit. */
.nav.on-light{color:var(--ink)}
.nav.on-light .mark{--glow:0;color:var(--neon-ink)}
.nav.on-light .lang button{color:rgba(11,21,18,.5)}
.nav.on-light .lang button[aria-pressed="true"]{color:var(--ink)}
.nav.on-light .lang .sep{color:rgba(11,21,18,.28)}
.nav.on-light .btn{border-color:rgba(11,21,18,.26);color:var(--ink)}
.nav.on-light .btn:hover{border-color:var(--ink)}
.nav.on-light::before{background:linear-gradient(to bottom,rgba(242,237,225,.8),rgba(242,237,225,0))}

.navr{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px)}
.lang{display:flex;align-items:center;gap:2px;font:700 11px/1 var(--mono);letter-spacing:.16em}
.lang button{
  appearance:none;background:none;border:0;cursor:pointer;padding:10px;
  color:rgba(242,237,225,.55);font:inherit;letter-spacing:inherit;
  transition:color var(--dur-fast) var(--ease);
}
.lang button[aria-pressed="true"]{color:var(--cream)}
.lang button:hover{color:var(--neon)}
.lang .sep{color:rgba(242,237,225,.3);user-select:none}
.nav .btn{padding:13px 22px;font-size:11px;border-color:rgba(242,237,225,.34);color:var(--cream)}
.nav .btn:hover{border-color:var(--cream)}

/* ---------- 3. La vidéo d'ouverture ---------- */

.intro{
  position:fixed;inset:0;z-index:350;
  background:var(--ink-deep);
  display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 0s linear 1s;
}
.intro[hidden]{display:none !important}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--voile);
  opacity:0;
  transition:opacity 1.15s var(--ease-io);
}
.intro.handing::before{opacity:1}
.intro-skip{z-index:2}
.intro video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--video-ox,50%) center;
  transform:scale(1.024);
  transition:object-position 2.2s var(--ease-io);
}

.intro-skip{
  position:absolute;right:var(--gut);bottom:clamp(24px,4vh,44px);
  appearance:none;background:rgba(6,14,12,.5);border:1px solid rgba(242,237,225,.3);
  color:var(--cream);border-radius:999px;padding:13px 22px;cursor:pointer;
  font:700 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  backdrop-filter:blur(8px);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.intro-skip:hover{border-color:var(--cream);background:rgba(6,14,12,.72)}

/* Lecture automatique refusée par le navigateur : on le dit et un appui suffit */
.intro.blocked::after{
  content:"Touchez pour lancer";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:700 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);background:rgba(6,14,12,.6);border:1px solid rgba(242,237,225,.34);
  padding:16px 24px;border-radius:999px;backdrop-filter:blur(8px);
}
html[lang="en"] .intro.blocked::after{content:"Tap to play"}

/* Revoir l'entrée : discret, à côté de l'appel à l'action */
.replay{
  appearance:none;background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:.6em;padding:14px 4px;
  font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,237,225,.62);
  transition:color var(--dur-fast) var(--ease);
}
.replay:hover{color:var(--cream)}
.replay svg{width:13px;height:13px;flex:none}
.replay[hidden]{display:none !important}
@media (pointer:coarse){.replay{min-height:44px}}

/* ---------- 3b. La remise : de la vidéo au comptoir ---------- */

/* La vidéo se retire pendant que le comptoir se dresse, pas avant.
   Son fondu part au contact de la tasse et dure plus longtemps que
   l'arrivée du titre, si bien que les deux images se chevauchent une
   seconde entière. Comme la dernière image de la vidéo est le fond du
   comptoir, ce chevauchement est invisible : il n'y a pas de coupe. */
.intro.handing{
  opacity:0;
  transition:opacity 1.15s var(--ease-io);
}
.intro.handing .intro-skip{opacity:0;transition:opacity .3s var(--ease)}

/* Ce que la salle retient tant que le verre n'est pas posé.
   Chaque groupe a sa retenue, on les lève l'une après l'autre. */
body.hold-drink .drink,
body.hold-drink .drink-mirror,
body.hold-drink .drink-wrap::after{opacity:0}

body.hold-type .hero-title .w{
  opacity:0;
  transform:translateY(.42em) scaleY(1.05);
  filter:blur(7px);
}

body.hold-copy .hero-copy{opacity:0;transform:translateY(12px)}

body.hold-frame .index,
body.hold-frame .arrow{opacity:0}
body.hold-frame .index{transform:translateY(10px)}
body.hold-frame .arrow{transform:translateY(-50%) scale(.86)}
body.hold-frame .nav{opacity:0}

/* Le temps de la remise seulement : tout arrive plus lentement qu'au
   changement de boisson, pour que le geste garde son poids. */
.hero-copy{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.index{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.nav{transition:opacity .9s var(--ease)}
body.pose .drink,
body.pose .drink-mirror{transition-duration:1.25s}
body.pose .drink-wrap::after{transition-duration:1.25s}
body.pose .hero-title .w{transition-duration:.95s}

/* Rien de tout cela ne s'applique en mouvement réduit : la vidéo n'est
   pas jouée, donc aucune retenue n'est jamais posée. */

/* ---------- 4. La scène du comptoir ---------- */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  border-radius:0;
  margin-top:0;
  /* De combien les sept objets dépassent la taille qu'ils ont dans le
     film. Un seul réglage pour les sept, donc leurs tailles relatives,
     qui suivent leurs hauteurs réelles, restent justes entre elles. */
  --drink-k:1.25;
  --k:var(--drink-k);
}

/* Les plans. Chacun se décale à sa propre profondeur quand la souris
   bouge : c'est de là que vient le relief, pas d'un moteur 3D.
   --d est la profondeur du plan, en pixels de décalage maximal. */
.stage{position:absolute;inset:0;z-index:0;overflow:hidden}

.layer{
  position:absolute;inset:-7%;
  will-change:transform;
  transform:scale(var(--z,1))
            translate3d(calc(var(--mx,0) * var(--d,0) * 1px),
                        calc(var(--my,0) * var(--d,0) * 1px), 0);
  transition:transform .9s var(--ease);
}
/* Le fond du comptoir EST la dernière image du film. Pour que le fondu
   ne se voie pas, les deux doivent être cadrés de la même façon : même
   boîte, même recouvrement, même point d'ancrage horizontal. D'où
   l'inset nul et le débord obtenu par l'échelle, qui laisse juste de
   quoi respirer à la parallaxe là où les autres plans se permettent
   7 %. --scene-ox est calculé en JS : sur un écran étroit, il décale le
   cadrage vers la droite pour que la tasse reste dans le champ. */
.layer--room{
  --d:5;
  --z:1.024;
  inset:0;
  background:var(--ink-deep) var(--scene-ox,50%) center / cover no-repeat;
  background-image:image-set(url('img/comptoir.jpg') 1x);
}
/* La lueur qui respire. Elle est calee sur les vraies sources du
   plan : la reglette de l etagere haute, celle du milieu, le fond
   ambre des bouteilles et la petite lampe du frigo, a gauche. */
.layer--glow{
  --d:9;
  pointer-events:none;
  background:
    radial-gradient(44% 24% at 52% 13%,rgba(255,205,130,.17),transparent 72%),
    radial-gradient(42% 22% at 60% 60%,rgba(255,176,92,.19),transparent 74%),
    radial-gradient(16% 15% at 12% 48%,rgba(255,214,160,.15),transparent 78%);
  animation:glowbreathe 9s var(--ease-io) infinite;
  animation-delay:-3s;
}
@keyframes glowbreathe{0%,100%{opacity:.85}50%{opacity:1}}

/* Le voile de lisibilité. Trois couches : le bas, où repose le zinc,
   la gauche, où vit la copie, et une vignette générale. Le dégradé de
   gauche est le plus marqué parce que l arête éclairée du comptoir
   passe précisément là où commence le texte : sans lui, l étiquette
   rouge tombait à 1,1 contre 1, c est à dire invisible. Il s éteint
   avant l axe, donc la tasse garde toute sa lumière. */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:var(--voile);
}

/* ---------- 5. Le titre, DERRIÈRE la boisson ---------- */

.hero-title{
  position:absolute;left:0;right:0;top:clamp(13vh,18.5vh,25vh);
  /* Plus grand que l'échelle commune du site : le titre vit DERRIÈRE
     l'objet, il doit donc largement en déborder pour se lire de part et
     d'autre. Il grandit dans la même proportion que les boissons. */
  font-size:clamp(62px,13.2vw,248px);
  z-index:3;
  text-align:center;
  pointer-events:none;
  color:var(--cream);
  opacity:1;
  /* En luminosité, le titre prend la teinte de la salle derrière lui au
     lieu d'être un aplat blanc collé dessus. Il appartient à la scène. */
  mix-blend-mode:luminosity;
  transform:translate3d(calc(var(--focus-dx,0px) + var(--mx,0) * 9px),calc(var(--my,0) * 9px),0);
  transition:transform .9s var(--ease);
  text-wrap:nowrap;
}
.hero-title .w{
  display:inline-block;
  opacity:0;transform:translateY(.16em);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
.hero-title.in .w{opacity:1;transform:none}

/* ---------- 6. La boisson ---------- */

/* La boisson est dimensionnée en HAUTEUR, jamais en largeur : c'est la
   hauteur réelle de l'objet qui doit être respectée d'un cran à l'autre,
   sinon une tasse large paraîtrait plus grande qu'une bouteille haute. */
.drink-wrap{
  position:absolute;left:var(--drink-x,50%);z-index:4;
  bottom:var(--drink-b,36%);
  height:var(--dh,40vh);
  display:flex;align-items:flex-end;justify-content:center;
  /* L'échelle prend appui sur le PIED : la boisson grandit vers le haut
     et son point de contact ne quitte jamais le zinc. */
  transform-origin:50% 100%;
  transform:translate3d(calc(-50% + var(--mx,0) * 26px),calc(var(--my,0) * 26px),0)
            scale(var(--k,1));
  transition:transform 1.05s var(--ease);
  pointer-events:none;
}

/* Pendant la remise, la boisson garde la taille EXACTE qu'elle a dans le
   film : c'est ce qui rend le fondu invisible. Elle ne prend sa taille
   de site qu'une fois le film retiré, et la prend lentement, ce qui se
   lit comme la caméra qui avance plutôt que comme un objet qui gonfle. */
body.pose .drink-wrap{--k:1}
.drink{
  position:relative;z-index:2;
  height:100%;width:auto;display:block;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))
         drop-shadow(0 3px 5px rgba(0,0,0,.7));
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.drink.in{opacity:1;transform:none}

/* L'ombre de contact, sans laquelle le verre flotte au-dessus du zinc */
.drink-wrap::after{
  content:"";position:absolute;left:50%;bottom:-10px;z-index:0;
  width:150%;height:44px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 46% 50% at 50% 50%,
    rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 34%,rgba(0,0,0,.22) 60%,transparent 78%);
  opacity:0;transition:opacity .55s var(--ease);
  filter:blur(3px);
}
.drink-wrap.in::after{opacity:1}

/* Le reflet dans le zinc poli : la même image, retournée et effacée */
.drink-mirror{
  position:absolute;left:50%;top:100%;z-index:1;
  height:100%;
  transform:translateX(-50%) scaleY(-1);
  opacity:0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 58%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 58%);
  filter:blur(1.6px);
  transition:opacity .6s var(--ease);
}
.drink-mirror.in{opacity:.28}
.drink-mirror img{height:100%;width:auto;display:block}

/* ---------- 7. La copie du hero ---------- */

.hero-copy{
  position:relative;z-index:8;
  grid-row:1;align-self:end;
  width:var(--shell);margin-inline:auto;
  padding-bottom:clamp(20px,4vh,48px);
  /* À gauche, pas au centre : le centre appartient à la boisson, que le
     barman a posée à droite de l'axe. La copie prend le zinc vide du
     coin gauche, alignée sur la même marge que l'index en dessous, et
     les deux tiennent la scène de part et d'autre du verre. */
  display:grid;gap:clamp(10px,1.3vw,16px);
  justify-items:start;text-align:left;
}
.hero-copy > *{max-width:min(34ch,40vw)}
/* Le rouge du néon ne tient pas 4,5 contre 1 sur un zinc éclairé :
   même sur un fond presque noir il plafonne à 5,7, et mesuré ici il
   tombait à 3. Le mot passe donc en crème et c'est le trait qui garde
   le rouge. L'accent reste, la lecture aussi. */
.hero-copy .spk{margin-bottom:0;color:var(--cream)}
.hero-copy .spk::before{background:var(--neon);opacity:1}
.hero-ask{
  font:400 clamp(14px,1.1vw,17px)/1.5 var(--mono);
  color:#C6F0E0;margin:0;
}
.hero-sub{font-size:clamp(15px,1.05vw,18px);color:rgba(242,237,225,.76);margin:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;justify-content:flex-start}

@media (max-width:900px){
  .hero-copy > *{max-width:none}
  .hero-title{top:12vh}

  /* Sur un écran étroit, le recouvrement rapproche tellement la tasse
     du texte qu'une ligne finit sur la porcelaine, mot clair sur fond
     clair. La copie prend donc son propre lit : un dégradé qui monte du
     bas et s'éteint avant le haut de la tasse, comme un fondu de
     projection. Sur grand écran il n'a pas lieu d'être, la copie ayant
     tout le zinc de gauche pour elle. */
  .hero-copy::before{
    content:"";position:absolute;z-index:-1;
    left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));
    top:-30px;bottom:calc(-1 * clamp(20px,4vh,48px));
    background:linear-gradient(to top,
      rgba(6,14,12,.95) 28%,rgba(6,14,12,.78) 60%,rgba(6,14,12,0) 100%);
  }
}

/* ---------- 8. Les fleches et l index ---------- */

/* On navigue a la fleche, pas en choisissant dans une liste : le verre
   reste le seul sujet du cadre et rien ne vient encombrer le bas. */
.arrow{
  /* A mi hauteur exactement : le titre a grandi et sa boite de ligne
     descendait jusqu au bord superieur des fleches. Les glyphes, eux,
     restaient cent pixels plus haut, mais autant ne pas laisser deux
     boites se toucher. */
  position:absolute;top:50%;z-index:10;
  appearance:none;background:rgba(6,14,12,.28);border:1px solid rgba(242,237,225,.2);
  width:clamp(52px,4.6vw,66px);aspect-ratio:1;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  color:rgba(242,237,225,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:translateY(-50%);
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             opacity var(--dur-fast) var(--ease),
             transform .7s var(--ease);
}
.arrow svg{width:42%;height:42%}
.arrow:hover{background:rgba(6,14,12,.5);border-color:var(--cream);color:var(--cream)}
.arrow:disabled{opacity:.22;cursor:default}
.arrow--prev{left:clamp(14px,3.2vw,56px)}
.arrow--next{right:clamp(14px,3.2vw,56px)}
@media (pointer:coarse){.arrow{min-height:48px;min-width:48px}}

/* Sur un ecran etroit, la bouteille agrandie venait mordre la fleche :
   il n y a pas la largeur pour les deux. On y grandit donc moins, et la
   fleche se resserre, ce qui rend au telephone le degagement qu il
   avait avant l agrandissement. Sur grand ecran rien ne change. */
@media (max-width:620px){
  .hero{--drink-k:1.12}
  .arrow{width:clamp(46px,12vw,54px)}
  .arrow--prev{left:10px}
  .arrow--next{right:10px}
}

/* L index : le nom de la boisson et son rang, rien d autre */
.index{
  position:relative;z-index:9;grid-row:2;min-width:0;
  width:var(--shell);margin-inline:auto;
  /* Le premier aplat monte sur le comptoir de la hauteur du lift : sans
     cette marge, il coupait l index en deux. */
  padding-bottom:calc(clamp(20px,3.4vh,38px) + var(--panel-lift));
  display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);
  font:700 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
}
.index-name{color:var(--cream);white-space:nowrap}
.index-rule{flex:1;height:1px;background:rgba(242,237,225,.2);min-width:20px}
.index-num{color:rgba(242,237,225,.55);white-space:nowrap;font-weight:400}

/* ---------- 9. Le volet en carreaux ---------- */

.shutter{
  position:fixed;inset:0;z-index:280;pointer-events:none;
  display:grid;overflow:hidden;contain:strict;
}
.shutter[hidden]{display:none !important}
.tcol{
  position:relative;height:260vh;
  transform:translate3d(0,calc(var(--y,-260) * 1vh),0);
  will-change:transform;
  background:url('img/tiles.jpg') repeat;
  background-size:1240px auto;
  box-shadow:inset -1px 0 0 rgba(58,44,22,.5),inset 1px 0 0 rgba(255,255,255,.05);
}
.tcol::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(0,0,0,.1) 46%,rgba(0,0,0,.32));
}

/* ---------- 10. La feuille de carte ---------- */

.sheet{
  position:fixed;inset:0;z-index:320;
  display:grid;align-items:end;justify-items:center;pointer-events:none;
}
.sheet[hidden]{display:none !important}
.sheet-veil{
  position:absolute;inset:0;background:rgba(4,10,8,.7);
  backdrop-filter:blur(9px) saturate(.9);-webkit-backdrop-filter:blur(9px) saturate(.9);
  opacity:0;transition:opacity .5s var(--ease);
}
.sheet.open .sheet-veil{opacity:1;pointer-events:auto}

.sheet-card{
  position:relative;
  width:min(1120px,100% - 2 * var(--gut));
  max-height:min(86svh,920px);
  background:var(--cream);color:#0B1512;
  border-radius:var(--panel-lift) var(--panel-lift) 0 0;
  transform:translate3d(0,102%,0);
  transition:transform .82s cubic-bezier(.2,1.14,.32,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.sheet.open .sheet-card{transform:none;pointer-events:auto}

.sheet-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px) clamp(16px,2vw,26px);
  border-bottom:1px solid rgba(11,21,18,.14);flex:none;
}
.sheet-close{
  appearance:none;background:none;border:1px solid rgba(11,21,18,.22);
  width:44px;height:44px;flex:none;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;color:#4A5D56;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.sheet-close:hover{color:var(--neon-ink);border-color:var(--neon-ink)}
.sheet-close svg{width:14px;height:14px}

.sheet-body{
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(22px,2.6vw,36px) clamp(24px,3.4vw,48px) clamp(32px,4vw,56px);
  -webkit-overflow-scrolling:touch;
}
.sheet-cols{display:grid;gap:clamp(24px,3vw,52px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grp-h{
  font:700 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--neon-ink);margin:0 0 16px;padding-bottom:12px;
  border-bottom:1px solid rgba(11,21,18,.14);
}
/* Trois colonnes, comme sur la carte imprimée : le nom, la contenance,
   le prix. La colonne du milieu reste vide quand il n'y a qu'un format. */
.item{
  display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:4px 14px;
  padding:9px 0;border-bottom:1px solid rgba(11,21,18,.08);
}
.item:last-child{border-bottom:0}
.item .n{font-size:15.5px}
.item .f{font:400 11.5px/1 var(--mono);color:#7A8A84;white-space:nowrap;font-style:italic}
.item .p{font:400 13px/1 var(--mono);color:#3A4C46;white-space:nowrap;min-width:4.6ch;text-align:right}
.item .d{grid-column:1/-1;font-size:13px;color:#4A5D56;margin:3px 0 0;line-height:1.45}

.grp-note{
  font:400 12px/1.5 var(--mono);color:#6B7C75;margin:-6px 0 14px;max-width:36ch;
}

.sheet-note{
  margin:clamp(26px,3vw,40px) 0 0;padding:15px 17px;
  border:1px dashed rgba(196,22,10,.4);border-radius:8px;
  font:400 12.5px/1.55 var(--mono);color:#4A5D56;
}
.sheet-note b{color:var(--neon-ink);font-weight:700}