/* ---- 7 journey ---- */
.rees-head{display:flex;align-items:center;gap:1.1rem;margin:0 0 2.5rem}
.rees-head .label{margin:0}
.portrait{width:54px;height:54px;flex:none;margin:0;border-radius:50%;overflow:hidden;
  border:1px solid var(--hairline);display:grid;place-items:center;background:#0b0a07}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
/* The initials that stood in for a photograph are gone; there is a photograph. */

.rail{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:1080px;
  grid-template-columns:repeat(4,1fr)}
.rail li{padding:2rem 1.6rem 2.4rem 0;position:relative}
/* The rail draws itself: the line runs out, the milestone lands, the words
   follow — once, in order, when the section arrives. Four steps, 140ms apart,
   which is the same beat the dots outside are moving at. */
.rail li:nth-child(1){--d:0ms} .rail li:nth-child(2){--d:140ms}
.rail li:nth-child(3){--d:280ms} .rail li:nth-child(4){--d:420ms}
.rail li::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline);
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,.61,.36,1) var(--d)}
.rail li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--bg);
  opacity:0;transform:scale(.3);
  transition:opacity .35s ease calc(var(--d) + 420ms),transform .45s cubic-bezier(.34,1.5,.64,1) calc(var(--d) + 420ms)}
.rail li>*{opacity:0;transform:translateY(9px);
  transition:opacity .5s ease calc(var(--d) + 500ms),transform .5s cubic-bezier(.22,.61,.36,1) calc(var(--d) + 500ms)}
.rail.in li::after{transform:scaleX(1)}
.rail.in li::before{opacity:1;transform:scale(1)}
.rail.in li>*{opacity:1;transform:none}
.when{margin:0 0 .9rem;font:500 .68rem/1 var(--sans);letter-spacing:.14em;color:var(--gold)}
.who{margin:0 0 .35rem;font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1}
.what{margin:0;font-size:.86rem;line-height:1.55;color:var(--muted)}

/* ---- 8 cta ---- */
#kontakt{align-items:center;text-align:center}
.ways{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.4rem;margin:3rem 0 0}
.way{display:inline-flex;align-items:center;gap:.6em;
  font:400 1.05rem/1 var(--sans);color:var(--gold);text-decoration:none;
  padding:.5rem 0;border-bottom:1px solid var(--gold-dim);transition:color .25s,border-color .25s}
.way:hover{color:var(--text);border-color:var(--text)}
/* The mark is set in currentColor, so it warms with the word rather than
   sitting next to it as a separate, louder object. */
.way svg{width:1em;height:1em;flex:none;fill:currentColor;opacity:.8;transition:opacity .25s}
.way:hover svg{opacity:1}
/* The cluster at the end can be picked up, but only from close to itself.
   The cursor is the whole affordance — nothing is drawn that would compete
   with the two words this beat exists to say. */
body.tug{cursor:grab}
body.tugging,body.tugging *{cursor:grabbing}

footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  padding:2rem var(--gut);border-top:1px solid var(--rule);
  font:500 .64rem/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
footer>span:last-child{justify-self:end}
footer a{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:var(--gold-dim);
  transition:color .25s;justify-self:center}
footer a:hover{color:var(--text)}
footer a.legal{display:inline;justify-self:auto}

@media (max-width:560px){
  footer{grid-template-columns:1fr auto;row-gap:.65rem}
  footer a{grid-column:1/-1;grid-row:1;justify-self:center}
}