/* ───────────────────────────────────────────────────────────────────
   GIBRAN ALCOCER — A profile, in three movements.
   Soundtracked by Idea XIX. Reading room, abstract design, real story.
   ───────────────────────────────────────────────────────────────── */

:root{
  --noche:    #0A0908;
  --crema:    #F2EBE0;
  --crema-d:  rgba(242, 235, 224, 0.55);
  --crema-x:  rgba(242, 235, 224, 0.32);
  --crema-w:  rgba(242, 235, 224, 0.14);
  --hair:     rgba(242, 235, 224, 0.12);
  --hair-2:   rgba(242, 235, 224, 0.24);

  --gut:      clamp(22px, 5vw, 72px);
  --maxw:     1240px;
  --readw:    clamp(56ch, 64vw, 84ch);

  --serif:    'Instrument Serif', 'Times New Roman', serif;
  --sans:     -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --ease:     cubic-bezier(.2, .7, .15, 1);
  --ease-soft:cubic-bezier(.4, .0, .15, 1);
  --ease-long:cubic-bezier(.16, .8, .14, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--noche); color:var(--crema); }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(15px, 0.6vw + 13px, 18px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern";
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

::selection{ background:var(--crema); color:var(--noche); }
a{ color:inherit; text-decoration:none; cursor:none; }
@media (hover:none){ a{ cursor:pointer; } }
em{ font-style:italic; }

/* tiny tracked utility label */
.lab{
  font-family:var(--sans);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--crema-d);
}
.lab--right{ text-align:right; }
.lab em{ font-style:italic; text-transform:none; letter-spacing:0.04em; color:var(--crema); }

/* state-locked: loading & foyer-listening don't lock; reading is normal */
body.state-loading{ overflow:hidden; height:100vh; }

/* ────────────────────────────────────────────────────────────────
   CUSTOM CURSOR — dot + ring + dynamic label
   ──────────────────────────────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0;
  z-index:9999;
  pointer-events:none;
  mix-blend-mode:difference;  /* keeps the cursor visible on light/dark */
  opacity:0;
  transition:opacity .6s var(--ease);
  will-change:transform;
}
body.is-booted .cursor{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }
@media (prefers-reduced-motion:reduce){ .cursor{ display:none; } }

.cursor__dot{
  position:absolute; top:0; left:0;
  width:5px; height:5px; border-radius:50%;
  background:var(--crema);
  transform:translate(-50%, -50%);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.cursor__ring{
  position:absolute; top:0; left:0;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--crema-x);
  transform:translate(-50%, -50%) scale(1);
  transition:width .45s var(--ease), height .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.cursor__lab{
  position:absolute;
  top:0; left:0;
  transform:translate(28px, 0);
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  letter-spacing:0.02em;
  white-space:nowrap;
  color:var(--crema);
  opacity:0;
  transition:opacity .45s var(--ease);
}
/* hover: dot shrinks, ring grows */
.cursor.is-hover .cursor__dot{ transform:translate(-50%, -50%) scale(0); opacity:0; }
.cursor.is-hover .cursor__ring{ width:48px; height:48px; border-color:var(--crema); background:rgba(242,235,224,0.06); }
.cursor.has-label .cursor__lab{ opacity:0.92; }

/* ────────────────────────────────────────────────────────────────
   LOADER
   ──────────────────────────────────────────────────────────────── */
.loader{
  position:fixed; inset:0;
  z-index:9990;
  background:var(--noche);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:0 var(--gut);
  transition:opacity 1.1s var(--ease-long), transform 1.1s var(--ease-long), filter 1.1s var(--ease-long);
}
body.is-booted .loader{
  opacity:0;
  transform:scale(0.985);
  filter:blur(6px);
  pointer-events:none;
}
.loader__inner{
  display:flex; flex-direction:column; align-items:center; gap:36px;
  max-width:680px;
}
.loader__place{
  letter-spacing:0.32em;
  opacity:0; animation:fadeUp 1.4s var(--ease-long) .15s forwards;
}
.loader__count{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(120px, 22vw, 280px);
  line-height:0.84;
  letter-spacing:-0.02em;
  color:var(--crema);
  font-variant-numeric:tabular-nums;
  opacity:0; animation:fadeUp 1.6s var(--ease-long) .35s forwards;
}
.loader__count em{ font-style:italic; font-weight:400; }

.loader__sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.2vw, 19px);
  letter-spacing:0.04em;
  color:var(--crema-d);
  min-height:1.2em;
  opacity:0; animation:fadeUp 1.6s var(--ease-long) .55s forwards;
  transition:opacity .8s var(--ease);
}
.loader__rule{
  width:min(420px, 52vw);
  height:1px;
  background:var(--hair);
  position:relative;
  opacity:0; animation:fadeUp 1.6s var(--ease-long) .75s forwards;
}
.loader__rule span{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background:var(--crema);
  transition:width .12s linear;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ────────────────────────────────────────────────────────────────
   STAGE — constant video background, dim
   ──────────────────────────────────────────────────────────────── */
.stage{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  background:var(--noche);
}
.film{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 30%;
  opacity:0.30;
  filter:blur(6px) saturate(0.8) brightness(0.55);
  transition:opacity 2s var(--ease-long), filter 2s var(--ease-long), transform 2.5s var(--ease-long);
  transform:scale(1.04);
}
body.is-listening .film{
  opacity:0.42;
  filter:blur(2px) saturate(0.9) brightness(0.65);
  transform:scale(1);
}
.stage__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(10,9,8,0.65) 100%),
    linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.3) 24%, rgba(10,9,8,0.3) 70%, rgba(10,9,8,0.85) 100%);
}

