/* SOLA · sola-tokyo.com
   Système : DESIGN.md à la racine du projet. Tokens : Brand Book V1 p.09–10.
   Polices de substitution tant que les licences ne sont pas fournies :
   Antonio → WT Velo · Hanken Grotesk → Aeonik · Noto Sans JP → Kozuka Gothic. */

:root{
  --cream-50:#FFF7EE; --cream-100:#FFECD3; --cream-200:#FFD7A6;
  --orange:#FFA02E; --terracotta:#A24A31; --brown:#6C3828;
  --ink:#14110D; --ink-800:#1C1B1A; --ink-700:#2D2B29;

  /* Le ciel : recalculé par sola.js selon l'heure de Tokyo */
  --sky:#FFF7EE; --sky-hi:#FFF7EE; --fg:#14110D; --o:1;
  --muted:color-mix(in srgb,var(--fg) 84%,transparent);
  --line:color-mix(in srgb,var(--fg) 18%,transparent);

  --font-display:'WT Velo','Antonio','Oswald',sans-serif;
  --font-text:'Aeonik','Hanken Grotesk',system-ui,sans-serif;
  --font-jp:'Kozuka Gothic Pr6N','Noto Sans JP',sans-serif;

  /* Échelle typographique : 7 tailles, pas une de plus */
  --t-label:12px;                                  /* capitales étroites : signature, heures, étiquettes */
  --t-small:14px;                                  /* mentions */
  --t-body:17px;                                   /* texte courant */
  --t-lead:clamp(20px,calc(1vw + 14px),24px);      /* phrase d'accroche, chapeaux */
  --t-heading:clamp(28px,calc(2.2vw + 16px),44px); /* titres de section, casse phrase */
  --t-display:clamp(40px,calc(4.4vw + 20px),88px); /* titres display en capitales */
  --t-display-xl:clamp(64px,12vw,168px);           /* le grand « Opening 2027 in Tokyo » */

  /* Espacements : une seule échelle */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section:clamp(96px,11vw,160px);
  --gutter:clamp(20px,5vw,64px);
  --max:1280px;

  /* Boutons : deux tailles */
  --btn-h:48px; --btn-px:24px; --btn-t:13px;       /* principal */
  --btn-sm-h:44px; --btn-sm-px:18px; --btn-sm-t:12px; /* compact : barre, événements, langue */

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.22 0 0 0 0 0.16 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sun:radial-gradient(circle at 50% 18%,#FFF7EE 0%,#FFD7A6 34%,#FFC477 58%,#FFA02E 92%);
  --dusk:linear-gradient(225deg,#FFD7A6 0%,#FFA02E 34%,#A24A31 76%,#6C3828 100%);
  --night:linear-gradient(225deg,#A24A31 0%,#6C3828 38%,#2D2B29 78%,#1C1B1A 100%);

  --ease:cubic-bezier(.33,0,.2,1);
}
@media (min-width:900px){
  :root{--t-label:13px;--t-body:18px;--btn-h:52px;--btn-px:28px;--btn-t:14px}
}

/* Couleurs du ciel déclarées comme propriétés animables : le navigateur fait le fondu entre chapitres */
@property --sky{syntax:'<color>';inherits:true;initial-value:#FFF7EE}
@property --sky-hi{syntax:'<color>';inherits:true;initial-value:#FFF7EE}
@property --fg{syntax:'<color>';inherits:true;initial-value:#14110D}
:root{transition:--sky 1.4s var(--ease),--sky-hi 1.4s var(--ease),--fg .9s var(--ease)}
html.instant{transition:none}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--sky);color:var(--fg);font:400 var(--t-body)/1.55 var(--font-text),var(--font-jp);
  -webkit-tap-highlight-color:transparent;overflow-x:clip}
html[lang=ja] body{font-family:var(--font-jp);font-size:calc(var(--t-body) - 1px);line-height:1.85;word-break:auto-phrase;line-break:strict}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
::selection{background:var(--orange);color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--fg);color:var(--sky);padding:10px 16px;border-radius:999px;transform:translateY(-200%)}
.skip:focus{transform:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Grain pain grillé : un calque fixe, jamais sur un élément qui défile */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;background-image:var(--grain);opacity:.36;mix-blend-mode:multiply}
html[data-dark] .grain{mix-blend-mode:soft-light;opacity:.6}

/* ---------- Typographie ---------- */
.label{font:500 var(--t-label)/1.2 var(--font-display);letter-spacing:.18em;text-transform:uppercase}
.display{font-family:var(--font-display);font-weight:500;text-transform:uppercase;letter-spacing:.05em;line-height:.92}
.heading{font-size:var(--t-heading);line-height:1.12;letter-spacing:-.01em}
.lead{font-size:var(--t-lead);line-height:1.35;letter-spacing:-.005em}
html[lang=ja] .i18n-disp{font-family:var(--font-jp);text-transform:none;letter-spacing:.02em;line-height:1.3;word-break:keep-all}
html[lang=ja] .heading{line-height:1.45;letter-spacing:0}
html[lang=ja] .lead{line-height:1.7}
html[lang=ja] .label.i18n{font-family:var(--font-jp);letter-spacing:.06em}

/* ---------- Logo : seul le O bouge ---------- */
.sola-logo{fill:currentColor;height:auto}
.sola-logo .o{transform:translateY(calc(var(--o,0) * 231.23px));transition:transform var(--o-dur,900ms) var(--o-ease,var(--ease))}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--btn-h);padding:0 var(--btn-px);border-radius:999px;
  font:500 var(--btn-t)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:opacity .32s var(--ease),transform .16s var(--ease),background-color .6s var(--ease),color .6s var(--ease)}
.btn-sm{height:var(--btn-sm-h);padding:0 var(--btn-sm-px);font-size:var(--btn-sm-t)}
html[lang=ja] .btn{font-family:var(--font-jp);letter-spacing:.06em;font-size:calc(var(--btn-t) + 1px)}
html[lang=ja] .btn-sm{font-size:calc(var(--btn-sm-t) + 1px)}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-fill{background:var(--fg);color:var(--sky)}
.btn-line{border:1.5px solid currentColor}
.btn-sun{background:var(--orange);color:var(--ink)}
@media (hover:hover){.btn:hover{opacity:.82}}

/* Sélecteur de langue : même hauteur que le bouton compact */
/* La pastille glisse d'une langue à l'autre */
.lang{position:relative;display:inline-grid;grid-template-columns:44px 44px;height:var(--btn-sm-h);border:1.5px solid currentColor;border-radius:999px;padding:3px;flex:none;isolation:isolate}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:44px;border-radius:999px;background:var(--fg);z-index:-1;
  transition:transform .45s var(--ease),background-color .6s var(--ease)}
