/* stage-parity-r79.css  ·  2026-09-16  ·  preview copy only
   -------------------------------------------------------------------------
   Purpose: give any theme that ships a single continuous stage painting the
   same treatment the blue preview got in r58-r67 - the real HTML header
   (logo, language, basket, rounded two-pill nav) laid over the painting's own
   top whitespace, one uncropped image at one scale, and the same shop-side
   transition underneath it.

   Trigger: ribbelle-garden-r34.js sets data-r79-stage on <html> for every
   theme whose table row carries a `stage` path, and removes it otherwise.
   Today that is blue (blue-stage-r70.webp, unchanged) and pink
   (garden-themes/pink-stage-r79.webp, 1029x1529). purple / yellow / green /
   orange / red have no stage image, never get the flag, and are untouched by
   this sheet.

   Scope: every selector below starts with
       html[data-r79-stage]:not([data-garden-theme=blue])
   so blue keeps rendering from its own r58-r67 sheets, byte for byte, and
   nothing here can reach it. The only occurrences of the string
   "data-garden-theme=blue" in this file are inside that :not(); no rule in
   this file targets blue.

   Colour: where the blue sheets hard-code a tint, the same tint is rebuilt
   from the theme variables ribbelle-garden-r34.js writes on <html>:
       #d2f0fb -> --r79-t22    #d9eefb / #d9edfa -> --r79-t16
       #e9f6fd -> --r79-t10    #eaf6fd -> --r79-t08    #f4f9fb -> --r79-t04
       #e6f3fc -> --r79-hover  #245878 20 -> --r79-shadow
       #a3cfe6 33 -> --r79-inset   #146be1 -> var(--garden-ink)
   White stays white: the #fff text shadows that lift the nav off the
   painting, the #ffffffd9 pill border, the rgba(255,253,246,.83) pill fill
   and the #ffffffa6 arch highlight are neutral and are mirrored verbatim.

   Load order: immediately after theme-parity-r76.css, last of all. No r55-r76
   sheet is edited; where R005 (theme-parity-r76.css) paints a paper header
   and parks the painting under it, section 8 below hands the stage rules the
   win by specificity instead. r34.js gains the `stage` field only.
   ------------------------------------------------------------------------- */


/* == 1. Tint tokens =======================================================
   The blue literals listed above, rebuilt per theme.                        */