/* ────────────────────────────────────────────────────────────────
   LIVE WAVEFORM — fixed at very top edge, hairline
   ──────────────────────────────────────────────────────────────── */
.wave{
  position:fixed;
  left:0; right:0;
  top:0;
  width:100%;
  height:60px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.6s var(--ease-long);
}
body.is-listening .wave{ opacity:0.55; }

/* ────────────────────────────────────────────────────────────────
   CONSOLE — fixed bottom corners during reading
   ──────────────────────────────────────────────────────────────── */
.console{
  position:fixed;
  left:0; right:0;
  bottom:0;
  height:0;
  z-index:7;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.2s var(--ease-long);
}
body.is-listening.is-reading .console{ opacity:1; }
.console > *{ pointer-events:auto; }

.console__bl{
  position:absolute;
  bottom:24px; left:var(--gut);
  display:inline-flex; align-items:center; gap:14px;
}
.console__br{
  position:absolute;
  bottom:24px; right:var(--gut);
  display:inline-flex; align-items:center; gap:12px;
  color:var(--crema);
}

/* REC dot (pulses with amplitude in JS via opacity) */
.rec{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--crema);
  box-shadow:0 0 10px rgba(242,235,224,0.6);
  animation:recPulse 1.7s var(--ease) infinite;
}
@keyframes recPulse{
  0%,100%{ opacity:0.55; }
  50%    { opacity:1; }
}

.time{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--crema-d);
  font-variant-numeric:tabular-nums;
}

.ringTimer{ width:24px; height:24px; color:var(--crema); }
.ringTimer__track{ opacity:0.18; }
.ringTimer__bar{
  transform:rotate(-90deg);
  transform-origin:center;
  transition:stroke-dashoffset .3s linear;
  opacity:0.85;
}

/* ────────────────────────────────────────────────────────────────
   CORNER MARK (G·A) — top-left, always visible after boot
   ──────────────────────────────────────────────────────────────── */
.mark{
  position:fixed;
  top:24px; left:var(--gut);
  z-index:8;
  opacity:0;
  transition:opacity 1.6s var(--ease-long);
  pointer-events:none;
}
body.is-booted.is-reading .mark{ opacity:0.7; }
.mark .lab{ letter-spacing:0.42em; font-size:11px; }
.mark em{ font-style:italic; }

/* ────────────────────────────────────────────────────────────────
   FOYER — initial hero, full viewport
   ──────────────────────────────────────────────────────────────── */