html[lang=ja] .lang::before{transform:translateX(44px)}
.lang button{border-radius:999px;font:500 var(--btn-sm-t)/1 var(--font-display);letter-spacing:.14em;padding-left:.14em;transition:color .45s var(--ease)}
.lang button[aria-pressed=true]{color:var(--sky)}
@media (hover:hover){.lang button:not([aria-pressed=true]):hover{opacity:.7}}

/* Le petit disque « rec » : icône maison de la musique (un cercle, le seul motif du Brand Book) */
.rec{display:inline-block;width:14px;height:14px;border-radius:50%;flex:none;border:1.5px solid currentColor;border-top-color:transparent;
  background:radial-gradient(circle,currentColor 0 1.8px,transparent 2.2px)}
.listen .rec{animation:spin 2.4s linear infinite;animation-play-state:paused}
@media (hover:hover){.listen:hover .rec{animation-play-state:running}}
.listen-m{width:var(--btn-h);padding:0}
.bar-r{display:flex;align-items:center;gap:var(--s2)}
.foot-r{display:flex;align-items:center;gap:var(--s2)}
/* Téléphone : « Listen » descend près du bouton principal pour laisser la signature sur une ligne */
.bar-r .listen{display:none}
@media (min-width:560px){.bar-r .listen{display:inline-flex}.listen-m{display:none}}

/* ---------- Barre compacte + frise du jour ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;background:var(--sky);border-bottom:1px solid var(--line);
  transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s,background-color .6s var(--ease)}
.nav.on{transform:none;visibility:visible;transition:transform .5s var(--ease),background-color .6s var(--ease)}
.nav .inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s3);padding:calc(env(safe-area-inset-top) + 8px) var(--gutter) 4px}
.nav .home{display:inline-flex;align-items:center;height:var(--btn-sm-h);margin-right:auto}
.nav .home .sola-logo{height:18px;width:auto}
@media (max-width:374px){.nav .btn{padding:0 14px;letter-spacing:.08em}}

/* La frise : 4 temps, un filet, un petit soleil qui glisse vers le chapitre à l'écran.
   Téléphone : seconde ligne pleine largeur. Ordinateur : au centre de la barre. */
.rail{order:5;flex:1 0 100%;display:flex;align-items:flex-start}
.rail-track{flex:1;position:relative;container-type:inline-size;padding-bottom:10px}
.rail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.rail li{position:relative;text-align:center}
.rail a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;text-decoration:none;
  font:500 var(--t-label)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .4s var(--ease)}
html[lang=ja] .rail a{font-family:var(--font-jp);letter-spacing:.04em}
.rail a[aria-current]{color:var(--fg)}
@media (hover:hover){.rail a:hover{color:var(--fg)}}
.rail-track::before{content:"";position:absolute;left:12.5%;right:12.5%;bottom:5px;height:1px;background:var(--line)}
.rail li::after{content:"";position:absolute;left:50%;bottom:-11px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:color-mix(in srgb,var(--fg) 35%,transparent)}
/* Le temps réel de Tokyo : un point orange sur la frise */
.rail li.now::after{background:var(--orange);width:7px;height:7px;margin-left:-3.5px;bottom:-12px}
.rail-sun{position:absolute;left:0;bottom:0;width:12px;height:12px;border-radius:50%;opacity:0;
  transform:translateX(calc((var(--ri,0) + .5) * 25cqw - 50%));transition:transform .7s var(--ease),opacity .4s var(--ease);
  background:var(--sun);box-shadow:0 0 0 1px color-mix(in srgb,var(--fg) 25%,transparent)}