html[data-r79-stage]:not([data-garden-theme=blue]){
  --r79-t22:color-mix(in srgb,var(--garden-primary) 22%,var(--garden-paper));
  --r79-t16:color-mix(in srgb,var(--garden-primary) 16%,var(--garden-paper));
  --r79-t10:color-mix(in srgb,var(--garden-primary) 10%,var(--garden-paper));
  --r79-t08:color-mix(in srgb,var(--garden-primary) 8%,var(--garden-paper));
  --r79-t04:color-mix(in srgb,var(--garden-primary) 4%,var(--garden-paper));
  --r79-hover:color-mix(in srgb,var(--garden-primary) 14%,#fff);
  --r79-shadow:color-mix(in srgb,var(--garden-ink) 13%,transparent);
  --r79-inset:color-mix(in srgb,var(--garden-primary) 20%,transparent);
}


/* == 2. The stage itself ==================================================
   Mirrors curtain-stage-r58.css lines 5-19.                                 */
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage-shell{display:block;background:var(--r79-t22)}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage{display:block;position:relative;width:min(620px,100%,max(360px,calc((100svh - 25px)*.6722)));margin-inline:auto}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header{position:absolute;inset:0 0 auto;width:100%;min-height:0;aspect-ratio:auto;display:block;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header::before,
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header::after{display:none!important;content:none!important}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{width:100%;padding:12px 12px 0!important;gap:0!important;min-height:0!important;background:transparent}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sh-nav a{text-shadow:0 1px 5px #fff,0 0 2px #fff}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .rb-language-menu>summary{text-shadow:0 1px 4px #fff}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .banner2,
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .bwall.r30-wall{background:transparent!important;margin:0;padding:0;border:0;max-width:none;width:100%}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .r30-cover-art{position:relative;width:100%!important;max-width:none;aspect-ratio:1028/1529;margin:0;overflow:hidden;mask:none}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .r30-garden-art{display:none!important}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .r58-stage-art{display:block;position:static;width:100%;height:auto;max-width:none;object-fit:contain;transform:none}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage-shell+.wrap{padding-top:0}
@media(min-width:700px){html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sh-nav{gap:16px}}


/* == 3. Each painting keeps its own true shape ============================
   curtain-stage-r58.css line 15 is written for blue-stage-r70.webp
   (1028x1529). pink-stage-r79.webp is 1029x1529, so pink states its own
   ratio rather than being squeezed into blue's. A future stage image adds
   one line here; nothing else in this sheet changes.                        */
html[data-r79-stage]:not([data-garden-theme=blue])[data-garden-theme=pink]:not([data-r56-stage=separate]) .r56-stage .r30-cover-art{aspect-ratio:1029/1529}


/* == 4. Header sizing on the stage, and the edge under it =================
   Mirrors layout-finish-r59.css lines 2-24. Lines 18-21 keep their shape but
   take the rebuilt tints; in the entrance layout section 5 switches the two
   ::after fades off anyway, exactly as it does for blue.                     */
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage{container-name:ribbelle-stage;container-type:inline-size}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:10px 14px 0!important;gap:7px!important}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-mark{width:150px!important;max-width:48%;height:auto!important;aspect-ratio:640/215}
html[lang=en][data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav{display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:8px!important}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav a{border:0!important;min-height:44px!important;padding:7px 5px!important;text-decoration:none}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header.r39-frosted-home .sh-nav a:is(.cur,[aria-current]){border:0!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:9px;text-decoration-skip-ink:none}
@container ribbelle-stage (max-width:359px){
 html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:8px 12px 0!important;gap:4px!important}
 html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-mark{width:120px!important}
}
@container ribbelle-stage (min-width:500px){
 html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:16px 22px 0!important;gap:8px!important}
 html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-mark{width:180px!important}
}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .r30-cover-art::after{content:'';position:absolute;inset:auto 0 0;height:8px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--r79-t08))}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage-shell::after{content:'';display:block;height:16px;background:linear-gradient(180deg,var(--r79-t08),var(--r79-t04))}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) body.r27-home #scoop>.reveal{position:relative;isolation:isolate;background:none}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) body.r27-home #scoop>.reveal::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--r79-t04),var(--garden-paper,#fffdf8))}
@media(max-width:699px){
 html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) body.r27-home #scoop>.reveal::before{left:-16px;right:-16px}
}


