/* Fixes layered over the built chart page (keep in sync with the chart source on its next rebuild). */
/* The close X belongs to the expanded chart only */
.zoom-x[hidden]{display:none!important}
.wheel-stage:not(.zoomed) .zoom-x{display:none!important}

/* Masthead: the same minimal dark band as the other pages, with the cursor star trail and Bri's lace under it */
@font-face{font-family:'Ophi Hand';font-display:swap;src:url(/assets/fonts/hand-standin.woff2) format('woff2')}
.chart-mast{position:relative;overflow:clip;z-index:3;padding-block:1rem clamp(1.8rem,4.4vw,3rem)}
.chart-mast > .wrap{position:relative;z-index:1}
.chart-mast canvas.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.chart-mast .nav{border-bottom:1px solid rgba(236,231,220,.35)}
.chart-mast .chip{color:var(--ink)}
.chart-mast .headline{margin-top:clamp(1.6rem,4vw,2.8rem)}
.chart-mast .headline h1{font-size:clamp(42px,7vw,92px);color:var(--paper)}
.chart-mast .byline{font-size:clamp(10px,1vw,11.5px)}
.chart-mast .hand-line{margin:12px 0 0;text-align:center;font-family:'Ophi Hand',cursive;font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:#ece3cf}
.lace-edge{position:relative;z-index:4;height:clamp(46px,5.6vw,72px);pointer-events:none;
  margin-top:calc(clamp(46px,5.6vw,72px) * -.3);margin-bottom:calc(clamp(46px,5.6vw,72px) * -.7);
  background:url(/assets/lace-ink.png) center top/auto 100% repeat-x}
#top{padding-top:calc(1.6rem + clamp(46px,5.6vw,72px) * .5)!important}

/* Serpent Bearer: the glyph is a small sticker in the corner and the text wraps around it */
#serpent{padding-block:clamp(1.8rem,4vw,3rem)}
#serpent .serpent{display:block;max-width:min(72rem,100%)}
#serpent .serpent::after{content:"";display:table;clear:both}
#serpent .serpent p{max-width:none}
#serpent .oph-glyph{float:left;width:clamp(64px,8vw,92px);height:auto;margin:.2rem 1.2rem .6rem 0;transform:rotate(-6deg);
  border:1.5px dashed rgba(236,231,220,.55);border-radius:50%;padding:10px 8px 6px;overflow:visible}
.chart-mast .brand{color:var(--paper)}
.chart-mast .nav{gap:clamp(10px,2vw,24px)}
.chart-mast .nav .chip{margin-left:auto}

/* Aspects stay closed until a planet is chosen */
#aspList .pick-hint{list-style:none;padding:1.4rem 1rem;border:1.5px dashed rgba(22,19,16,.45);text-align:center;
  font-family:'Ophi Hand',cursive;font-size:1.5rem;line-height:1.2;color:#2f3d7c}

/* Desktop: placements on the left, the Serpent Bearer beside them; phones keep the stacked layout */
@media(min-width:1100px){
  .pl-serp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.6rem,3vw,2.6rem);align-items:start;
    max-width:calc(var(--banner) + 8vw);margin:0 auto;padding-inline:max(16px,4vw)}
  .pl-serp > .band{padding-inline:0}
  .pl-serp > #placements .wrap,.pl-serp > #serpent .wrap{max-width:none}
  .pl-serp > #serpent{position:sticky;top:1.2rem;margin-top:clamp(2.2rem,6vw,4.2rem);padding:clamp(1.4rem,2.4vw,2rem);
    border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
  .pl-serp > #serpent .headline h2{font-size:clamp(2rem,3.2vw,2.8rem)}
  .pl-serp > #serpent .oph-glyph{width:64px}
  .pl-serp > #serpent .serpent .small,.pl-serp > #serpent .serpent p{font-size:.88rem}
  .pl-serp > #serpent .serpent .verdict{font-size:1.4rem}
  #placements table{font-size:.86rem}
  #placements td,#placements th{padding-block:.42rem}
}
.chart-mast .nav{justify-content:flex-start}
.chart-mast .nav .chip{margin-left:0}