.rail[data-m=cafe] .rail-sun,.rail[data-m=apero] .rail-sun,.rail[data-m=dinner] .rail-sun,.rail[data-m=bar] .rail-sun{opacity:1}
.rail[data-m=apero] .rail-sun{background:var(--dusk)}
.rail[data-m=dinner] .rail-sun{background:var(--night)}
.rail[data-m=bar] .rail-sun{background:radial-gradient(circle closest-side,var(--sky) 0 58%,var(--fg) 62% 100%)}
@media (min-width:900px){
  .nav .inner{flex-wrap:nowrap;padding-bottom:10px}
  .rail{order:0;flex:0 1 460px;margin:0 auto}
  .nav .home{margin-right:0;flex:1 0 0}
  .nav .lang{margin-left:auto}
}

/* ---------- Affiche d'ouverture ----------
   Signature en haut, logo + ligne d'horizon au centre, ouverture + bouton en bas.
   Les vides au-dessus et au-dessous du groupe central sont égaux ; à l'intérieur, l'espacement suit l'échelle. */
/* Le ciel : un calque fixe, plus profond en haut, plus clair à l'horizon (deux pas voisins de la palette) */
.skyfx{position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,var(--sky-hi) 0%,var(--sky) 62%)}
.poster{position:relative;overflow:hidden;isolation:isolate}
.poster .inner{position:relative;z-index:1}

/* Le soleil, c'est le O du logo : il glisse dans son cadre selon l'heure (--o : 1 moitié haute, 0 entier, -1 moitié basse).
   À l'ouverture, un vinyle vient se poser sur le O, se met à tourner, puis se retire : le O glisse alors à l'heure.
   Le disque est posé par sola.js exactement sur le O (mesuré sur le SVG). */
.logo-big{position:relative;z-index:0}
.logo-big>.sola-logo{position:relative;z-index:1}
.o-fx{position:absolute;inset:0;pointer-events:none}
.o-rec{position:absolute;z-index:2;left:calc(var(--clip-x) + var(--cx) - var(--or));top:calc(var(--clip-y) + var(--cy) - var(--or));
  width:calc(var(--or) * 2);aspect-ratio:1;border-radius:50%;opacity:0}
.o-rec[hidden]{display:none}
.o-rec .disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--orange) 0 13%,rgba(20,17,13,.6) 13.4% 14%,transparent 14.4%),
    repeating-radial-gradient(circle,transparent 0 5px,rgba(255,247,238,.06) 5px 6px),var(--night)}
.o-rec .lbl{position:absolute;left:50%;top:50%;width:13%;translate:-50% -50%;color:var(--ink);--o:0}
.o-rec .lbl .sola-logo{width:100%}
/* reflet fixe : c'est lui qui fait voir que le disque tourne dessous */
.o-rec::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 215deg,transparent 0 5%,rgba(255,215,166,.22) 10%,transparent 16% 50%,rgba(255,160,46,.16) 55%,transparent 61%)}
html.instant .sola-logo .o{transition:none}
/* Ouverture : tant qu'elle n'a pas commencé, l'affiche est vide (classe posée dès le <head>).
   Filet de sécurité : si le script ne tourne pas, tout réapparaît au bout de 4 s. */
html.intro .poster :is(.bar,.nowline,.claim,.info,.foot-r),
html.intro .logo-big>.sola-logo>path{opacity:0;animation:intro-safe 0s 4s forwards}
@keyframes intro-safe{to{opacity:1}}
.poster .inner{max-width:var(--max);margin:0 auto;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;row-gap:var(--s7);
  padding:calc(env(safe-area-inset-top) + var(--s4)) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom))}
.poster .bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.poster .bar>.label{white-space:nowrap}
@media (max-width:359px){.poster .bar>.label{letter-spacing:.08em}.lang{grid-template-columns:38px 38px}.lang::before{width:38px}html[lang=ja] .lang::before{transform:translateX(38px)}}
.poster .mid{align-self:center;display:grid}
.logo-big .sola-logo{width:100%;max-height:36svh}
.poster .row{display:grid;gap:var(--s6);margin-top:var(--s5)}
.claim{max-width:22ch}
/* Sur téléphone, l'accroche tient en deux lignes : un peu plus petite, sans limite de largeur, lignes équilibrées */
@media (max-width:599px){html[lang=en] .poster .claim{max-width:none;font-size:clamp(16px,4.5vw,20px);text-wrap:balance}}
html[lang=ja] .claim{max-width:19em}
/* Une seule heure chiffrée sur tout le site : la vraie, celle de Tokyo */
.info{display:grid;gap:var(--s4)}
.nowline{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3);color:var(--muted)}
/* L'heure est la légende du logo : juste sous SOLA, calée à gauche (le O au-dessus montre la même heure).
   Plus grande que les autres étiquettes : c'est la dernière chose qui apparaît à l'ouverture. */
