.sitefoot{max-width:1360px}
.wrap{max-width:1360px;margin:0 auto;width:100%}
.monthbar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding-bottom:16px;margin:4px 0 0}
.monthbar h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:-0.025em;margin:0;min-width:7ch}
.monthbar h1 .yr{color:var(--haze)}
.monthbar .spacer{flex:1}
.monthbar .note{font-size:14px;color:var(--haze)}
.monthbar .today{font:inherit;font-size:13px;color:var(--moonlight);background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 15px;cursor:pointer;transition:border-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.monthbar .today:hover{border-color:#3A4458}
.monthbar .today:active{transform:scale(0.96)}
.mnav{display:flex;gap:8px;margin-left:6px}

.mstrip{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.mstrip a{font-size:14px;color:var(--haze);border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:border-color 150ms var(--ease-out),color 150ms var(--ease-out)}
.mstrip a span{color:#5C6478;font-variant-numeric:tabular-nums}
.mstrip a:hover{border-color:#3A4458;color:var(--moonlight)}
.mstrip a.on{color:var(--ink);background:var(--moonlight);border-color:var(--moonlight)}
.mstrip a.on span{color:rgba(16,21,31,0.6)}
a.navb{text-decoration:none}
.navb.off{opacity:0.3;cursor:default}
a.today{display:inline-flex;align-items:center;text-decoration:none}
/* the two side columns carry the same width, so the Moon sits on the centre of the page,
   and every column starts on the same top line */
.top{display:grid;grid-template-columns:minmax(280px,1fr) minmax(330px,440px) minmax(280px,1fr);gap:clamp(20px,3vw,52px);align-items:start;padding:clamp(14px,2vw,26px) 0 clamp(16px,2vw,28px)}
.top .stage{grid-area:auto;max-width:430px;justify-self:center;align-self:center}
.pick .k{font-size:14px;color:var(--haze)}
.pick .big{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-0.02em;margin:6px 0 0}
.pick .phase{font-size:19px;color:#C9C6BC;margin:12px 0 0}
.pick .phase b{color:var(--moonlight);font-weight:500}
.pick .seen{font-size:14px;color:var(--haze);margin:6px 0 0}
.pick .facts{margin-top:24px}
.pick .facts li{flex:1 1 50%;min-width:130px}
.pick .v em{font-style:normal;color:var(--el,#E6E1D3)}
.pick .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--moonlight);border-bottom:1px solid var(--line);padding-bottom:3px}
.pick .more .arr{display:inline-block;transition:transform 150ms var(--ease-out)}
.pick .more:hover .arr{transform:translateX(4px)}

.side{display:flex;flex-direction:column;gap:22px;align-self:start}
.side .adslot{max-width:300px;margin-left:auto}
.qhead{font-size:14px;color:var(--haze);border-bottom:1px solid var(--line);padding-bottom:10px}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.qlist button{width:100%;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;text-align:left;font:inherit;color:var(--moonlight);background:transparent;border:0;border-bottom:1px solid var(--line);padding:13px 2px;cursor:pointer;transition:background 140ms var(--ease-out)}
.qlist button:hover{background:rgba(26,33,48,0.55)}
.qlist .qn{font-size:16px}
.qlist .qd{font-size:14px;color:var(--haze);font-variant-numeric:tabular-nums;text-align:right}
.qlist .none{font-size:14px;color:var(--haze);padding:13px 2px}
.adslot{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:9px;background:rgba(26,33,48,0.5)}
.adslot .lab{font-size:11px;letter-spacing:0.08em;color:#5C6478}
.adslot .box{width:100%;max-width:250px;height:250px;border:1px dashed #2B3346;border-radius:10px;display:grid;place-items:center;color:#5C6478;font-size:13px}

.mdow{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.mdow span{font-size:13px;color:var(--haze);padding:0 12px 9px;letter-spacing:0.04em}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr)}
.mcell{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:3px;align-items:stretch;text-align:left;min-height:122px;padding:13px 13px 15px;font:inherit;color:var(--moonlight);background:transparent;border:0;border-bottom:1px solid var(--line);border-left:1px solid var(--line);cursor:pointer;transition:background 150ms var(--ease-out)}
.mcell:nth-child(7n+1){border-left:0}
.mcell:hover{background:rgba(26,33,48,0.6)}
.mcell .r1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mcell .d{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.mcell .pd{flex:none;transition:transform 200ms var(--ease-out)}
.mcell:hover .pd{transform:scale(1.14)}
.mcell .sg{font-size:14px;color:var(--el);margin-top:7px}
.mcell .ld{font-size:13px;color:var(--haze);font-variant-numeric:tabular-nums}
.mcell .ev{font-size:12px;color:var(--moonlight);margin-top:6px;display:flex;align-items:center;gap:6px}
.mcell .ev i{width:5px;height:5px;border-radius:50%;background:var(--moonlight);flex:none}
.mcell .tag{font-size:11px;letter-spacing:0.06em;color:var(--ink);background:var(--moonlight);border-radius:999px;padding:2px 8px}
.mcell.out{opacity:0.42}
.mcell.sel{background:rgba(230,225,211,0.055)}
.mcell .acc{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--el);transform:scaleY(0);transform-origin:top;transition:transform 260ms var(--ease-out)}
.mcell.sel .acc{transform:scaleY(1)}

.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:56px 0 0;border-top:1px solid var(--line)}
.explain > a{padding:22px 28px 24px 0;border-left:1px solid var(--line);padding-left:28px;transition:background 150ms var(--ease-out)}
.explain > a:first-child{border-left:0;padding-left:0}
.explain > a:hover{background:rgba(26,33,48,0.4)}
.explain h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 8px}
.explain p{font-size:17px;line-height:1.6;color:#C9C6BC;margin:0}
.explain .go2{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;color:var(--haze)}
.explain .go2 .arr{display:inline-block;transition:transform 150ms var(--ease-out)}
.explain > a:hover .go2{color:var(--moonlight)}
.explain > a:hover .arr{transform:translateX(4px)}
/* the closing note runs the whole width of the page in two columns, instead of
   stopping halfway and leaving the right half of the line empty */
.foot{border-top:1px solid var(--line);padding-top:18px;margin:48px 0 30px;font-size:15px;color:var(--haze);line-height:1.7;max-width:none}
.foot{columns:2;column-gap:clamp(32px,4vw,64px)}

@media (max-width:1180px){
  .top{grid-template-columns:1fr 1fr;grid-template-areas:"stage stage" "pick side";row-gap:14px}
  .top .stage{grid-area:stage;max-width:400px}
  .pick{grid-area:pick}.side{grid-area:side}
  .mcell{min-height:108px;padding:11px 10px 13px}
  .mcell .d{font-size:22px}
}
@media (max-width:900px){
  .top{grid-template-columns:1fr;grid-template-areas:"stage" "pick" "side"}
  .top .stage{max-width:330px;justify-self:center}
  .mcell .sg,.mcell .ld{font-size:11px}
  .explain{grid-template-columns:1fr}
  .explain > a{border-left:0;padding-left:0;padding-block:20px;border-top:1px solid var(--line)}
  .explain > a:first-child{border-top:0}
}
@media (max-width:767px){
  .foot{columns:1}
  html{overflow-x:hidden}
  .page{padding-inline:16px}
  .place{min-height:44px}
  .monthbar{flex-wrap:wrap;gap:10px}
  .monthbar h1{font-size:34px;min-width:0;flex:1 1 100%;order:-1}
  /* the top of this page used to fill the whole first screen before a single
     day was visible: the months run on one line that slides, the line about the
     time zone goes (the city button in the header already says it), and the
     Moon comes after the day it describes */
  .monthbar .note{display:none}
  .mstrip{flex-wrap:nowrap;overflow-x:auto;margin:12px 0 0;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .mstrip a{flex:none}
  .top{display:flex;flex-direction:column}
  .top .pick{order:1}
  .top .stage{order:2;max-width:250px;margin:6px auto 0}
  .top .side{order:3}
  .mdow span{padding:0 4px 8px;font-size:10px;text-align:center}
  /* seven columns on a phone leave no room for words: the day, its shape,
     and the tap that sends the details up to the panel */
  .mcell{min-height:70px;padding:9px 2px 11px;align-items:center;text-align:center;gap:3px}
  .mcell .r1{flex-direction:column;gap:5px}
  .mcell .d{font-size:19px}
  .mcell .sg,.mcell .ld,.mcell .tag,.mcell .ev.q{display:none}
  .mcell .ev{font-size:10px;line-height:1.25;justify-content:center;margin-top:2px}
  .mcell .ev span{display:none}
  .mcell .ev i{display:none}
  .mcell.today{box-shadow:inset 0 0 0 1px #3A4458}
  .mcell .acc{left:0;right:0;top:auto;bottom:0;width:auto;height:2px;transform-origin:center;transform:scaleX(0)}
  .mcell.sel .acc{transform:scaleX(1)}
}