/* Batch 52 (2026-10-06): Shopping Guide B. Guide only (enqueued on /explore/shopping-guide/ and nowhere else), after batch 51 and the batch 41 background.
   S  the three shopping sessions: no divider, one art stage per session (one size, contain, reserved slot), an ornament wall crop inside each stage box that drifts with the scroll, local supports under the copy
   W  Pick Your Window: an ornament wall inside the section box at the narrative left, blending through a broad feather into bright plaid under the schedule at the right (vertical blend on a phone); drifts with the scroll
   P  Start with a Person: no outer box, a local text support, an open photo group with 2 px red edges
   M  Meet the Makers rows: 25 percent slower (the batch 26 sheet runs 90 s and 78 s; here 112.5 s and 97.5 s), held by the batch 41 control
   F  the bottom pair: Stay the Night and Before You Come, natural height, the lodging photograph
   Motion: nothing here loops. The ornament wall layers drift 16 px with the scroll through the shared drift script (assets tree-box-batch58, transform on the decorative layer only). Reveals reuse the batch 31 data-gd31 system (once per chapter) and read the batch 41 tokens. Every colour, radius and timing is an existing site value:
   red #ef2435, mint #68f8b3, 10 px rounded rectangles, 2 px photo frames. */

/* ---------- Shared drift layer (the batch 58 markup pair; the same rules the batch 58 sheet holds, scoped here so the Guide needs only the shared script) ----------
   A clip (an empty i, the box's own size, overflow hidden, rounded like the box) holds a tree layer larger than the box by half the travel plus 4 px on every side, so the drift never shows an edge.
   The tree layer paints a crop of an approved ornament wall (assets/art-20261003 ornament-wall-a, -b, -c and the portrait wall, already in the package). */
