:root{
  color-scheme: light;
  --plaster:#F0EBDD;
  --sage:#DDE3D3;
  --wall:#8A4A2E;
  --wall-deep:#6E3821;
  --wall-lit:#9E5636;
  --ink:#292D25;        
  --ink-2:#575C4C;      
  --link:#6B4A33;       
  --cream-type:#F6F1E3; 
  --sage-type:#DDE3D3;  
  --olive:#727C56;      
  --mustard:#C4A451;    
  --cut:rgba(22,8,2,.42);
  --cut-soft:rgba(22,8,2,.55);
  --hair:#C9C2AC;
  --display:'Anek Devanagari',ui-sans-serif,system-ui,sans-serif;
  --body:'Martel Sans',ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(18px,4.4vw,72px);
  --rail:36px;
  --arch:50% 50% 3px 3px / 34% 34% 3px 3px;
  --mk:clamp(28px,3.2vw,44px);
}
.h1{font-family:var(--display);font-weight:800;font-variation-settings:'wdth' 76;
  text-transform:uppercase;line-height:.84;margin:0;
  font-size:clamp(46px,8.4vw,116px);color:var(--ink);text-wrap:balance}
.cap{font:300 12px/1.55 var(--body);color:var(--ink-2);margin:10px 0 0;max-width:52ch}
.panel{background:var(--plaster);border:2px solid var(--wall);border-radius:2px;
  padding:clamp(14px,2vw,26px);margin-top:clamp(20px,2.6vw,32px);
  box-shadow:0 2px 0 rgba(22,8,2,.22),0 24px 38px -32px rgba(22,8,2,.9)}
.panel > header{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;
  justify-content:space-between;margin-bottom:clamp(10px,1.4vw,16px)}
.panel > header .kick{color:var(--link)}
.plot{position:relative;width:100%;aspect-ratio:1000/660;background:#EDE8D8;
  border-radius:2px;overflow:visible}
.plot > svg{display:block;width:100%;height:100%;border-radius:2px}
.mk{position:absolute;left:calc(var(--x)*100%);top:calc(var(--y)*100%);
  width:var(--mk);height:var(--mk);transform:translate(-50%,-50%);
  display:block;text-decoration:none;z-index:2}
.mk::before{content:"";position:absolute;inset:-8px}
.st-mk::before{content:none}
.mk:hover,.mk:focus-visible{z-index:6}
.mk:focus-visible{outline:3px solid var(--link);outline-offset:5px}
.mk-sh{position:absolute;inset:0;overflow:hidden;background:var(--wall-deep);
  box-shadow:0 0 0 2px var(--wall),0 0 0 3.5px var(--plaster),inset 0 0 0 1.5px var(--cut)}
.mk-sh img{width:100%;height:100%;object-fit:cover;display:block}
.mk-ph{height:calc(var(--mk)*1.34)}
.mk-ph .mk-sh{border-radius:var(--arch)}
.mk-no .mk-sh{border-radius:2px;
  box-shadow:0 0 0 2px var(--wall),0 0 0 3.5px var(--plaster),
    inset 0 14px 20px -9px var(--cut-soft),inset 0 0 0 1.5px var(--cut)}
.mk-360 .mk-sh{border-radius:50%;background:var(--plaster);
  border:2.5px dashed var(--wall);box-shadow:none}
.mk-n{position:absolute;left:-5px;bottom:-6px;min-width:19px;height:19px;
  display:grid;place-items:center;padding:0 4px;border-radius:2px;
  background:var(--plaster);color:var(--ink);
  font:800 11px/1 var(--body);font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1.5px var(--wall)}
.mk-360 .mk-n{background:var(--wall);color:var(--cream-type);box-shadow:0 0 0 1.5px var(--plaster)}
.mk-no .mk-sh::after{content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:inset 0 -1.5px 0 var(--wall-lit)}
.mk-lb{position:absolute;left:50%;top:calc(100% + 11px);transform:translateX(-50%);
  background:var(--wall);color:var(--cream-type);white-space:nowrap;
  font:600 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  padding:7px 9px;border-radius:2px;opacity:0;pointer-events:none;
  transition:opacity .15s ease}
.mk:hover .mk-lb,.mk:focus-visible .mk-lb{opacity:1}
.key{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(14px,1.8vw,20px);
  padding-top:14px;border-top:1px solid var(--hair);
  font:300 12.5px/1.5 var(--body);color:var(--ink-2)}
.key span{display:flex;align-items:center;gap:10px;min-width:0}
.key i{flex:0 0 auto;width:26px;height:26px;background:var(--wall-deep);
  box-shadow:0 0 0 1.5px var(--wall)}
