.wrap{max-width:1240px;margin:0 auto;width:100%}
.head{display:grid;grid-template-columns:minmax(320px,1fr) minmax(380px,520px);gap:40px;align-items:center;margin:6px 0 10px;min-height:min(70vh,660px)}
.head .htext{align-self:center}
.over{font-size:14px;color:var(--haze)}
.head h1{font-family:var(--serif);font-weight:300;font-size:clamp(46px,5.4vw,80px);line-height:0.98;letter-spacing:-0.025em;margin:8px 0 0}
.head h1 em{font-style:normal;color:var(--air)}
.head .lede{font-size:19px;line-height:1.65;color:#C9C6BC;max-width:52ch;margin:22px 0 0}
.nowbox{margin:28px 0 0;border-top:1px solid var(--line);padding-top:18px;max-width:460px}
.nowbox .k{font-size:14px;color:var(--haze)}
.nowbox .big{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.4vw,44px);line-height:1.05;margin:6px 0 0}
.nowbox .big b{font-weight:300;color:var(--c,#C8B68A)}
.nowbox .sub{font-size:16px;color:var(--haze);margin:10px 0 0;line-height:1.6}
.head .stage{grid-area:auto;position:relative;aspect-ratio:1/1;width:100%;max-width:520px;justify-self:center}

.band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin:24px 0 0}
.band > div{padding:22px 32px 24px;border-left:1px solid var(--line)}
.band > div:first-child{border-left:0;padding-left:0}
.band > div:last-child{padding-right:0}
.band .k{display:block;font-size:15px;color:var(--moonlight)}
.band p{font-size:16px;line-height:1.65;color:var(--haze);margin:10px 0 0}

.listhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:52px 0 0;border-top:1px solid var(--line);padding-top:22px}
.listhead h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,32px);margin:0}
.listhead span{font-size:14px;color:var(--haze)}
.days{display:flex;flex-direction:column;margin-top:10px}
.grouphead{display:flex;align-items:center;gap:14px;padding:26px 0 12px}
.grouphead .i{width:22px;height:2px;background:var(--c);flex:none}
.grouphead .t{font-size:15px;color:var(--c)}
.grouphead .r{font-size:14px;color:#5C6478}
.dayrow{display:grid;grid-template-columns:62px minmax(130px,0.8fr) minmax(0,1.3fr) minmax(165px,0.85fr) 86px 24px;gap:22px;align-items:baseline;padding:16px 0 15px;border-bottom:1px solid var(--line);transition:background 150ms var(--ease-out)}
/* a day already over in this lunation stays readable, only its date steps back */
.dayrow.past .n,.dayrow.past .when{color:#5C6478}
.dayrow.past .nm{color:var(--haze)}
.dayrow:first-of-type{border-top:1px solid var(--line)}
.dayrow:hover{background:rgba(26,33,48,0.55)}
.dayrow .n{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.dayrow .nm{font-size:19px;color:var(--moonlight)}
.dayrow .txt{font-size:16px;line-height:1.5;color:#C9C6BC}
.dayrow .when{font-size:15px;color:var(--haze)}
.dayrow .when b{color:var(--c);font-weight:500}
.dayrow .len{font-size:15px;color:#5C6478;text-align:right}
.dayrow .arr{justify-self:end;color:var(--haze);transition:transform 160ms var(--ease-out),color 160ms var(--ease-out)}
.dayrow:hover .arr{transform:translateX(5px);color:var(--moonlight)}
.dayrow.live{background:rgba(230,225,211,0.05);box-shadow:inset 2px 0 0 var(--c);padding-left:18px;margin-left:-20px}
/* 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:44px 0 0;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:1000px){
  .head{grid-template-columns:1fr;gap:18px;min-height:0;margin-bottom:26px}
  .head .stage{order:-1;max-width:360px}
  .band{grid-template-columns:1fr}
  .band > div{border-left:0;padding:20px 0;border-top:1px solid var(--line)}
  .band > div:first-child{border-top:0;padding-top:0}
  .dayrow{grid-template-columns:52px minmax(0,1fr) 24px;gap:6px 18px}
  .dayrow .n{grid-row:1 / span 2}
  .dayrow .txt{grid-column:2;order:2}
  .dayrow .when{grid-column:2;order:3}
  .dayrow .len{grid-column:2;order:4;text-align:left}
  .dayrow .arr{grid-row:1;grid-column:3}
}
@media (max-width:767px){
  .foot{columns:1}
  html{overflow-x:hidden}
  .page{padding-inline:16px}
  .place{min-height:44px}
  .head h1{font-size:clamp(38px,11vw,52px)}
  .dayrow.live{margin-left:0;padding-left:14px}
  .dayrow .nm{font-size:17px}
}