.poster .nowline{margin-top:var(--s5);gap:var(--s1) var(--s4);color:var(--fg);font-size:clamp(15px,calc(.5vw + 12px),19px)}
.poster .nowline :is(.label,.clock-big){font-size:inherit;letter-spacing:.16em}
.nowline .clock-big{font:500 var(--t-label)/1 var(--font-display);letter-spacing:.14em;font-variant-numeric:tabular-nums;color:var(--fg)}
/* Le prochain événement, dès le premier écran : le public arrive souvent d'une affiche */
.next{display:grid;grid-template-columns:52px 1fr auto;column-gap:var(--s4);align-items:center;max-width:420px;padding:var(--s3) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.next[hidden]{display:none}
.next-pst{grid-column:1;grid-row:1/4;width:52px;align-self:center;box-shadow:0 0 0 1px var(--line)}
.next-pst .pst{padding:8%}
.next-pst .pst .hd,.next-pst .pst .ft i{display:none}
.next-pst .pst .ft b{font-size:22cqw}
.next .label{grid-column:2;color:var(--muted)}
.next-t{grid-column:2;font:500 clamp(24px,calc(1vw + 18px),30px)/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;margin-top:var(--s2)}
html[lang=ja] .next-t{font-family:var(--font-jp);text-transform:none;letter-spacing:.02em;font-size:20px;line-height:1.4}
.next-d{grid-column:2;font-size:var(--t-small);color:var(--muted);margin-top:var(--s1)}
.next::after{content:"";grid-column:3;grid-row:1/4;width:10px;height:10px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;rotate:45deg;margin-right:4px;transition:translate .3s var(--ease)}
@media (hover:hover){.next:hover::after{translate:4px 0}}
.poster .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap}
.poster .foot .display{font-size:clamp(28px,calc(1.6vw + 20px),44px);max-width:14ch}
html[lang=ja] .poster .foot .display{font-size:clamp(22px,calc(1vw + 16px),30px)}
@media (min-width:1100px){
  /* Ordinateur : le logo et la colonne de texte partagent la même hauteur ;
     l'accroche s'aligne sur le haut des lettres, l'heure et le prochain événement sur leur pied. */
  .poster .mid{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s8)}
  .logo-big .sola-logo{width:auto;height:min(40svh,360px);max-height:none}
  .poster .row{grid-template-rows:auto auto;align-content:space-between;margin-top:0;height:100%}
  .poster .nowline{grid-column:1;grid-row:2}
  .poster .row{grid-column:2;grid-row:1}
  .claim{padding-top:.1em}
}

/* ---------- 空 ---------- */
.prologue{padding:var(--section) 0 0}
.sora{display:grid;gap:var(--s7)}
.kanji-wrap{display:flex;gap:var(--s2);align-items:flex-start}
.kanji{font:500 clamp(140px,38vw,300px)/.9 var(--font-jp);letter-spacing:0}
.kana{writing-mode:vertical-rl;font:500 16px/1 var(--font-jp);letter-spacing:.35em;margin-top:.5em;color:var(--muted)}
.sora .text{display:grid;align-content:start}
.sora .text h2{margin-bottom:var(--s5);max-width:16ch}
.sora .text p{max-width:38ch}
.sora .text p+p{margin-top:var(--s4)}
html[lang=ja] .sora .text p{max-width:30em}
.o-states{display:flex;gap:var(--s7);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line);flex-wrap:wrap}
.o-states figure{margin:0;display:grid;gap:var(--s3)}
.o-states .sola-logo{height:32px;width:auto}
.o-states figcaption{color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.o-states figure.now figcaption{color:var(--fg)}
.o-states figure.now figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
/* 空 bouge comme le reste de la page : le kanji se lève de sa ligne, comme les lettres de SOLA à l'ouverture,
   puis les trois O montent à leur hauteur l'un après l'autre (matin, midi, soir) quand on arrive dessus */
.kanji-wrap{overflow:hidden}
/* (marge intérieure en bas : la ligne serrée du kanji ne doit pas rogner son dernier trait dans la fenêtre) */
.kanji{display:inline-block;padding-bottom:.1em;transform:translateY(102%);transition:transform 1.4s cubic-bezier(.16,1,.3,1) .1s}
.kanji-wrap.in .kanji{transform:none}
.kana{opacity:0;transition:opacity 1s var(--ease) .9s}
.kanji-wrap.in .kana{opacity:1}
.o-rise figure{--o-dur:1400ms;--o-ease:cubic-bezier(.16,1,.3,1)}
.o-rise .sola-logo .o{transition-delay:calc(var(--i,0) * 180ms + 150ms)}
.o-rise:not(.in) .sola-logo .o{transform:translateY(490px)}
/* En japonais sur ordinateur, le texte se compose à la verticale (tategaki), de droite à gauche */
@media (min-width:900px){
  html[lang=ja] .sora .tate{writing-mode:vertical-rl;text-orientation:mixed;height:min(26em,440px);justify-self:start;margin-bottom:var(--s2)}
  html[lang=ja] .sora .tate h2{margin:0;margin-block-end:var(--s5);max-width:none;font-size:clamp(26px,2.4vw,34px);line-height:1.5;letter-spacing:.06em}
  html[lang=ja] .sora .tate p{max-width:none;margin:0;line-height:1.95;letter-spacing:.08em}
  html[lang=ja] .sora .tate p+p{margin-block-start:var(--s4)}
}
@media (min-width:900px){
  .sora{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:center}
  .kanji-wrap{justify-content:center}
}

/* ---------- La phrase manifeste : une pause entre 空 et la journée ----------
   Seule, en grand. Ses mots s'allument un à un pendant qu'on défile, comme une phrase qu'on lit à voix basse. */
.manifesto{padding:var(--section) 0 calc(var(--section) * .4)}
.mf-t{font-size:clamp(40px,calc(5vw + 18px),104px);line-height:1.02;letter-spacing:-.025em;max-width:15ch;text-wrap:balance}
html[lang=ja] .mf-t{font-size:clamp(32px,calc(3.4vw + 16px),72px);line-height:1.3;letter-spacing:0;max-width:10em}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mf-t{view-timeline:--mf block}
    .mf-t .lw{opacity:.16;animation:lit linear both;animation-timeline:--mf;
      animation-range:cover calc(10% + var(--i) * var(--step)) cover calc(18% + var(--i) * var(--step))}
    @keyframes lit{to{opacity:1}}
  }
}