.gd52-clip{--tb58-travel:var(--tb58-host-travel,16);font-style:normal;position:absolute;z-index:-2;inset:0;display:block;overflow:hidden;border-radius:inherit;pointer-events:none;background:#080808}
.gd52-clip .tb58-tree{position:absolute;display:block;inset:calc(var(--tb58-travel) * -.5px - 4px);background-repeat:no-repeat;background-color:#0b0b0b}
.gd52-clip[data-tb58-live="1"] .tb58-tree{will-change:transform}
@media(prefers-reduced-motion:reduce){.gd52-clip .tb58-tree{transform:none!important;will-change:auto}}

/* ---------- S. Sessions ---------- */
.gd52-sessions{--gd52-stage-h:clamp(168px,16.4vw,236px);--tb58-host-travel:16;margin-top:48px;margin-bottom:0}
/* The old card: a black slab with a 4 px red border. The card is now one box with a transparent body: the stage on top shows the wall, the support under it carries the words. */
body.om-mvp .editorial-choices .editorial-choice.gd52-card{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;position:relative;isolation:isolate}
body.om-mvp .gd52-card.om41-support::before{--om41-support-a:.9;--om41-support-b:.82;--om41-support-angle:180deg;--om41-support-fx:0px;--om41-support-fy:0px;--om41-support-radius:0 0 12px 12px;
  inset:var(--gd52-stage-h) 0 0 0;border:2px solid #ef2435;border-top:0;box-sizing:border-box}
/* The art stage: one size for all three sessions, reserved whether or not the artwork exists. Contain, never crop. The wall crop lives inside the stage box (2 px red edge, rounded top) and never past it. */
.gd52-stage{position:relative;isolation:isolate;display:grid;place-items:center;box-sizing:border-box;height:var(--gd52-stage-h);padding:12px 16px;text-align:center;border:2px solid #ef2435;border-bottom:0;border-radius:12px 12px 0 0}
.gd52-stage .gd52-clip{border-radius:10px 10px 0 0}
.gd52-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 92% 88% at 50% 52%,rgba(5,5,5,.84) 0,rgba(5,5,5,.7) 58%,rgba(5,5,5,.28) 100%)}
/* Three crops of the ornament wall family, a different wall and focal point per stage so an Ohio Made tag or a medallion shows. The wall is 1100 px wide (its 1600 file at about 0.69, never upscaled; 660 px on a phone) and never smaller than the layer. */
.gd52-stage .gd52-tree{--gd52-s:1;background-size:max(calc(1100px * var(--gd52-s)),100%) auto}
@media(max-width:767px){.gd52-stage .gd52-tree{--gd52-s:.6}}
.gd52-tree--1{background-image:url('./art-20261003/ornament-wall-a-1600.webp');background-position:18% 52%}
.gd52-tree--2{background-image:url('./art-20261003/ornament-wall-b-1600.webp');background-position:8% 30%}
.gd52-tree--3{background-image:url('./art-20261003/ornament-wall-c-1600.webp');background-position:46% 14%}
.gd52-art-slot{position:absolute;inset:8px;z-index:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gd52-art-slot img{display:block;width:100%;height:100%;object-fit:contain}
body.om-mvp .editorial-choices .editorial-choice .gd52-stage h2{position:relative;z-index:1;margin:0!important;max-width:none;text-align:center;text-transform:uppercase;font-size:clamp(24px,2.3vw,33px)!important;line-height:1.04!important;text-wrap:balance}
/* When the supplied artwork is in the slot the title stays in the DOM and is read aloud, but is no longer drawn twice. */
.gd52-stage--art h2{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Under the stage: date, lead, facts, links, details. Each row aligns across the three cards (the batch 31 subgrid); the tallest sets the row height. */
.gd52-card>:not(.gd52-stage){padding-inline:clamp(16px,1.7vw,24px)}
.gd52-card>.editorial-kicker{margin:0;padding-top:16px}
.gd52-card>.editorial-choice-lead{margin:6px 0 0;padding-bottom:4px}
.gd52-card>.editorial-choice-more,.gd52-card>.editorial-choice-more-empty{padding-bottom:18px;margin-top:8px}
.gd52-card .editorial-choice-more{border-top:1px solid rgba(255,255,255,.28)}
.gd52-extra{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding-top:6px}
.gd52-extra>p{margin:12px 0 0}
.gd52-extra .editorial-choice-links{margin:8px 0 0}
.gd52-extra>a.editorial-choice-link{margin-top:10px}
.gd52-facts{list-style:none;margin:10px 0 0;padding:12px 0 2px;border-top:1px solid rgba(255,255,255,.28);display:grid;gap:12px}
.gd52-fact{display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
.gd52-clock{order:2;font:800 clamp(1rem,1.2vw,1.2rem)/1.2 "OMHM Tomorrow",sans-serif;letter-spacing:.02em;color:#68f8b3}
.gd52-fact-name{order:1;font:700 12px/1.3 "OMHM Tomorrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.gd52-note{display:block}
.gd52-note span{font:600 14px/1.45 "OMHM Tomorrow",sans-serif;color:#fff}
.gd52-fact .gd31-or{margin:0 .15em}
@media(max-width:900px){
  .gd52-sessions{--gd52-stage-h:clamp(148px,41vw,196px);gap:28px;margin-top:36px}
  .gd52-stage h2{padding-inline:4px}
}

/* ---------- W. Pick Your Window ---------- */
.gd52-window{position:relative;isolation:isolate}
/* The section is a box (2 px red edge, 12 px radius). The ornament wall lives inside it, never past it: opaque at the left, feathered to nothing across a broad span, so the right half shows the plain bright plaid. A decorative layer only: nothing in the copy or the schedule is masked or faded, and only the wall layer drifts. */
body.om-mvp .gd52-window.editorial-well{--tb58-host-travel:16;border:2px solid #ef2435;border-radius:12px}
.gd52-window-clip{border-radius:10px;background:transparent;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 30%,rgba(0,0,0,.6) 46%,transparent 68%);mask-image:linear-gradient(to right,#000 0,#000 30%,rgba(0,0,0,.6) 46%,transparent 68%)}
.gd52-window-tree{background-image:url('./art-20261003/ornament-wall-c-1600.webp');background-size:cover;background-position:0 40%}
/* The reading support covers the narrative column only (it used to run under the whole block). 85 to 70 percent near black, feathered. */
body.om-mvp .gd52-window.om41-support::before{--om41-support-a:.85;--om41-support-b:.72;--om41-support-fx:6%;--om41-support-inset-x:0px;--om41-support-inset-y:0px;--om41-support-fy:0%;--om41-support-radius:10px;right:auto;width:calc((100% - clamp(32px,4.5vw,72px)) * .58 + 44px + 28px)}
/* The schedule keeps visible plaid: a lighter local support (46 percent near black, feathered, never past the page gutter) behind the ladder only. */
.gd52-window .gd31-ladder{position:relative;isolation:isolate}
.gd52-window .gd31-ladder::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-26px -28px;border-radius:14px;background:rgba(5,5,5,.46);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
@media(max-width:899px){
  .gd52-window-clip{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 62%);mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 62%)}
  .gd52-window-tree{background-image:url('./art-20261003/ornament-wall-portrait-940.webp');background-position:50% 30%}
  /* On a phone the copy comes first and the schedule second, so the section-wide support would sit under the ladder too. The section's own support is switched to nothing and the copy block carries it. */
  body.om-mvp .gd52-window.om41-support::before{right:auto;width:auto;bottom:auto;height:0;opacity:0;left:0;right:0}
  .gd52-window .gd31-time-copy{position:relative;isolation:isolate}
  .gd52-window .gd31-time-copy::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-14px -8px -10px;border-radius:12px;background:linear-gradient(180deg,rgba(5,5,5,.9),rgba(5,5,5,.8));
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%),linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%),linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-composite:intersect}
  .gd52-window .gd31-ladder::before{inset:-18px -10px}
}

/* ---------- P. Start with a Person ---------- */
.gd52-person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(24px,3.4vw,48px);align-items:center;margin:0 0 64px}
.gd52-person-text{position:relative;isolation:isolate;min-width:0;padding:clamp(18px,2.2vw,30px) clamp(14px,2vw,28px)}
.gd52-person-text::before{--om41-support-a:.86;--om41-support-b:.74;--om41-support-inset-x:calc(min(24px,(100vw - 100%) / 2) * -1);--om41-support-inset-y:0px;--om41-support-fx:5%;--om41-support-fy:8%;--om41-support-radius:14px}
.gd52-person-text>:last-child{margin-bottom:0}
.gd52-person-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.gd52-photo{margin:0;box-sizing:border-box}
.gd52-photo--lead{grid-column:1/-1}
.gd52-photo img{display:block;width:100%;height:100%;object-fit:cover}
.gd52-person-photos>[data-gd31]{--gd31-d:min(calc(var(--gd31-i,0) * var(--om41-stagger-ms)),var(--om41-stagger-cap-ms))}
.gd52-person-photos>[data-gd31]:nth-child(2){--gd31-i:1}
.gd52-person-photos>[data-gd31]:nth-child(3){--gd31-i:2}
html.gd31-js .gd52-photo[data-gd31]{transition:var(--gd31-rv),transform var(--om41-hover-ms) ease}
@media(hover:hover) and (pointer:fine){.gd52-photo:hover{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.gd52-photo{transition:none!important}.gd52-photo:hover{transform:none}}
@media(max-width:899px){.gd52-person{grid-template-columns:1fr;margin-bottom:48px}}

/* ---------- M. Meet the Makers: modestly slower rows ----------
   Measured in the batch 26 Guide sheet: the left row runs gd26-left in 90 s, the right row gd26-right in 78 s. 25 percent longer: 112.5 s and 97.5 s (same ratio on both so they keep their relative pace).
   The hold (offscreen, hidden tab, hover, focus) is data-om41-hold on each row, written by the Guide template, read by the batch 41 motion script. Reduced motion keeps the batch 26 rule (no animation). */
.gd26-row .gd26-track{animation-duration:112.5s}
.gd26-row--right .gd26-track{animation-duration:97.5s}

/* ---------- F. The bottom pair ---------- */
/* Review wave Phase C (Vera 19): the two boxes end at the same height. Stretch, not start: in the two column layout the shorter box grows to the taller one's bottom edge (single column rows are unaffected). */
body.om-mvp .editorial-visit.gd52-final{align-items:stretch;margin-top:8px}
.gd52-stay{position:relative}
.gd52-stay-photo{margin:20px 0 0;box-sizing:border-box}
/* Vera 19, equal heights without dead space: where the pair sits in two columns the lodging box is a column and its photograph block takes the spare height, centring the framed photograph in it. The block's top margin (20px) used to collapse into the paragraph's bottom margin; as a flex item it would not, so it is 0 here and the text, the gap and the photograph start stay where they were. */
@media(min-width:901px){body.om-mvp .gd52-stay{display:flex;flex-direction:column}body.om-mvp .gd52-stay-photo{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;margin-top:0}}
.gd52-stay-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
body.om-mvp .gd52-stay.editorial-well,body.om-mvp .gd52-plan.editorial-well{align-self:stretch}

/* ---------- H and O. The hero lead box and the hotel copy box hold an ornament wall (Justin: ornament walls inside boxes, never plates spanning the gutters, never the literal tree) ----------
   The batch 41 tree-led plate of the hero and the batch 51 rustic tree plate of the hotel feature are gone. The wall is a clip inside the box (the shared drift layer above, 16 px with the scroll), the box keeps its edge, and the
   bright plaid shows around it. A local dark support (the batch 41 support, 86 to 72 percent) lies over the wall behind the words. The hero photograph beside the lead box and the hotel photographs are not touched. */
.gd52-wall{background-size:cover;background-repeat:no-repeat}
.gd52-wall--hero{background-image:url('./art-20261003/ornament-wall-a-1600.webp');background-position:30% 40%}
.gd52-wall--hotel{background-image:url('./art-20261003/ornament-wall-b-1600.webp');background-position:70% 55%}
@media(max-width:767px){
  .gd52-wall--hero{background-image:url('./art-20261003/ornament-wall-portrait-940.webp');background-position:50% 30%}
  .gd52-wall--hotel{background-image:url('./art-20261003/ornament-wall-portrait-940.webp');background-position:50% 70%}
}
/* hero: the section no longer carries the tree region spacing (96 px), it goes back to the 64 px (40 on a phone) it had before batch 41 */
.gd51-hero{margin-bottom:64px}
body.om-mvp .gd51-hero .gd30-well.om41-support{background:transparent}
body.om-mvp .gd51-hero .gd30-well.om41-support::before{--om41-support-a:.86;--om41-support-b:.72;--om41-support-radius:10px}
@media(max-width:767px){.gd51-hero{margin-bottom:40px}body.om-mvp .gd51-hero .gd30-well.om41-support::before{--om41-support-a:.84;--om41-support-b:.76}}
/* hotel: the arrival box is a framed box now (it had a 3 px top rule over a transparent body) */
body.om-mvp .gd51-arrival.editorial-well{border:2px solid #ef2435;border-radius:12px}
body.om-mvp .gd51-arrival.editorial-well::before{--om41-support-a:.88;--om41-support-b:.78;--om41-support-radius:10px;border-top:0}
/* The lead box sits at the top of the page, so the visitor only ever sees the second part of its pass through the viewport; it takes the top of the allowed travel (24 px) so the drift still reads. */
.gd51-well{--tb58-host-travel:24}