/* ===== the festival page, for fans: the story layout (story.css / story.js) plus what is only this page's. ===== */
#p-festival{--hl:7.2}   /* "India's gaming" is the headline's longest line, 7.2 em (same in Permanent Marker) */

/* the hero: the date and place stamp under the line */
#p-festival .fz-stamp{display:flex;flex-wrap:wrap;gap:0 10px;margin:34px 0 0;font:700 15px/34px var(--pen);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);translate:0 calc(13px - .35em)}
#p-festival .fz-stamp span+span::before{content:"\00b7";margin-right:10px;color:var(--pink)}
#p-festival .fz-stamp + .lede{margin-top:0}

/* the creature's props: paper-filled things hide what is behind them; the words on them */
#p-festival .ch .fill.paper{color:var(--paper)}
#p-festival .ch .fs-pass{font:700 13px 'JetBrains Mono',monospace;letter-spacing:.14em}
#p-festival .ch .fs-2024{font-size:20px}
#p-festival .ch .fs-bye{font-size:26px}
#p-festival .ch .fs-blush{opacity:.5}
#p-festival .ch .ch-say.disp{font-size:26px}
#p-festival .ch .ch-say.mono{font-size:20px}
#p-festival .ch .is-on .ch-mash{animation:none}   /* the pass only shakes when asked (a hover on the buttons) */

/* the board: this year's forecast, the label above it */
#p-festival .st-notes:not([data-for]) .note:nth-of-type(n){left:auto;right:auto;top:auto;bottom:auto}
#p-festival .st-notes:not([data-for]) .note:nth-of-type(1){--r:8deg;background:var(--sun);right:-9%;top:-4%}
#p-festival .st-notes:not([data-for]) .note:nth-of-type(2){--r:-14deg;background:var(--lime);left:-12%;bottom:-6%}
#p-festival .st-notes:not([data-for]) .note:nth-of-type(3){--r:-10deg;background:var(--pink);right:-10%;bottom:-1%}
#p-festival .st-notes:not([data-for]) .st-anno{top:-11%;left:-6%}
/* Lucknow 2024's numbers come round the creature while that section is on screen */
#p-festival .st-notes-sec .note{width:38%}
#p-festival .st-notes-sec .note:nth-of-type(n){left:auto;right:auto;top:auto;bottom:auto}
#p-festival .st-notes-sec .note:nth-of-type(1){--r:-7deg;background:var(--sun);left:-14%;top:-2%}
#p-festival .st-notes-sec .note:nth-of-type(2){--r:8deg;background:var(--lime);right:-12%;top:64%}   /* below the polaroid, not over it */
#p-festival .st-notes-sec .note:nth-of-type(3){--r:-9deg;background:var(--pink);left:-10%;bottom:-4%}
#p-festival .st-notes-sec .st-anno{top:-11%;left:18%}
@media (min-width:1024px){
  #p-festival .fz-lastnotes{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* still read out; the board shows them */
}

/* the sections' own content, in the column beside the creature */
#p-festival .st-sec .grid.g3{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#p-festival .fz-new{font:400 17px/1.4 var(--hand);color:var(--ink);margin:10px 0 0}
#p-festival .fz-new::before{content:"\2731";color:var(--pink);margin-right:6px}
#p-festival .fz-day .seq{margin:0;row-gap:16px}
#p-festival .st-sec .muted{line-height:34px;margin:34px 0 0}
#p-festival .fz-lastsec .chart{display:block;width:100%;max-width:560px;margin-top:8px}
#p-festival .fz-lastsec .anno{margin:0}
#p-festival .fz-close .fz-brand{margin:34px 0 0;font-size:17px;line-height:34px}

@media (max-width:1023px){
  #p-festival .st-notes:not([data-for]) .st-anno{display:none}
  #p-festival .st-notes:not([data-for]) .note:nth-of-type(n){left:auto;right:auto;top:auto;bottom:auto}   /* on phones the notes sit in a row */
}
@media (max-width:760px){
  #p-festival .st-sec .grid.g3{grid-template-columns:1fr}
}