/* ---------- Les 4 chapitres de la journée ----------
   Chaque chapitre a son ciel fixe, son disque (le soleil à ce moment-là) et sa ligne « On the turntable ». */
.ch{padding:calc(var(--section) * .75) 0;overflow-x:clip}
.ch:has(.ticker){padding-bottom:var(--s8)}
.ch-grid{display:grid;gap:var(--s6);align-items:center}
.ch-disc{width:min(80vw,440px);justify-self:end;margin-right:calc(-1 * var(--gutter) - 8vw)}
.ch-grid.flip .ch-disc{justify-self:start;margin-right:0;margin-left:calc(-1 * var(--gutter) - 8vw)}
.orb{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;clip-path:circle(50% at 50% 50%)}   /* clip-path : Safari iOS ne rognait pas le grain d'un disque qui tourne (carré visible) */
/* Chaque disque se lève derrière une ligne d'horizon quand son chapitre arrive, comme un soleil */
.horizon{position:relative;clip-path:inset(-40% -40% 0 -40%);display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1/var(--up,1)}
.horizon .orb{flex:none}   /* la boîte ne garde que la part levée : pas de vide au-dessus du soleil */
.horizon::after{content:"";position:absolute;left:-12%;right:-12%;bottom:0;height:1px;background:var(--line)}
.horizon .orb{transform:translateY(78%);transition:transform 1.8s var(--ease)}
.horizon.in .orb{transform:translateY(var(--sink,0%))}
/* Chaque chapitre coupe son soleil à la hauteur de son heure, avec la même course que le O de l'affiche
   (lever à 7h, plein vers 15h, bas en fin de soirée) : part cachée = 1 − sin(π·(h−7)/16), posée dans index.html (--sink) */
.orb::after{content:"";position:absolute;inset:0;z-index:2;background-image:var(--grain);opacity:.45;mix-blend-mode:multiply}
.d-sun{background:var(--sun)}
.d-dusk{background:var(--dusk)}
.d-dinner{background:linear-gradient(200deg,#FFA02E 0%,#A24A31 32%,#6C3828 64%,#2D2B29 100%)}
.d-vinyl{background:var(--night);box-shadow:0 0 0 1px var(--line)}
.ch-title{font-size:clamp(52px,calc(6vw + 24px),112px);margin-bottom:var(--s5)}
html[lang=ja] .ch-title{font-size:clamp(34px,calc(3vw + 20px),64px)}
.ch-text .lead{max-width:30ch}
/* Une ligne pour ceux qui ne connaissent pas le mot « apéro » */
.gloss{margin-top:var(--s3);font-size:var(--t-small);color:var(--muted);max-width:36ch}
html[lang=ja] .ch-text .lead{max-width:22em}
/* La bande-son de chaque moment */
.tt{display:grid;gap:var(--s2);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);max-width:36ch;font-size:var(--t-small)}
.tt-k{display:inline-flex;align-items:center;gap:var(--s2);color:var(--muted)}
@media (min-width:900px){
  .ch-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}
  .ch-grid .ch-disc{order:2;width:min(100%,520px);margin:0;justify-self:end}
  .ch-grid.flip .ch-disc{order:0;justify-self:start}
}

/* La carte du comptoir (composant MenuItem du design system) */

/* L'apéro en une bande qui défile lentement (la seule de la page) */
.ticker{margin-top:var(--s8);border-block:1px solid var(--line);overflow:hidden;padding:var(--s4) 0}
.ticker-in{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker-in p{display:flex;align-items:center;gap:var(--s5);padding-right:var(--s5);margin:0;white-space:nowrap;
  font:500 clamp(26px,calc(1.6vw + 18px),44px)/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase}
html[lang=ja] .ticker-in p{font-family:var(--font-jp);text-transform:none;letter-spacing:.02em;font-size:clamp(20px,calc(1vw + 14px),30px)}
.ticker-in .rec{width:12px;height:12px}
@media (hover:hover){.ticker:hover .ticker-in{animation-play-state:paused}}
@keyframes tick{to{transform:translateX(-50%)}}

/* Le disque Sound est un vinyle : sillons et étiquette tournent, le reflet reste fixe comme sous une lampe */
.vinyl{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--orange) 0 13%,rgba(20,17,13,.6) 13.4% 14%,transparent 14.4%),
    repeating-radial-gradient(circle,transparent 0 5px,rgba(20,17,13,.22) 5px 6px);
  animation:spin 9s linear infinite;animation-play-state:paused}
