/* Delta Music — nur ueber-mich */

.heroGrid{display:grid; gap:30px; grid-template-columns:1fr; align-items:end}
.heroShot{margin:0; position:relative}
.heroShot img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.heroShot figcaption{position:absolute; left:0; bottom:0; background:var(--night);
  color:var(--on-ink); font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.1em; padding:5px 9px; text-transform:uppercase}
.give{border-bottom:1px solid var(--hair); padding-block:26px}
.give .k{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.14em; color:var(--ember); text-transform:uppercase}
.give h3{font-size:20px; margin:10px 0 9px}
.give p{margin:0; color:var(--grey)}
.split p{max-width:60ch}
.split p:first-of-type{margin-top:0}
.split figure{margin:0}
.split figure img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block}
.split figcaption{margin-top:10px; color:var(--grey); font-size:13px;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.06em}
.pull{border-left:3px solid var(--flame); padding:4px 0 4px 20px; margin:28px 0;
  font-size:21px; font-family:Archivo; font-weight:600; letter-spacing:-.02em;
  line-height:1.3; max-width:30ch}
.ringbox{position:relative; aspect-ratio:1; max-width:460px; margin:0 auto; width:100%}
.ringbox svg{width:100%; height:100%; display:block; overflow:visible}
.ringbox circle{fill:none; stroke:var(--hair); stroke-width:1.4;
  transition:stroke .25s ease, stroke-width .25s ease}
.ringbox circle.mile{stroke:var(--grey); stroke-width:2.2; opacity:.85}
.ringbox circle.hit{cursor:pointer}
.ringbox circle.on{stroke:var(--flame); stroke-width:3}
.ringbox .core{fill:var(--ink); stroke:none}
.ringyears{position:absolute; inset:auto 0 -2px 0; text-align:center;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
  color:var(--grey); text-transform:uppercase}
.ringout{border:1px solid var(--hair); background:var(--paper-2); padding:24px 22px;
  min-height:206px}
.ringout .y{font-family:Archivo; font-weight:800; font-size:clamp(38px,7vw,62px);
  line-height:.9; letter-spacing:-.04em; color:var(--ember)}
.ringout h3{font-size:20px; margin:14px 0 8px}
.ringout p{margin:0; color:var(--grey)}
.ringout .hint{font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:14px}
.ringnav{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.ringnav button{background:transparent; border:1px solid var(--hair); color:var(--grey);
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  padding:8px 11px; cursor:pointer}
.ringnav button:hover,.ringnav button[aria-pressed="true"]{border-color:var(--ember);
  color:var(--ember)}
.voyline{position:relative; padding:34px 0 0}
.voyline::before{content:""; position:absolute; left:0; right:0; top:46px;
  height:1px; background:var(--hair)}
.voyline .done{position:absolute; left:0; top:46px; height:1px; background:var(--flame);
  width:0; transition:width .5s cubic-bezier(.2,.7,.2,1)}
.stops{display:grid; grid-template-columns:repeat(5,1fr); position:relative}
.stop{background:transparent; border:0; padding:0 4px 0 0; cursor:pointer; text-align:left;
  font:inherit; color:var(--grey); display:flex; flex-direction:column; gap:30px;
  align-items:flex-start; min-width:0}
.stop .n{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.25}
.stop .dot{width:13px; height:13px; border-radius:50%; background:var(--paper);
  border:1.5px solid var(--hair); margin-left:-1px; flex:0 0 auto;
  transition:background .25s ease, border-color .25s ease, transform .25s ease}
.stop:hover .n,.stop[aria-pressed="true"] .n{color:var(--ink)}
.stop[aria-pressed="true"] .dot{background:var(--flame); border-color:var(--ember);
  transform:scale(1.25)}
.stop:hover .dot{border-color:var(--ember)}
.voyout{border:1px solid var(--hair); background:var(--paper-2); padding:26px 24px;
  margin-top:34px; display:grid; gap:22px; grid-template-columns:1fr}
.voyout h3{font-size:22px; margin:0 0 10px}
.voyout .k{font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ember); margin-bottom:9px}
.voyout p{margin:0; color:var(--grey)}
.voyout .tags{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.voyout .tags span{border:1px solid var(--hair); padding:5px 10px;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grey)}
.qa .row{display:grid; grid-template-columns:1fr; gap:4px;
  border-bottom:1px solid var(--hair); padding-block:20px}
.qa .q{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey); padding-top:5px}
.qa .a{margin:0; max-width:62ch}