.foyer{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:11vh var(--gut);
  z-index:5;
}

.foyer__corner-tl{
  position:absolute;
  top:24px; left:var(--gut);
  letter-spacing:0.32em;
  opacity:0;
}
.foyer__corner-tr{
  position:absolute;
  top:24px; right:var(--gut);
  padding:6px 0;
  opacity:0;
  transition:color .5s var(--ease);
}
body.is-booted .foyer__corner-tl,
body.is-booted .foyer__corner-tr{
  opacity:1;
  transition:opacity 1.6s var(--ease-long) .2s;
}
.foyer__corner-tr:hover .lab{ color:var(--crema); }
.foyer__corner-tr .lab{ transition:color .4s var(--ease); }

.foyer__inner{
  display:flex; flex-direction:column; align-items:center;
  max-width:1200px; width:100%;
}

.foyer__rubric{
  margin:0 0 56px;
  max-width:48ch;
  opacity:0;
}
body.is-booted .foyer__rubric{ animation:fadeUp 1.4s var(--ease-long) .4s forwards; }
.foyer__rubric .lab{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  line-height:2;
  color:var(--crema-d);
}
.foyer__rubric em{ font-style:italic; text-transform:none; letter-spacing:0; color:var(--crema); padding:0 2px; }

.foyer__title{
  margin:0 0 64px;
  font-family:var(--serif);
  font-weight:400;
  line-height:0.84;
  letter-spacing:-0.022em;
  color:var(--crema);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  opacity:0;
}
body.is-booted .foyer__title{ animation:fadeUp 1.8s var(--ease-long) .55s forwards; }

.foyer__t1{
  font-size:clamp(78px, 14vw, 220px);
  font-weight:400;
}
.foyer__t2{
  font-size:clamp(78px, 14vw, 220px);
  margin-top:-0.02em;
  padding-left:0.2em;
}
.foyer__t2 em{ font-style:italic; font-weight:400; }

.enter{
  background:transparent; border:none;
  display:inline-flex; flex-direction:column; align-items:center; gap:18px;
  padding:0;
  color:var(--crema);
  margin-bottom:48px;
  opacity:0;
}
body.is-booted .enter{ animation:fadeUp 1.8s var(--ease-long) .8s forwards; }

.enter__ring{
  position:relative;
  width:104px; height:104px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--crema);
}
.enter__ring svg{ width:100%; height:100%; display:block; transition:transform .6s var(--ease); }
.enter__ring::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--crema-x);
  animation:ringPulse 4s var(--ease) infinite;
}
.enter__ring::after{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid var(--crema-w);
  animation:ringPulse 4s var(--ease) infinite .8s;
}
.enter__triangle{
  position:absolute;
  width:0; height:0;
  border-left:16px solid var(--crema);
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  transform:translateX(2px);
  transition:transform .5s var(--ease);
}
.enter:hover .enter__triangle{ transform:translateX(5px); }
.enter:hover .enter__ring svg{ transform:scale(1.04); }

.enter__lab{
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--crema-d);
  transition:color .5s var(--ease);
}
.enter:hover .enter__lab{ color:var(--crema); }

@keyframes ringPulse{
  0%   { transform:scale(0.94); opacity:0.55; }
  60%  { transform:scale(1.18); opacity:0; }
  100% { transform:scale(1.18); opacity:0; }
}

.foyer__meta{
  margin:0 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(13px, 1.05vw, 16px);
  letter-spacing:0.04em;
  color:var(--crema-d);
  max-width:60ch;
  opacity:0;
}
body.is-booted .foyer__meta{ animation:fadeUp 1.8s var(--ease-long) 1.05s forwards; }
.foyer__meta em{ font-style:italic; color:var(--crema); }

.foyer__cue{
  position:absolute;
  bottom:30px; left:50%;
  transform:translateX(-50%);
  opacity:0;
}
body.is-booted .foyer__cue{ animation:fadeUp 1.8s var(--ease-long) 1.3s forwards; }
.foyer__cue .lab{
  font-size:9.5px;
  letter-spacing:0.36em;
  opacity:0.65;
}