.vinyl .lbl{position:absolute;left:50%;top:50%;width:13%;translate:-50% -50%;color:var(--ink);--o:0}
.vinyl .lbl .sola-logo{width:100%}
.playing .vinyl{animation-play-state:running}
@keyframes spin{to{rotate:360deg}}
.d-vinyl::before,.mix-rec::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 215deg,transparent 0 5%,rgba(255,215,166,.2) 10%,transparent 16% 50%,rgba(255,160,46,.14) 55%,transparent 61%);
  -webkit-mask:radial-gradient(circle,transparent 0 14.6%,#000 15%);mask:radial-gradient(circle,transparent 0 14.6%,#000 15%)}

/* ---------- La musique : direction musicale + mix du mois ---------- */
.music{display:grid;gap:var(--s7);margin-top:var(--s9);padding-top:var(--s8);border-top:1px solid var(--line)}
.director{display:grid;grid-template-columns:120px 1fr;gap:var(--s5);align-items:start}
.portrait .frame{aspect-ratio:4/5;position:relative;overflow:hidden;background:linear-gradient(200deg,#A24A31 0%,#6C3828 55%,#2D2B29 100%)}
.portrait .frame::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.5;mix-blend-mode:multiply}
/* Photo à venir : même bichromie que les affiches (noirs → brun, blancs → crème orangé) */
.portrait .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.22) brightness(1.08)}
/* Bichromie SOLA : les noirs deviennent brun, les clairs crème orangé */
.portrait .frame.photo{background:#1C1B1A}
.portrait .frame.photo::before{content:"";position:absolute;inset:0;z-index:1;background:#4A261B;mix-blend-mode:screen}
.portrait .frame.photo .tint{position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,#FFF3E4 0%,#FFD7A6 60%,#F4B47A 100%);mix-blend-mode:multiply}
.portrait .frame.photo::after{z-index:2}
.director .label,.mix .label{color:var(--muted)}
.dir-name{font-size:clamp(32px,calc(1.4vw + 24px),44px);margin:var(--s2) 0 var(--s4)}
.director p:last-child{max-width:40ch}
.mix{display:grid;grid-template-columns:minmax(0,150px) 1fr;gap:var(--s5);align-items:center;padding:var(--s5);border:1px solid var(--line)}
.mix-rec{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--night);box-shadow:0 0 0 1px var(--line)}
.mix-title{font-size:clamp(28px,calc(1.2vw + 22px),40px);margin:var(--s2) 0 var(--s1)}
html[lang=ja] .mix-title{font-size:24px}
.mix-by{color:var(--muted);font-size:var(--t-small);margin-bottom:var(--s4)}
.mix-go[aria-disabled=true]{background:transparent;color:inherit;border:1.5px dashed currentColor;opacity:.75;cursor:default}
@media (min-width:900px){
  .music{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}
  .director{grid-template-columns:220px 1fr;align-items:end}
}

/* ---------- Titres qui se lèvent : chaque mot monte depuis la ligne, comme le O ---------- */
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.14em;margin-block:-.14em}
.rise .w>span{display:inline-block;transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 80ms + var(--d,0ms))}
.rise.in .w>span{transform:none}
@media (prefers-reduced-motion:reduce){.rise .w>span{transform:none}}