/* == 5. The entrance: rounded two-pill nav and the arch into the shop =====
   Mirrors entrance-r60.css lines 3-38. The current-page pill takes
   --r79-t16 with var(--garden-ink) type where blue used #d9edfa/#146be1.    */
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:8px 14px 0!important;gap:6px!important}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav-row{
  box-sizing:border-box;padding:2px 5px;border:1px solid #ffffffd9;border-radius:13px;
  background:rgba(255,253,246,.83);box-shadow:0 3px 12px var(--r79-shadow),inset 0 0 0 1px var(--r79-inset);
  /* Keep the ancestor containing block unchanged for the language control. */
}
html[lang=en][data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav{grid-template-columns:1fr .65fr 1.55fr;justify-content:stretch;gap:2px!important}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav a{border-radius:9px;padding:6px 3px!important;text-shadow:none;text-decoration:none}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header.r39-frosted-home .sh-nav a:is(.cur,[aria-current]){background:var(--r79-t16)!important;text-decoration:none;color:var(--garden-ink)!important}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav a:hover{background:var(--r79-hover)!important}
@container ribbelle-stage (max-width:359px){
  html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:6px 10px 0!important;gap:3px!important}
  html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav-row{padding:1px 3px;border-radius:11px}
}
@container ribbelle-stage (min-width:500px){
  html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-inner{padding:16px 24px 0!important;gap:12px!important}
}
/* A shallow arch joins the painting to the shopping area. Its central lip
   overlaps only the lowest 10px of the image; it never intercepts a click. */
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .r30-cover-art::after,
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage-shell::after{display:none;content:none}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage-shell+.wrap{background:linear-gradient(var(--r79-t22) 0 28px,var(--garden-paper,#fffdf8) 28px)}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop{position:relative;isolation:isolate;--r60-gutter:28px}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop::before{
  content:'';position:absolute;inset:-10px calc(-1 * var(--r60-gutter)) 0;z-index:-1;pointer-events:none;
  border-radius:50% 50% 0 0 / 28px 28px 0 0;
  background:linear-gradient(180deg,var(--r79-t16) 0,var(--r79-t10) 240px,var(--garden-paper,#fffdf8) 620px);
  box-shadow:0 -1px 0 #ffffffa6;
}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop>.reveal{background:none;opacity:1;transform:none;transition:none}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop>.reveal::before{display:none;content:none}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop>.reveal>.r34-heading{min-height:82px;padding-block:18px 12px}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop>.tiers{margin-top:0}
@media(max-width:699px){
  html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) body.r27-home #scoop{--r60-gutter:16px}
}


/* == 6. Two-destination nav row on the stage ==============================
   Mirrors compact-nav-r61.css line 7. Line 3 of that sheet already reaches
   every theme through html[data-garden-theme], so it is not repeated.       */
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance]:not([data-r56-stage=separate]) .r56-stage .sitehead.r37-header .sh-nav-row.r61-nav-row{max-width:280px;align-self:center}


/* == 7. Pearl hem instead of the curved lip ===============================
   Mirrors pearl-hem-r67.css lines 3-14, including the stage width formula,
   so the garland spans exactly the width of the painting above it. The
   garland art is the existing garden-themes/pearl-garland.png.              */
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance][data-r67-transition=pearls]:not([data-r56-stage=separate]) .r56-stage-shell+.wrap{background:var(--garden-paper)}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance][data-r67-transition=pearls]:not([data-r56-stage=separate]) body.r27-home #scoop{padding-top:24px!important}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance][data-r67-transition=pearls]:not([data-r56-stage=separate]) body.r27-home #scoop::before{
  top:0;border-radius:0;box-shadow:none;
}
html[data-r79-stage]:not([data-garden-theme=blue])[data-r60-layout=entrance][data-r67-transition=pearls]:not([data-r56-stage=separate]) body.r27-home #scoop>.r67-pearl-hem{
  display:block;position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  /* Same width formula as the hero, including the section's reserved gutters. */
  width:min(620px,calc(100% + var(--r60-gutter) + var(--r60-gutter)),max(360px,calc((100svh - 25px)*.6722)));
  height:34px;z-index:1;pointer-events:none;user-select:none;
  background:url('garden-themes/pearl-garland.png') center top/120px auto repeat-x;
}


/* == 8. R005 yields where it ties =========================================
   theme-parity-r76.css gives every non-blue garden a paper header with the
   painting parked underneath it (its sections 2, 4, 5 and 14). Every one of
   those rules is out-weighted by the stage chains above except
   theme-parity-r76.css lines 92-93, whose .r27-home .banner2 .bwall.r30-wall
   ties with the mirror of curtain-stage-r58.css lines 13-14 and would then
   be decided by file order alone. These two lines settle it by specificity,
   so the result does not depend on which sheet is linked last. r76 is not
   edited; no rule here reaches a theme without a stage image.               */
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .banner2{background:transparent!important;margin:0!important;padding:0!important;border:0}
html[data-r79-stage]:not([data-garden-theme=blue]):not([data-r56-stage=separate]) .r56-stage .banner2 .bwall.r30-wall{background:transparent!important;margin:0!important;padding:0!important;border:0}