/* ========================================================================= *
 *  GANESH CHATURTHI 2026 — the whole festival, in one stylesheet            *
 *                                                                           *
 *  Nothing in here applies until festival.js puts `festival-on` on <html>,  *
 *  and it only does that between the two dates written in that file. So a   *
 *  page can carry this stylesheet all year and look like itself all year.   *
 *                                                                           *
 *  Deleting the festival is deleting two files and two <link>/<script>      *
 *  lines per page. Nothing in site.css knows this exists.                   *
 *                                                                           *
 *  What it dresses, on EVERY page that loads it:                            *
 *    · the announcement bar carries the festival line                       *
 *    · every scalloped awning becomes a mango-leaf and marigold toran,      *
 *      the first one with a Ganesha seal hung in the middle of it           *
 *    · the sticky header keeps a marigold ribbon along its bottom edge, so  *
 *      the festival is still present once the toran has scrolled away       *
 *    · a marigold strand hangs down each side of a wide window              *
 *    · marigolds drift down over the page                                   *
 *    · a small Ganesha stands in the bottom corner, with the sound switch   *
 *    · a second toran hangs inside the footer                               *
 *    · the page ground warms a shade towards marigold                       *
 *    · the welcome appears on every load                                    *
 *  and on the home page only, which is where the offer lives:               *
 *    · the modak band, the festival in the scrolling strip, and a Ganesha  *
 *      lit in the corner of the hero                                       *
 * ========================================================================= */

.nav-festival{display:none}
.festival-on .nav-festival{display:revert}
.mnav nav a.nav-festival{color:var(--saffron-2)}

/* The nav row was already exactly full at six entries — a seventh crushed the
   wordmark down to three lines at every width. A festival is an announcement,
   not a permanent destination, so it takes the announcement bar's left slot
   for the fortnight it runs and leaves the row alone. Below 760 that slot is
   already hidden for space, and the band itself is two screens away. */