/* ---------- Événements ---------- */
.events{padding-top:var(--s9)}
.ch-bar{padding-bottom:var(--section)}
.events .head{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
.events .head h3{font-size:var(--t-display)}
.events .head p{max-width:40ch}
.ev-list{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,360px);gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--gutter) var(--s2);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;max-width:var(--max);margin:0 auto}
.ev-list::-webkit-scrollbar{display:none}
.ev{scroll-snap-align:start;display:grid;gap:var(--s5);align-content:start}
.ev{grid-template-rows:auto 1fr}
.ev .info{display:flex;flex-direction:column}   /* les boutons se calent en bas : alignés d'une fiche à l'autre */
.ev .info .actions{margin-top:auto;padding-top:var(--s5)}
.ev time{color:var(--muted)}
.ev h4{font-size:clamp(32px,calc(1.2vw + 26px),40px);margin-top:var(--s3)}
.ev .meta{display:grid;gap:2px;margin-top:var(--s4)}
.ev .who{font-weight:500}
.ev .addr,.ev .price{font-size:var(--t-small);color:var(--muted)}
/* La série SOLA : une signature discrète au-dessus du nom de la soirée, qui reste la vedette */
.ev-series{color:var(--fg);opacity:.72;margin-top:var(--s3)}
/* Instagram, là où il sert : sous le texte des sessions (dates, stories, récaps) */
.ig-line{font-size:var(--t-small);color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.ig-link{display:inline-flex;align-items:center;gap:.3em;font:500 clamp(22px,calc(1vw + 16px),30px)/1.1 var(--font-display);letter-spacing:.04em;color:var(--fg);text-decoration:none}
.ig-link [data-ig-handle]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.ig-ico{width:1em;height:1em;flex:none;transition:transform .3s var(--ease)}
@media (hover:hover){.ig-link:hover .ig-ico{transform:rotate(-8deg)}}
@media (hover:hover){.ig-link:hover{color:var(--orange)}}
html[data-dark] .ev-series{color:var(--orange);opacity:1}   /* orange seulement sur fond sombre, où il se lit */
.ev-series+h4{margin-top:var(--s1)}
/* L'historique : les sessions passées, en lignes simples sous les prochaines */
.past{margin-top:var(--s9)}
.past-h{color:var(--muted);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.pe{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.pe-img{display:block;aspect-ratio:4/5;overflow:hidden}
.pe-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pe-img .pst{padding:6%}
.pe-t .label{color:var(--muted)}
.pe-t h4{font-size:clamp(24px,calc(1vw + 18px),32px);margin-top:var(--s2)}
.pe-where{font-size:var(--t-small);color:var(--muted);margin-top:var(--s1)}
.pe-recap{margin-top:var(--s3);max-width:52ch}
.pe-gal{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}
.pe-gal a{display:block;width:72px;aspect-ratio:1;overflow:hidden}
.pe-gal img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
@media (min-width:900px){.pe{grid-template-columns:120px minmax(0,1fr);gap:var(--s7)}}
/* Le flyer du partenaire remplace l'affiche SOLA générée : même format 4:5, image entière */
.pst.pst-flyer{display:block;padding:0;background:var(--ink)}
.pst-flyer img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
a.pst-flyer{transition:transform .5s var(--ease)}
@media (hover:hover){a.pst-flyer:hover{transform:translateY(-4px)}}
.ev .where{color:var(--muted)}
.ev .where a{text-decoration:underline}
.ev .txt{margin-top:var(--s4);max-width:36ch}
.ev .actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.ev-empty{max-width:40ch}
@media (min-width:900px){
  .events .head{margin-bottom:var(--s8)}
  .ev-list{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:var(--s9) var(--s7)}
  .ev{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:var(--s6);align-items:end}
  .ev.feat{grid-column:1/-1;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:center}
  .ev.feat h4{font-size:clamp(48px,calc(3vw + 24px),72px);margin-top:var(--s4)}
  .ev.feat .meta{margin-top:var(--s5)}
  .ev.feat .actions{padding-top:var(--s6)}
}

/* L'affiche : signature en haut, disque au centre, date en bas (Brand Book, affiches) */
.pst{position:relative;aspect-ratio:4/5;display:grid;grid-template-rows:auto 1fr auto;padding:7%;overflow:hidden;isolation:isolate;container-type:inline-size}
.pst::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.38;mix-blend-mode:multiply;pointer-events:none}
.pst .hd{display:flex;justify-content:space-between;align-items:center;font:500 max(12px,3.4cqw)/1 var(--font-display);letter-spacing:.2em;text-transform:uppercase}
.pst .hd .sola-logo{height:max(12px,5.4cqw);width:auto}
.pst .hd .sola-logo .o{transform:none}
.pst .dc{justify-self:center;align-self:center;width:72%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;transition:transform 1.4s var(--ease)}
.pst .dc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(1.04)}
/* Bichromie : les noirs deviennent brun, les blancs crème orangé. Toute photo, même de téléphone, parle SOLA. */
.pst .dc.photo::before,.pst .dc.photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.pst .dc.photo::before{background:#6C3828;mix-blend-mode:screen}
.pst .dc.photo::after{background:linear-gradient(200deg,#FFD7A6 0%,#FFA02E 70%);mix-blend-mode:multiply}
.pst .ft b{display:block;font:500 16cqw/.88 var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.pst .ft i{display:block;font:500 max(12px,3.8cqw)/1.2 var(--font-display);font-style:normal;letter-spacing:.18em;text-transform:uppercase;margin-top:3cqw}
.v0{background:var(--orange);color:var(--ink)} .v0 .dc{background:var(--night)}
.v1{background:var(--ink-800);color:var(--cream-50)} .v1 .dc{background:var(--dusk)} .v1::after{mix-blend-mode:soft-light;opacity:.6}
.v2{background:var(--cream-100);color:var(--ink)} .v2 .dc{background:var(--sun)}
html[data-dark] .pst.v1{outline:1px solid var(--line);outline-offset:-1px}
@media (hover:hover){.ev:hover .pst .dc{transform:translateY(-3%)}}

/* ---------- Inscription : le bloc inversé ---------- */
.join{background:var(--fg);color:var(--sky);padding:var(--section) 0;transition:background-color .6s var(--ease),color .6s var(--ease)}
.join .wrap{display:grid;gap:var(--s7)}
.join .big{font-size:var(--t-display-xl);max-width:8ch}
html[lang=ja] .join .big{font-size:clamp(40px,8vw,96px);max-width:10em}
.join .form-side{display:grid;align-content:end}
.join .form-side h2{margin-bottom:var(--s4)}
.join .form-side>p{max-width:34ch}
.join form{margin-top:var(--s6)}
.field{display:grid;gap:var(--s2)}
.field label{font:500 var(--t-label)/1.2 var(--font-display);letter-spacing:.16em;text-transform:uppercase}
html[lang=ja] .field label{font-family:var(--font-jp);letter-spacing:.04em;text-transform:none}
.inline{display:grid;gap:var(--s3)}
.field input{appearance:none;width:100%;height:var(--btn-h);border:1.5px solid currentColor;border-radius:0;background:transparent;color:inherit;padding:0 var(--s4);font:400 16px/1 var(--font-text)}
.field input::placeholder{color:inherit;opacity:.5}
.field input[aria-invalid=true]{border-color:var(--orange)}
.err{min-height:1.5em;margin-top:var(--s2);font-size:var(--t-small)}
.fine{font-size:var(--t-small);opacity:.72}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.done{display:none;font-size:var(--t-lead);line-height:1.35;max-width:26ch}
form[data-state=done] .form-body{display:none}
form[data-state=done] .done{display:block}
.ig{margin-top:var(--s6);justify-self:start}
@media (min-width:640px){.inline{grid-template-columns:minmax(0,1fr) auto}}
@media (min-width:1000px){.join .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:end}}

/* ---------- Pied de page ---------- */
footer .wrap{padding-top:var(--s9);padding-bottom:calc(var(--s6) + env(safe-area-inset-bottom))}
footer .sola-logo{width:100%;--o:0}
footer .foot-day{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);margin-top:var(--s6)}
footer .foot-day a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font:500 var(--t-label)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
html[lang=ja] footer .foot-day a{font-family:var(--font-jp);letter-spacing:.04em}
@media (hover:hover){footer .foot-day a:hover{color:var(--fg)}}
.foot-open{margin-left:auto;font:500 var(--t-label)/1 var(--font-display);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
html[lang=ja] .foot-open{font-family:var(--font-jp);letter-spacing:.04em}
footer .row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);justify-content:space-between;align-items:center;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
footer .links{display:flex;flex-wrap:wrap;gap:0 var(--s5)}
footer .links a{min-height:44px;display:inline-flex;align-items:center}
footer small{font-size:var(--t-small);color:var(--muted)}

/* ---------- Bouton flottant : le prochain événement ----------
   Entrée ease-out franche (260 ms, depuis 12 px plus bas et 96 %), sortie plus rapide (180 ms). */
.fab{position:fixed;z-index:55;right:max(16px,calc(env(safe-area-inset-right) + 16px));bottom:max(16px,calc(env(safe-area-inset-bottom) + 16px));
  display:inline-flex;align-items:center;gap:var(--s3);min-height:52px;padding:6px 20px 6px 6px;border-radius:999px;text-decoration:none;
  background:var(--fg);color:var(--sky);box-shadow:0 0 0 1px color-mix(in srgb,var(--sky) 18%,transparent);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:100% 100%;
  transition:opacity 180ms ease-out,transform 180ms ease-out,visibility 0s 180ms,background-color .6s var(--ease),color .6s var(--ease)}
.fab.on{opacity:1;visibility:visible;transform:none;
  transition:opacity 260ms cubic-bezier(.23,1,.32,1),transform 260ms cubic-bezier(.23,1,.32,1),background-color .6s var(--ease),color .6s var(--ease)}
.fab:active{transform:scale(.97);transition-duration:120ms}
.fab-dc{width:40px;height:40px;border-radius:50%;flex:none;background:var(--sun);position:relative;overflow:hidden}
.fab-dc::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.45;mix-blend-mode:multiply}
.fab-t{display:grid;gap:2px}
.fab-t .label{font-size:12px;opacity:.8}
html[lang=ja] .fab-t .label{font-family:var(--font-jp);letter-spacing:.04em}
.fab-d{font:500 15px/1.1 var(--font-display);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
html[lang=ja] .fab-d{font-family:var(--font-jp);letter-spacing:.02em;text-transform:none;font-size:14px}

/* ---------- Apparitions ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  /* Moins de mouvement, pas zéro : les déplacements disparaissent, les fondus restent */
  html{scroll-behavior:auto}
  .rv{transform:none;transition:opacity .5s var(--ease)}
  .kanji,.kanji-wrap.in .kanji{transform:none;transition:none}
  .o-rise:not(.in) .sola-logo .o{transform:translateY(calc(var(--o,0) * 231.23px))}
  .rise .w>span{transform:none;transition:none}
  .horizon .orb,.horizon.in .orb{transform:translateY(var(--sink,0%));transition:none}
  .fab,.fab.on{transform:none}
  .rail-sun{transition-property:opacity}
  .sola-logo .o{transition:none}
  .nav{transform:none;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
  .nav.on{opacity:1;transition:opacity .3s var(--ease)}
  .vinyl,.rec,.ticker-in{animation:none!important}
  .ticker{overflow-x:auto}
}