body.north-home{margin:0;background:#000;color:#f3f5f8;overflow:hidden;height:100vh;height:100dvh;display:block;
  font:15px/1.45 "IBM Plex Sans","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.north-home #map{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;cursor:grab;touch-action:none}
body.north-home #map.drag{cursor:grabbing}
body.north-home::before,body.north-home::after{content:"";position:fixed;top:0;bottom:0;width:min(34vw,520px);z-index:1;pointer-events:none}
body.north-home::before{left:0;background:linear-gradient(90deg,#000000e6 0%,#000000b3 45%,#00000000 100%)}
body.north-home::after{right:0;background:linear-gradient(270deg,#000000e6 0%,#000000b3 45%,#00000000 100%)}

header.top{position:fixed;left:0;right:0;top:0;z-index:3;display:flex;justify-content:center;padding:clamp(14px,2.6vh,28px) 16px 0;pointer-events:none}
header.top h1{margin:0;font:700 clamp(26px,3.2vw,46px)/1 "Syne",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
header.top a{color:#fff;text-decoration:none;border:0;pointer-events:auto;text-shadow:0 0 18px #000,0 0 6px #000}
header.top .z{position:relative;display:inline-block;color:#ff2d2d}
header.top .z::after{content:"";position:absolute;left:6%;right:6%;top:50%;height:max(.085em,2px);background:#ff2d2d;transform:translateY(-50%)}

.lines{position:fixed;z-index:2;top:50%;transform:translateY(-50%);width:clamp(240px,23vw,360px)}
.lines.left{left:clamp(18px,2.6vw,44px)}
.lines.right{right:clamp(18px,2.6vw,44px)}
.lines ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.lines li{margin:0;padding:0}
.lines a{position:relative;display:grid;grid-template-columns:2.2em 1fr;gap:0 8px;align-items:baseline;color:inherit;text-decoration:none;
  padding:clamp(11px,1.7vh,17px) 14px;border:0;border-bottom:1px solid #2a1a1a;border-left:2px solid transparent;
  transition:transform .28s cubic-bezier(.2,.85,.3,1),border-color .28s,background-color .28s,box-shadow .28s}
.lines li:first-child a{border-top:1px solid #2a1a1a}
.lines a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#ff2d2d;transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.85,.3,1)}
.lines.right a::after{transform-origin:right}
.lines a:hover,.lines a:focus-visible{outline:0;border-left-color:#ff2d2d;transform:translateX(6px);
  background:radial-gradient(220px 110px at var(--gx,50%) var(--gy,50%),rgba(255,45,45,.30),rgba(255,45,45,.06) 72%);
  box-shadow:0 0 34px rgba(255,45,45,.16)}
.lines a:hover::after,.lines a:focus-visible::after{transform:scaleX(1)}
.lines a:hover .t,.lines a:focus-visible .t{color:#fff;text-shadow:0 0 18px rgba(255,45,45,.75)}
.lines a:hover .n,.lines a:focus-visible .n{color:#fff}
.lines .s{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease,margin .35s ease}
.lines a:hover .s,.lines a:focus-visible .s{max-height:4.5em;opacity:1;margin-top:3px}
.lines .n{font:600 clamp(14px,1.05vw,17px)/1 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;color:#ff2d2d;letter-spacing:.06em;
  font-variant-numeric:tabular-nums}
.lines .t{font:600 clamp(17px,1.45vw,23px)/1.2 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;color:#fff;letter-spacing:.02em;text-wrap:balance}
.lines .s{grid-column:2;font-size:clamp(12.5px,.9vw,14px);line-height:1.4;color:#a7b0bb;text-wrap:pretty}
.lines.right a{grid-template-columns:1fr 2.2em;text-align:right;border-left:0;border-right:2px solid transparent}
.lines.right a:hover,.lines.right a:focus-visible{border-right-color:#ff2d2d;transform:translateX(-6px)}
.lines.right .n{grid-column:2;grid-row:1;text-align:right}
.lines.right .t{grid-column:1;grid-row:1}
.lines.right .s{grid-column:1}

.layers{position:fixed;z-index:2;left:50%;bottom:clamp(30px,4.4vh,50px);transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:9px;width:min(640px,calc(100vw - 32px));text-align:center}
.layers .headline{margin:0;min-height:1.3em;font:500 clamp(16px,1.35vw,21px)/1.3 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;color:#fff;
  text-shadow:0 0 14px #000,0 0 4px #000;transition:opacity .8s;text-wrap:balance}
.layers .headline b{color:#ff2d2d;font-weight:600;font-size:1.35em;font-variant-numeric:tabular-nums}
.layers .headline.swap{opacity:0}
.layers .key{margin:-2px 0 0;font:400 12px/1.4 "IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.03em;color:#8a94a0;text-shadow:0 0 10px #000;text-wrap:balance}
.layers .tabs{display:flex;gap:6px}
.layers .tabs a{position:relative;padding:6px 16px 10px;color:#8a94a0;text-decoration:none;border:0;
  font:500 13px/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 10px #000}
.layers .tabs a::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:#2a3542}
.layers .tabs a.on{color:#fff}
.layers .tabs a.on::after{background:linear-gradient(90deg,#ff2d2d var(--p,0%),#3a4757 var(--p,0%))}
.layers .tabs a:hover{color:#ff6a5e}
.layers .open{font:500 11.5px/1.2 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8a94a0;text-decoration:none;border:0;text-shadow:0 0 10px #000}
.layers .open:hover{color:#fff}
.layers .open::after{content:" \2192"}

footer.foot{position:fixed;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:center;gap:8px 22px;flex-wrap:wrap;padding:0 16px 10px}
footer.foot p{margin:0;font-size:12px;letter-spacing:.06em;color:#8a94a0}
footer.foot a{color:#8a94a0;text-decoration:none;border:0}
footer.foot a:hover{color:#ff6a5e}
body.north-home #tip{position:fixed}

@media (max-width:980px){
  /* the phone: the frame folds into rows under the name, as on every page of the site (frame.css); the map comes below the rows */
  body.north-home{overflow:auto;height:auto;display:flex;flex-direction:column}
  body.north-home::before,body.north-home::after{display:none}
  body.north-home main{display:contents}
  header.top{position:static;order:0;padding:12px 0 4px;text-align:center}
  .lines.left{order:1}.lines.right{order:2}
  body.north-home #map{order:3;position:relative;inset:auto;height:62vh;height:62dvh;margin-top:14px;touch-action:pan-y}
  .layers{order:4;position:static;left:auto;bottom:auto;transform:none;width:auto;align-self:stretch;margin:14px 16px 4px}
  footer.foot{order:5;position:static;padding:30px 16px 22px}
  .lines{position:static;transform:none;width:auto;margin:0 16px;max-height:none}
  .lines ol{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:0;border-bottom:1px solid #2a1a1a}
  .lines ol::-webkit-scrollbar{display:none}
  .lines li{flex:0 0 auto}
  .lines a,.lines.right a{display:flex;gap:6px;align-items:baseline;padding:11px 14px 11px 0;margin:0;border:0;transform:none;
    background:none;box-shadow:none;text-align:left;white-space:nowrap}
  .lines li:first-child a{border-top:0}
  .lines a:hover,.lines a:focus-visible,.lines.right a:hover,.lines.right a:focus-visible{border:0;transform:none;background:none;box-shadow:none}
  .lines a::after{display:none}
  .lines .s{display:none}
  .lines .n{font-size:12px}
  .lines .t{font-size:15px;color:#a7b0bb;text-shadow:none}
  .lines a:hover .t{color:#fff}
  .lines.right .rail-search{margin:10px 0 2px}
  .lines.right .rail-q{text-align:left;padding-left:0}
  .lines.right .rail-body{overflow:visible}
}
@media (prefers-reduced-motion:reduce){.layers .headline,.lines a,.lines a::after,.lines .s{transition:none}}