.tb-fest{display:none}
.festival-on .tb-l{display:none}
.festival-on .tb-fest{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.tb-fest::before{content:"✦";color:var(--saffron)}
.tb-fest b{color:var(--saffron-2)}
.tb-fest i{font-style:normal}
.tb-fest:hover b{text-decoration:underline}
/* the festival line costs the announcement bar about 350px. Below ~1180 the
   bar cannot carry it AND the street address, and the address is the one a
   visitor can get from three other places on this page. */
@media(max-width:1180px){ .festival-on .topbar .tb-addr{display:none} }
/* what a phone does with this line is set in THE PHONE, at the end */

/* the marigold in the scrolling strip of dish names */
.festival-on .marquee .mq-fest{color:var(--saffron-2)}

/* the buttons pick up the marigold gradient for the fortnight */
.festival-on .btn-primary{background:linear-gradient(135deg,#F6C368,var(--saffron) 52%,#D98F22)}
.festival-on .btn-primary:hover{background:linear-gradient(135deg,#FBD07C,var(--saffron-2) 52%,#E4A231)}

/* ---- the offer band ---------------------------------------------------- */
.fest{background:#1A0E0C;color:var(--cream)}
.fest-board{position:relative;isolation:isolate;display:flex;align-items:center;
  width:100%;min-height:clamp(360px,34vw,470px)}
.fest-board::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:url(../img/ganesh-banner.jpg);background-size:cover;
  background-position:right center;background-repeat:no-repeat}
/* the scrim is a wedge, not a wash: fully dark where the words are, gone by
   the time it reaches the brass plate */
.fest-board::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(19,10,8,.94) 0%,rgba(19,10,8,.86) 26%,rgba(19,10,8,.38) 46%,transparent 62%)}
.fest-inner{--fest-gutter:max(clamp(20px,5vw,48px), calc((100% - 1124px)/2));
  width:100%;padding:clamp(30px,3.4vw,46px) var(--fest-gutter);
  max-width:min(calc(50% + var(--fest-gutter)), 64%)}

.fest-kicker{display:block;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-weight:600;
  font-size:clamp(9.5px,.8vw,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--saffron-2)}
.fest-head{font-size:clamp(32px,4vw,58px);line-height:.96;margin-top:13px;color:var(--cream)}
.fest-head span{display:block;white-space:nowrap}
.fest-hl{color:var(--saffron)}
.fest-sub{margin-top:14px;max-width:37ch;font-size:clamp(14px,1.15vw,16.5px);color:#E7D7BD}
.fest-spec{list-style:none;display:flex;flex-wrap:wrap;margin:14px 0 0;padding:0;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#BCA98A}
.fest-spec li{white-space:nowrap}
.fest-spec li:not(:last-child)::after{content:"·";margin:0 8px;opacity:.6}

.fest-buy{margin-top:clamp(17px,2vw,25px);padding-top:clamp(17px,2vw,25px);
  border-top:1px solid rgba(232,217,190,.22);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.fest-wa{box-shadow:0 12px 28px -10px rgba(233,162,58,.75)}
.fest-wa svg{width:17px;height:17px;fill:currentColor;flex:none}
.fest-call{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;color:#D8C6A6}
.fest-call b{color:var(--saffron-2)}
.fest-call:hover b{text-decoration:underline}
.fest-note{margin-top:13px;font-size:12px;color:#B49C7C}

@media(max-width:900px){
  /* The words sit UNDER the photograph here, and the room for it is the
     board's own top padding. It was the child's margin-top, which collapsed
     out through this box — no top padding, no border to stop it — and so
     moved the whole band down instead of moving the words down inside it. */
  .fest-board{--band:clamp(240px,38vw,330px);display:block;min-height:0;
    padding:calc(var(--band) - 2px) 0 clamp(26px,5vw,34px)}
  /* This band used to carry a photograph of modaks ALONE — which meant the
     one section of the site that is about Ganesh Chaturthi had no Ganesha in
     it on a phone, where most people read it. A tablet gets the wide banner
     anchored right so the idol survives the crop. */
  .fest-board::before{inset:0 0 auto 0;height:var(--band);
    background-image:url(../img/ganesh-banner.jpg);background-position:78% 50%}
  .fest-board::after{inset:0 0 auto 0;height:var(--band);
    background:linear-gradient(180deg,transparent 28%,rgba(19,10,8,.3) 58%,rgba(19,10,8,.8) 86%,#1A0E0C 100%)}
  .fest-inner{max-width:none;position:relative;z-index:1;
    padding:0 clamp(20px,5vw,48px)}
  /* sizes here were inherited from the desktop column, where the words sit
     beside a photograph and can afford to be quiet. On a phone this band IS
     the page, so everything in it steps up a size. */
  .fest-kicker{font-size:11.5px;letter-spacing:.2em;white-space:normal}
  .fest-head{font-size:clamp(36px,8.8vw,54px);margin-top:15px}
  .fest-sub{max-width:36ch;font-size:16.5px;line-height:1.62;color:#EDDFC8}
  .fest-spec{font-size:11.5px;letter-spacing:.14em;color:#CBB897;margin-top:16px}
  .fest-call{font-size:13.5px}
  .fest-note{font-size:13px;line-height:1.55;color:#C4AC8B}
  .fest-buy{gap:14px}
  .fest-buy .btn{width:100%;justify-content:center}
  .fest-call{width:100%;text-align:center}
}

/* ---- the welcome, on every page load while the festival is on ---------- */
.fest-pop{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:20px;
  background:rgba(16,9,6,.84);opacity:0;transition:opacity .28s}
/* `display:grid` above is an author rule and the browser's own `[hidden]` rule
   is not, so the author one wins and `hidden` stops meaning anything. Without
   this line the welcome stays laid over the page at opacity 0 once it is
   closed — invisible, and swallowing every click on the site underneath it. */
.fest-pop[hidden]{display:none}
.fest-pop.open{opacity:1}
.fest-pop-card{position:relative;width:min(100%,860px);max-height:92vh;overflow:hidden;
  display:grid;grid-template-columns:.84fr 1fr;background:#1A0E0C;color:var(--cream);
  border:1px solid rgba(233,162,58,.32);border-radius:22px;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.85);
  transform:translateY(14px) scale(.97);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.fest-pop.open .fest-pop-card{transform:none}
/* the artwork is a <picture>, which is an inline box by default and would sit
   on the text baseline with a gap under it */
.fest-pop-art{display:block;overflow:hidden;background:#241309;min-height:360px}
.fest-pop-art img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.fest-pop-say{padding:clamp(24px,3vw,36px);overflow:auto}
.fest-pop-say h3{font-size:clamp(29px,3.3vw,40px);line-height:1;margin-top:12px;color:var(--cream)}
.fest-pop-say h3 b{color:var(--saffron);font-weight:400}
.fest-pop-say p{margin-top:12px;font-size:14.5px;color:#E7D7BD}
.fest-pop-say .btn{margin-top:20px;width:100%;justify-content:center}
.fest-pop-more{display:block;margin-top:13px;text-align:center;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#C6AE8A}
.fest-pop-more:hover{color:var(--saffron-2)}
.fest-pop-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1.5px solid rgba(247,240,222,.3);background:rgba(20,12,8,.6);
  color:var(--cream);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s}
.fest-pop-x:hover{background:var(--saffron);border-color:var(--saffron);color:#231a0c}

@media(max-width:720px){
  .fest-pop{padding:14px}
  .fest-pop-card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:90vh}
  /* The frame is a wide band here, and the photograph behind it is composed
     wide to match — so it is shown at its OWN proportions and nothing is cut
     off it. Cropping a square photograph into this band is what lost the
     idol at the top of it and the plate at the bottom. */
  .fest-pop-art{min-height:0}
  .fest-pop-art img{height:auto;aspect-ratio:1100/778;object-position:50% 50%}
  .fest-pop-say{padding:20px 20px 24px}
  .fest-pop-say h3{font-size:clamp(28px,7.6vw,35px)}
  .fest-pop-say p{font-size:15.5px;line-height:1.6}
  .fest-pop .fest-kicker{font-size:11px;letter-spacing:.19em;white-space:normal}
  .fest-pop-more{font-size:12px}
}
/* a short phone: the picture gives up height first, and gives it up by being
   cropped a little rather than by pushing the button off the bottom */
@media(max-width:720px) and (max-height:700px){
  .fest-pop-art img{aspect-ratio:auto;height:clamp(120px,22vh,170px);object-fit:cover}
  .fest-pop-say p{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){
  .fest-pop,.fest-pop-card{transition:none}
}

/* ---- the toran, and the seal hung in the middle of it -------------------
 * A mango-leaf and marigold garland, the thing that actually goes up over a
 * doorway for Ganesh Chaturthi, with a Ganesha seal hung in the centre the
 * way an arch is dressed. It is a 138x224 tile repeated along x, cut on an
 * empty column so the repeat has no seam.
 *
 * It sits IN THE FLOW under the header rather than floating over the page.
 * A fixed garland would be present on every screen, but it would also cover
 * whatever the visitor scrolled to — and the thing that keeps the festival
 * present once this has scrolled away is the marigold rope along the bottom
 * of the sticky header, which costs five pixels and covers nothing.
 * ----------------------------------------------------------------------- */
/* every awning becomes a garland for the fortnight: same strip, same place in
   the page's rhythm, no new layout */
.festival-on .awning.fest-awning-off{display:none}
.fest-toran{display:none}
.festival-on{--toran-h:104px; --seal:132px}
.festival-on .fest-toran{display:block;position:relative;z-index:4;pointer-events:none;
  height:calc(var(--toran-h) + var(--seal) - 62px);
  background:url(../img/toran.png) repeat-x left top;background-size:auto var(--toran-h)}
.festival-on .fest-toran::after{content:"";position:absolute;left:50%;
  top:calc(var(--toran-h) - 34px);transform:translateX(-50%);
  width:var(--seal);height:var(--seal);border-radius:50%;
  background:url(../img/ganesh-idol.webp) center 62%/auto 84% no-repeat,
             radial-gradient(circle at 50% 78%,#FFF4DC,#FFFDF6 62%);
  border:2px solid var(--saffron);
  box-shadow:0 0 0 5px rgba(233,162,58,.16), 0 0 26px 2px rgba(233,162,58,.42),
             0 14px 32px -12px rgba(80,45,10,.55)}

/* the garlands further down the page carry no seal — one Ganesha to a page,
   or it stops meaning anything */
.festival-on .fest-toran--mid{height:var(--toran-h)}
.festival-on .fest-toran--mid::after{display:none}

/* the footer's garland hangs inside the footer's own top padding */
.festival-on .fest-toran--foot{position:absolute;top:0;left:0;right:0;
  height:var(--toran-h);filter:saturate(1.12) brightness(1.14)}
.festival-on .fest-toran--foot::after{display:none}

/* Once the garland has scrolled off, this is what says the festival is on:
   the real marigold rope, cut from the same artwork, along the bottom edge of
   the sticky header. Five pixels, always on screen, never over anything. */
.festival-on header{position:sticky}
.festival-on header::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;
  background:url(../img/toran-rope.png) repeat-x left center;background-size:auto 100%;
  pointer-events:none}

/* the garland's sizes for a narrow window are set in THE PHONE, at the end */

/* ---- the strands hanging down each side of the window -------------------
 * Only where there is empty margin beside the content to hang them in. The
 * page is 1220 wide at most and the header's own padding is 48, so below
 * about 1360 a strand would be over the nav, not beside it.
 * ----------------------------------------------------------------------- */
.fest-drape{display:none}
@media(min-width:1360px){
  .festival-on .fest-drape{display:block;position:fixed;top:-14px;z-index:61;
    width:clamp(52px,4.4vw,74px);pointer-events:none;
    filter:drop-shadow(0 12px 18px rgba(80,45,10,.34));
    transform-origin:50% 0;animation:festsway2 7.5s ease-in-out infinite alternate}
  .festival-on .fest-drape img{width:100%;height:auto}
  .festival-on .fest-drape--l{left:clamp(4px,1vw,18px)}
  .festival-on .fest-drape--r{right:clamp(4px,1vw,18px);animation-delay:-3.4s}
}
@keyframes festsway2{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}

/* ---- marigolds drifting down over the page ------------------------------
 * The layer is fixed and sits under the sticky header and over everything
 * else, so the flowers pass in front of the page the way they would in front
 * of a doorway. Nothing in it can be clicked.
 * ----------------------------------------------------------------------- */
.fest-petals{display:none}
.festival-on .fest-petals{display:block;position:fixed;inset:0;z-index:56;
  pointer-events:none;overflow:hidden}
.festival-on .fest-petals i{position:absolute;top:0;left:var(--x);
  width:var(--s);height:var(--s);opacity:var(--o);
  animation:festfall var(--d) linear var(--delay) infinite}
/* two elements, because one element cannot run a fall and a sway on the same
   transform — the outer one drops, the inner one swings and turns */
.festival-on .fest-petals b{display:block;width:100%;height:100%;
  background:url(../img/marigold.png) center/contain no-repeat;
  /* the ground under these is cream more often than not, and a marigold at
     70% over cream is a smudge — the shadow is what gives it an edge */
  filter:drop-shadow(0 2px 3px rgba(120,64,10,.34));
  animation:festsway var(--sway) ease-in-out infinite alternate}
@keyframes festfall{
  from{transform:translate3d(0,-14vh,0)}
  to  {transform:translate3d(0,112vh,0)}
}
@keyframes festsway{
  from{transform:translateX(calc(var(--drift) * -1)) rotate(-38deg)}
  to  {transform:translateX(var(--drift)) rotate(38deg)}
}
/* how many marigolds a narrow window gets is set in THE PHONE, at the end */
@media(prefers-reduced-motion:reduce){
  .festival-on .fest-petals,.festival-on .fest-drape{display:none}
}

/* ---- the little shrine in the corner, and the sound switch --------------
 * On every page, at every width. The garland's seal scrolls away and the
 * modak band is only on the home page, so without this there are pages where
 * a visitor never sees Ganesha at all.
 * ----------------------------------------------------------------------- */
.fest-shrine{display:none}
.festival-on .fest-shrine{display:flex;align-items:flex-end;gap:9px;
  position:fixed;left:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);z-index:90}
.fest-shrine-a{position:relative;display:block;width:clamp(64px,7vw,104px);line-height:0;
  filter:drop-shadow(0 14px 22px rgba(60,32,6,.42));transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.fest-shrine-a::before{content:"";position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:172%;height:172%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(233,162,58,.5),rgba(233,162,58,.12) 46%,transparent 68%);
  animation:festglow 3.8s ease-in-out infinite}
.fest-shrine-a:hover{transform:translateY(-3px)}
.fest-shrine-a img{width:100%;height:auto}
@keyframes festglow{50%{opacity:.55;transform:translate(-50%,-50%) scale(1.1)}}

/* the label is a desktop courtesy: on a phone the idol has to earn its 64px
   on its own, and a pill beside it would be a third of the screen */
.fest-shrine-lbl{position:absolute;left:100%;bottom:6px;margin-left:10px;white-space:nowrap;
  background:var(--char);color:var(--cream);border:1px solid rgba(233,162,58,.45);
  border-radius:100px;padding:7px 14px;line-height:1.25;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateX(-6px);transition:.28s cubic-bezier(.2,.7,.3,1);pointer-events:none}
.fest-shrine-lbl b{color:var(--saffron-2);margin-left:5px}
.fest-shrine-a:hover .fest-shrine-lbl,.fest-shrine-a:focus-visible .fest-shrine-lbl{opacity:1;transform:none}
@media(hover:none){ .fest-shrine-lbl{display:none} }

.fest-audio{display:none}
.fest-sound{width:clamp(32px,2.6vw,38px);height:clamp(32px,2.6vw,38px);flex:none;
  border-radius:50%;border:1.5px solid rgba(233,162,58,.5);background:rgba(23,19,12,.86);
  color:#8C7C63;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.25s;backdrop-filter:blur(6px)}
.fest-sound.on{color:var(--saffron-2);border-color:var(--saffron);
  box-shadow:0 0 0 4px rgba(233,162,58,.14)}
.fest-sound:hover{background:var(--char-3);color:var(--saffron-2)}

/* a phone in landscape has no vertical room to spare for an ornament */
@media(max-height:430px){ .festival-on .fest-shrine{display:none} }

/* ---- Ganesha lit in the corner of the hero ------------------------------
 * This was line art on a white ground, blended with `multiply`. Over the
 * hero's near-black it was invisible — multiply can only ever DARKEN, and
 * there was nothing left to darken. It is a real cut-out now, with its own
 * alpha, so it needs no blend mode and works on any ground.
 * ----------------------------------------------------------------------- */
.ganesh-mark{display:none}
.festival-on .ganesh-mark{display:block;position:absolute;z-index:0;pointer-events:none;
  right:-4%;bottom:-6%;width:clamp(180px,19vw,320px);height:auto;opacity:.34;
  filter:drop-shadow(0 26px 44px rgba(90,55,12,.28))}
/* Below 900 this watermark goes away and THE PHONE stands a real cut-out in
   the corner of the hero instead. Behind the shop illustration at 34% it read
   as a smudge, and two Ganeshas in one hero is one too many. */
@media(max-width:900px){
  .festival-on .ganesh-mark{display:none}
}

/* The page itself warms up for the fortnight — a shade closer to marigold
   than to paper. Background only: nothing that carries text changes, so no
   contrast anywhere on the site moves. */
.festival-on{--cream:#FBF3E4; --cream-2:#FDF8ED; --card:#FFFCF2}

/* ========================================================================= *
 *  THE PHONE                                                                *
 *                                                                           *
 *  Everything above was drawn for a wide window and then made to survive a   *
 *  narrow one. That is backwards for this shop: most people meet Dakshin on  *
 *  a phone. On a phone the festival had been reduced to its leftovers — the  *
 *  side strands are desktop-only, the hero Ganesha was hidden, the seal was  *
 *  shrunk, the marigolds were dimmed to nothing and the announcement bar's   *
 *  festival line was dropped for want of room. What was left was a thin      *
 *  strip of leaves.                                                          *
 *                                                                           *
 *  So the phone gets its OWN dressing here, built for its shape rather than  *
 *  inherited from the desktop's: the shop's own photograph garlanded, the    *
 *  deity where there is actually room for him, and the festival still on     *
 *  screen once everything above has scrolled away.                           *
 * ========================================================================= */

/* ---- the announcement bar becomes the festival's bar --------------------
 * Below 760 site.css empties this bar down to the phone number and centres
 * it, so the left half is free — and an announcement bar with nothing to
 * announce during a festival is a waste of the only strip that is above
 * everything else on the page. The long half of the line is dropped rather
 * than the whole line. */
@media(max-width:760px){
  .festival-on .tb-fest{display:inline-flex;font-size:10px;letter-spacing:.06em;gap:6px}
  .festival-on .tb-fest i{display:none}
  .festival-on .topbar{background:linear-gradient(90deg,#2B1508,#4B2510 50%,#2B1508)}
  .festival-on .topbar .wrap{justify-content:space-between;gap:10px}
  .festival-on .topbar .tb-phone{font-size:10px;letter-spacing:.03em}
}

/* ---- the garland, and the medallion hung in it --------------------------
 * The garland is the first thing on the page and on a phone it is nearly the
 * only thing above the fold, so it is worth its height here in a way it is
 * not on a desktop. */
@media(max-width:900px){
  .festival-on{--toran-h:86px; --seal:116px}
  /* On a wide page the seal hangs 28px BELOW the garland and into the hero,
     which is how a medallion is hung. On a phone the hero starts right under
     it and the headline is enormous, so those 28px would land on the words.
     Here the garland is made tall enough to hold the whole seal instead.
     ONLY the garland that carries the seal: the others have no medallion to
     make room for, and giving them this height leaves a band of empty cream
     hanging under each of them. */
  .festival-on .fest-toran:not(.fest-toran--mid):not(.fest-toran--foot){
    height:calc(var(--toran-h) + var(--seal) - 26px)}

  /* :has, because only the home page's hero opens on this wash and only there
     is the wash continuous. On the pages whose hero is dark brown or plain
     white the same gradient put a second hard line across the page instead of
     removing one — the band ended warm against a ground that did not continue
     it. Where :has is not understood the rule is simply dropped, which is the
     band as it was. */
  .festival-on:has(.hero.light) .fest-toran:not(.fest-toran--mid):not(.fest-toran--foot){
    /* The garland band was plain page cream and the hero underneath it opened
       on a marigold wash at .26, so the two met in a straight line across the
       page and the top of the site read as two pieces that had been stacked
       rather than one doorway. The wash now BEGINS under the garland and
       arrives at the band's bottom edge at exactly the value the hero's own
       overlay starts at, so there is nothing to see where they meet — the
       colour simply keeps falling out of the flowers and down the page.
       Layers are comma-separated; a shorthand layer takes one image. */
    background-image:url(../img/toran.png),
      linear-gradient(180deg,transparent calc(var(--toran-h) - 24px),rgba(233,162,58,.26));
    background-repeat:repeat-x,no-repeat;
    background-position:left top,left top;
    background-size:auto var(--toran-h),100% 100%}
}
@media(max-width:560px){ .festival-on{--toran-h:76px; --seal:104px} }

/* ---- the festival stays on screen after the garland has gone ------------
 * The marigold rope along the bottom of the sticky header is five pixels on
 * a desktop, where the side strands and the hero Ganesha are carrying the
 * festival anyway. On a phone none of those exist, so this rope is the only
 * thing left once the garland scrolls away — and five pixels of it reads as
 * an orange underline, not a garland. */
@media(max-width:900px){
  .festival-on header::after{bottom:-9px;height:9px}
}

/* ---- the hero -----------------------------------------------------------
 * `.hero.light` switches the hero to cream and turns its own ::after off, so
 * the overlay is free to become a warm marigold wash falling out of the
 * garland into the top of the page. Background only — nothing that carries
 * text is touched, so no contrast on the page moves. */
@media(max-width:900px){
  .festival-on .hero.light::after{content:"";position:absolute;inset:0 0 auto 0;
    height:240px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(233,162,58,.26),rgba(233,162,58,.05) 62%,transparent)}

  /* The shop itself is dressed. This is the photograph of the real shopfront
     and its awning, and a garland hung across the top of it inside its own
     frame is exactly what the shop looks like during the fortnight — it says
     more than any ornament laid over the page could. */
  .festival-on .hero-frame::before{content:"";position:absolute;z-index:2;
    left:0;right:0;top:0;height:40px;pointer-events:none;
    background:url(../img/toran.png) repeat-x left top;background-size:auto 40px;
    filter:drop-shadow(0 3px 5px rgba(60,32,6,.4))}

  /* And Ganesha stands beside it, on the empty pavement in the corner of the
     illustration, at his real strength. The old rule put him behind the
     illustration at 34% and he read as a smudge, so a phone was given no
     deity at all — this puts him somewhere there is actually room. The price
     badge holds the other corner, so he takes this one. */
  .festival-on .hero-media::before{content:"";position:absolute;z-index:3;
    right:-6px;bottom:-10px;width:102px;height:146px;pointer-events:none;
    background:url(../img/ganesh-idol.webp) bottom right/contain no-repeat;
    filter:drop-shadow(0 14px 20px rgba(80,45,10,.45))}
  .festival-on .hero-media{overflow:visible}
}
@media(max-width:420px){
  .festival-on .hero-media::before{width:86px;height:122px}
  .festival-on .hero-frame::before{height:34px;background-size:auto 34px}
}

/* ---- the offer band, on a phone -----------------------------------------
 * A phone gets a photograph COMPOSED for a phone: the thali and the idol cut
 * out of the banner together, at the shape this band actually is, so neither
 * of them is cropped away. 74vw is the height at which 100vw of width lands
 * on the crop's own 1.355 proportions. */
@media(max-width:700px){
  .fest-board{--band:clamp(250px,74vw,330px)}
  .fest-board::before{background-image:url(../img/ganesh-band-mobile.jpg);
    background-position:50% 50%}
  /* the fade has to start lower now that there is a face in the top half */
  .fest-board::after{background:linear-gradient(180deg,transparent 42%,rgba(19,10,8,.34) 66%,rgba(19,10,8,.84) 89%,#1A0E0C 100%)}
}

/* ---- marigolds you can actually see -------------------------------------
 * These were halved and then dimmed to 68% and shrunk to 82% on a phone,
 * which on cream is a pale smudge — the flowers were there in the DOM and
 * absent from the page. Fewer of them is right on a narrow screen; fainter
 * is not, because faint is what made them invisible in the first place. */
@media(max-width:700px){
  .festival-on .fest-petals i{display:block;opacity:var(--o);
    width:var(--s);height:var(--s)}
  .festival-on .fest-petals i:nth-child(3n){display:none}
}

/* ---- the corner shrine --------------------------------------------------
 * 105x91 of fixed furniture in the bottom-left corner of a 390px screen sits
 * permanently on top of whatever the visitor scrolled to — on the menu it
 * lands squarely on the food. It keeps its place, because it is the only
 * Ganesha on the pages that have no hero and no band, but it is made small
 * enough to read as an ornament in the margin rather than as something
 * dropped on the page, and it is lifted clear of the home indicator. */
/* the breakpoint is 900 and not 700 because 900 is where the hero cut-out
   below appears — the two have to change hands at the same width or a tablet
   gets both of them, side by side, over the offer band */
@media(max-width:900px){
  /* The shrine stays — it is the only Ganesha on a page with no hero and no
     band, and it is the one that is on screen no matter how far down the
     visitor has scrolled. What changes is its size: 105x91 of fixed
     furniture on a 390px screen sat permanently on top of whatever was being
     read, and on the menu it landed squarely on the food. At 48px it reads
     as an ornament in the margin instead, and it is lifted clear of the
     home indicator. And on a phone he is decoration only: a fixed ornament
     in the corner of a 390px screen WILL end up over a button sooner or
     later — it sits on "My Meals — Sign In" at the foot of this page — and
     an ornament that swallows the tap meant for a control is a defect. The
     sound switch beside him stays live, because that is a control. */
  .festival-on .fest-shrine{left:10px;gap:6px;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))}
  .fest-shrine-a{width:46px;pointer-events:none}
  .fest-shrine-a::before{width:146%;height:146%}
  .fest-sound{width:30px;height:30px;font-size:12px}
}

/* ---- the menu behind the burger ----------------------------------------
 * The one full screen on a phone that has none of the page's dressing on it,
 * because it covers the page. It gets its own garland. */
@media(max-width:900px){
  .festival-on .mnav{padding-top:74px}
  .festival-on .mnav::before{content:"";position:absolute;z-index:1;
    left:0;right:0;top:0;height:52px;pointer-events:none;
    background:url(../img/toran.png) repeat-x left top;background-size:auto 52px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
  .festival-on .mnav nav{margin-top:26px}
}

/* ---- the festival, inside the menu --------------------------------------
 * Sits between the filter row and the dishes. On a phone the menu is about
 * three thousand pixels of scrolling and it is where somebody who came to
 * order actually is — this is the one place the offer can reach them without
 * asking them to scroll back up two screens to find it.
 * ----------------------------------------------------------------------- */
.fest-strip{display:none}
.festival-on .fest-strip{display:flex;align-items:center;gap:13px;
  margin:20px 0 2px;padding:11px 16px 11px 12px;border-radius:18px;
  background:linear-gradient(100deg,#1D100A,#3A1D0C 58%,#4C2711);
  border:1px solid rgba(233,162,58,.42);
  box-shadow:0 18px 34px -24px rgba(60,32,6,.85);
  transition:border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1)}
.festival-on .fest-strip img{width:50px;height:auto;flex:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.festival-on .fest-strip span{flex:1;min-width:0;font-size:13px;line-height:1.45;color:#E3D2B7}
.festival-on .fest-strip b{display:block;margin-bottom:3px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--saffron-2)}
.festival-on .fest-strip em{flex:none;font-style:normal;font-size:19px;color:var(--saffron)}
.festival-on .fest-strip:hover{border-color:var(--saffron);transform:translateY(-2px)}
@media(max-width:560px){
  .festival-on .fest-strip{gap:11px;padding:10px 13px 10px 10px}
  .festival-on .fest-strip img{width:44px}
  .festival-on .fest-strip span{font-size:12.5px}
}

/* ---- the strands, on a phone --------------------------------------------
 * The hanging strands are a desktop thing because they need empty margin
 * beside the content to hang in, and below 1360 there is none — a fixed
 * strand on a 390px screen would hang down the side of the words for the
 * whole length of the page.
 *
 * There IS one place on a phone with room for them, though: the garland band
 * itself. The medallion hangs in the middle of it and leaves the cream at
 * both ends empty, which is exactly where a doorway's strands go. These hang
 * from the garland into that gap, and scroll away with it — so the doorway
 * is fully dressed and nothing is covered further down the page.
 *
 * ::after is the medallion and is painted after this, so the strands pass
 * behind it rather than over it.
 * ----------------------------------------------------------------------- */
@media(max-width:900px){
  .festival-on .fest-toran:not(.fest-toran--mid):not(.fest-toran--foot)::before{
    content:"";position:absolute;left:0;right:0;pointer-events:none;
    top:calc(var(--toran-h) - 14px);
    /* Not bottom:0. These hang PAST the band and a little way into the top of
       the hero, the way the fixed drapes run down a desktop window — which is
       also what stitches the garland to the page under it, instead of the two
       sitting one above the other with a seam between them. The height is the
       artwork's own proportion, so the strand always ends at its bell.
       4.1263 is 784/190, the shape of strand-short.webp. It stops above the
       first line of body copy at every width; the headline either side of it
       is centred, so the strand passes down the empty margin beside it. */
    height:calc(var(--strand) * 4.1263);
    /* strand-short.webp, not strand.webp: the full strand is 190x1032 — five
       and a half times its own width — far taller than the space it hangs in,
       so it came out sliced through the middle of a flower with its bell
       missing. This is the same strand with one repeat taken out of its middle
       at the waist between two clusters, so it ENDS: string, clusters, bells,
       brass tip. Sizing the tall one to fit by height instead would have left
       a 19px thread. */
    background:url(../img/strand-short.webp) left top/var(--strand) auto no-repeat,
               url(../img/strand-short.webp) right top/var(--strand) auto no-repeat;
    filter:drop-shadow(0 7px 11px rgba(80,45,10,.3))}
  .festival-on{--strand:42px}
}
@media(max-width:560px){ .festival-on{--strand:36px} }