/* ────────────────────────────────────────────────────────────────
   PRELUDE — opening paragraph, just after foyer
   ──────────────────────────────────────────────────────────────── */
.prelude{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24vh var(--gut) 18vh;
  position:relative; z-index:4;
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:clamp(20px, 4vw, 60px);
  align-items:start;
}
.prelude__lab{ letter-spacing:0.36em; padding-top:14px; }
.prelude__line{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px, 3.4vw, 46px);
  line-height:1.28;
  letter-spacing:-0.005em;
  color:var(--crema);
  max-width:36ch;
}
.prelude__line em{ font-style:italic; color:var(--crema); }

@media (max-width:780px){
  .prelude{ grid-template-columns:1fr; gap:24px; }
  .prelude__lab{ padding-top:0; }
}

/* ────────────────────────────────────────────────────────────────
   MOVEMENTS — three editorial profiles
   ──────────────────────────────────────────────────────────────── */
.movement{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14vh var(--gut) 14vh;
  position:relative; z-index:4;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:clamp(20px, 5vw, 80px);
  align-items:start;
}
@media (max-width:880px){
  .movement{ grid-template-columns:1fr; gap:24px; }
}

.movement__head{
  display:flex; flex-direction:column; gap:16px;
  position:sticky; top:14vh;
}
@media (max-width:880px){ .movement__head{ position:static; gap:10px; } }

.movement__head .lab{ letter-spacing:0.32em; }
.movement__head .lab em{ font-style:italic; text-transform:none; letter-spacing:0; color:var(--crema); }

.movement__year{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(96px, 14vw, 220px);
  line-height:0.86;
  letter-spacing:-0.025em;
  color:var(--crema);
}
.movement__year em{ font-style:italic; opacity:0.8; }

.movement__date{ letter-spacing:0.24em; }

.movement__body{
  display:flex; flex-direction:column; gap:36px;
  max-width:54ch;
}
.movement__body p{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px, 1.7vw, 26px);
  line-height:1.5;
  letter-spacing:-0.005em;
  color:var(--crema);
}
.movement__body p em{ font-style:italic; }

.movement__aside{
  grid-column:2;
  margin-top:48px;
  border-top:1px solid var(--hair);
  padding-top:24px;
  max-width:48ch;
}
@media (max-width:880px){ .movement__aside{ grid-column:1; } }
.movement__aside .lab{ letter-spacing:0.32em; }
.movement__aside p{
  margin:14px 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.6;
  color:var(--crema-d);
}
.movement__aside p em{ font-style:normal; color:var(--crema); }

/* ────────────────────────────────────────────────────────────────
   TODAY — the recording itself
   ──────────────────────────────────────────────────────────────── */
.today{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18vh var(--gut) 14vh;
  position:relative; z-index:4;
  border-top:1px solid var(--hair);
  text-align:center;
}
.today__lab{ letter-spacing:0.32em; display:block; margin-bottom:30px; }
.today__title{
  margin:0 0 36px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(80px, 13vw, 200px);
  line-height:0.86;
  letter-spacing:-0.025em;
  color:var(--crema);
}
.today__title em{ font-style:italic; }
.today__line{
  margin:0 auto;
  max-width:54ch;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px, 1.6vw, 24px);
  line-height:1.5;
  color:var(--crema-d);
}
.today__line em{ font-style:italic; color:var(--crema); }

/* ────────────────────────────────────────────────────────────────
   WORKS — clean editorial list
   ──────────────────────────────────────────────────────────────── */