.key i.a{border-radius:var(--arch);background:var(--wall);height:34px;width:24px}
.key i.s{border-radius:2px}
.key i.r{border-radius:50%;background:transparent;border:2.5px dashed var(--wall);
  box-shadow:none}
.key i.c{width:26px;height:2px;background:var(--olive);box-shadow:none}
.warn{margin-top:clamp(16px,2vw,24px);background:var(--sage);border-radius:2px;
  padding:clamp(15px,1.9vw,22px);border-left:5px solid var(--wall)}
.warn p{margin:0;font:300 14px/1.62 var(--body);color:var(--ink);max-width:68ch}
.warn p + p{margin-top:9px;font-size:12.5px;color:var(--ink-2)}
.warn b{font-weight:600}
.jump{margin-top:clamp(16px,2vw,24px);display:flex;flex-wrap:wrap;gap:12px 26px;
  align-items:center}
.stations{list-style:none;margin:clamp(20px,2.6vw,32px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--hair)}
.stations > li{display:grid;grid-template-columns:var(--mk) minmax(0,1fr);
  gap:clamp(12px,1.8vw,24px);padding:clamp(16px,2vw,24px) 0;
  border-bottom:1px solid var(--hair);scroll-margin-top:20px}
.stations > li:target{background:var(--sage);border-radius:2px;
  padding-inline:clamp(12px,1.6vw,20px)}
.st-mk{position:relative;width:var(--mk);height:var(--mk)}
.stations > li{align-items:start}
.st-mk.mk-ph{height:calc(var(--mk)*1.34)}
.st-b{min-width:0}
.st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.st-h h3{margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 82;text-transform:uppercase;
  font-size:clamp(19px,2.3vw,29px);line-height:1;color:var(--ink)}
.st-h .hi{font-family:var(--display);font-weight:700;font-variation-settings:'wdth' 86;
  font-size:clamp(14px,1.5vw,18px);color:var(--wall-deep);line-height:1.2}
.st-b p{margin:9px 0 0;font:300 15px/1.62 var(--body);color:var(--ink);max-width:62ch}
.st-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;align-items:center}
.tag{font:800 9.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  padding:6px 8px;border-radius:2px}
.tag.ph{background:var(--wall);color:var(--cream-type)}
.tag.no{background:transparent;color:var(--wall-deep);box-shadow:inset 0 0 0 1.5px var(--wall)}
.st-meta a{font:600 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:var(--link);text-decoration:none;border-bottom:2px solid var(--link);padding-bottom:3px}
.st-meta a:hover{border-bottom-color:var(--ink)}
.rings{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:clamp(20px,2.6vw,32px)}
.ring{border:2px dashed var(--wall);border-radius:2px;padding:clamp(16px,2vw,24px);
  background:rgba(221,227,211,.42);display:flex;flex-direction:column;gap:9px;
  scroll-margin-top:20px}
.ring:target{background:var(--sage)}
.ring .k{font:800 10px/1.35 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--wall-deep);margin:0}
.ring h3{margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 82;text-transform:uppercase;
  font-size:clamp(18px,2.1vw,25px);line-height:1;color:var(--ink)}
.ring p{margin:0;font:300 13.5px/1.58 var(--body);color:var(--ink)}
.ring .n{font:300 11.5px/1.5 var(--body);color:var(--ink-2);
  border-top:1px solid rgba(41,45,37,.2);padding-top:9px;margin-top:2px}
.fact{background:var(--sage);color:var(--ink);border-radius:2px;
  padding:clamp(18px,2.4vw,32px);margin-top:clamp(18px,2.4vw,28px);
  box-shadow:0 1.5px 0 rgba(22,8,2,.2)}
.fact ul{margin:14px 0 0;padding-left:1.15em;display:flex;flex-direction:column;gap:9px}
.fact li{font:300 14.5px/1.6 var(--body);color:var(--ink);max-width:62ch}
.fact li b{font-weight:600}
.out p.o{font:300 clamp(15px,1.2vw,18px)/1.62 var(--body);color:var(--sage-type);
  max-width:48ch;margin:18px 0 0}
@media (max-width:720px){
  .in{grid-template-columns:minmax(0,1fr);gap:16px}
  .ev{writing-mode:horizontal-tb;white-space:normal;padding:9px 13px;
    letter-spacing:.22em;justify-self:start;max-width:100%}
  .mk-lb{display:none}
  .stations > li{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* The plan is the page, so let it have the width. */
svg.plan{display:block;width:100%;height:auto;border-radius:3px}