.works{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14vh var(--gut) 14vh;
  position:relative; z-index:4;
  border-top:1px solid var(--hair);
}
.works__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px;
  padding-bottom:18px;
  margin-bottom:24px;
  border-bottom:1px solid var(--hair);
}
.works__list{ list-style:none; padding:0; margin:0; border-bottom:1px solid var(--hair); }
.works__list li{ border-bottom:1px solid var(--hair); }
.works__list li:last-child{ border-bottom:none; }
.works__list a{
  display:grid;
  grid-template-columns:7ch 1fr auto;
  gap:24px;
  align-items:baseline;
  padding:32px 4px;
  position:relative;
  transition:padding .6s var(--ease);
}
.works__list a::before{
  content:""; position:absolute;
  left:0; top:0; width:0; height:1px;
  background:var(--crema);
  transition:width .9s var(--ease);
}
.works__list a:hover{ padding-left:18px; }
.works__list a:hover::before{ width:100%; }
.w-no{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(28px, 3.2vw, 42px);
  letter-spacing:-0.02em;
  color:var(--crema-d);
  font-variant-numeric:lining-nums;
}
.w-name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px, 4.6vw, 68px);
  line-height:0.96;
  letter-spacing:-0.012em;
  color:var(--crema);
}
.w-name em{ font-style:italic; color:var(--crema-d); padding-right:2px; }
.w-meta{
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--crema-d);
  text-align:right;
}
@media (max-width:680px){
  .works__list a{
    grid-template-columns:5ch 1fr;
    grid-template-rows:auto auto;
    gap:8px 16px;
    padding:24px 4px;
  }
  .w-meta{ grid-column:1 / -1; text-align:left; }
}
.works__foot{
  margin-top:36px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.2vw, 19px);
  line-height:1.55;
  color:var(--crema-d);
  max-width:62ch;
}
.works__foot em{ font-style:italic; color:var(--crema); }

/* ────────────────────────────────────────────────────────────────
   END / COLOPHON
   ──────────────────────────────────────────────────────────────── */
.end{
  text-align:center;
  padding:18vh var(--gut) 14vh;
  position:relative; z-index:4;
  border-top:1px solid var(--hair);
  max-width:var(--maxw);
  margin:0 auto;
}
.end__line{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px, 1.5vw, 22px);
  color:var(--crema-d); margin:0 0 28px;
}
.end__mail{
  display:inline-block;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(40px, 6.2vw, 88px);
  line-height:1; letter-spacing:-0.012em;
  color:var(--crema);
  position:relative; padding-bottom:0.08em;
  margin-bottom:64px;
}
.end__mail::after{
  content:""; position:absolute; left:0; right:0; bottom:0.04em;
  height:1px; background:var(--crema);
  transform-origin:left; transform:scaleX(1);
  transition:transform .8s var(--ease);
}
.end__mail:hover::after{ transform:scaleX(1.06); transform-origin:center; }

.end__marks{
  list-style:none; padding:0; margin:0 0 80px;
  display:flex; justify-content:center; gap:36px;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--crema-d);
}
.end__marks a{
  position:relative; padding:6px 2px;
  transition:color .5s var(--ease);
}
.end__marks a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--crema);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.end__marks a:hover{ color:var(--crema); }
.end__marks a:hover::after{ transform:scaleX(1); transform-origin:left; }
@media (max-width:560px){
  .end__marks{ gap:18px; flex-wrap:wrap; }
}

.end__imprint{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  line-height:1.7;
  color:var(--crema-d);
  opacity:.65;
  margin:0 auto;
  max-width:60ch;
}
.end__imprint em{ font-style:italic; color:var(--crema); }

/* ────────────────────────────────────────────────────────────────
   REVEAL — soft fade only
   ──────────────────────────────────────────────────────────────── */
.fade-in{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.fade-in.is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* ────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .fade-in{ opacity:1 !important; transform:none !important; }
  .enter__ring::before, .enter__ring::after{ animation:none; }
  .rec{ animation:none; }
}

/* ────────────────────────────────────────────────────────────────
   MOBILE FINETUNE
   ──────────────────────────────────────────────────────────────── */
@media (max-width:720px){
  .console__bl, .console__br{ bottom:14px; }
  .console__bl{ left:18px; }
  .console__br{ right:18px; }
  .mark{ top:14px; left:18px; }
  .foyer__corner-tl{ left:18px; top:14px; }
  .foyer__corner-tr{ right:18px; top:14px; }
  .foyer__cue{ bottom:18px; }
  .movement__head{ position:static; }
}