/* Wave E (2026-10-07), Holiday lane: Justin's walkthrough M1 to M12. Holiday route only; loads after batch C.
   Older Holiday sheets carry many !important rules on these same elements, so every rule here names html.omhm-holiday body.om-mvp (or an id) and uses !important where it must win.
   Tokens: --hme-inch is the wall that shows around a boxed panel (Justin: "about an inch"); the two pace tokens set every reel in pixels per second (assets/holiday-batche-20261007.js writes the durations). */
html.omhm-holiday{--hme-inch:72px;--hme-reel-pace:62;--hme-film-pace:48;--hme-reel-fallback:150s;--hme-film-fallback:80s;--hme-red:#ef2435;--hme-mint:#68f8b3}
@media(max-width:1099px){html.omhm-holiday{--hme-inch:40px}}
@media(max-width:760px){html.omhm-holiday{--hme-inch:22px}}

/* ---------- M1. Top: one frame per side beside the wreath ---------- */
html.omhm-holiday body.om-mvp #hero figure.hme-side{top:50%!important;bottom:auto!important;width:min(19%,272px)!important;margin:0!important;z-index:5}
html.omhm-holiday body.om-mvp #hero figure.hme-side--l{left:5%!important;right:auto!important;transform:translateY(-52%) rotate(-5deg)!important}
html.omhm-holiday body.om-mvp #hero figure.hme-side--r{right:5%!important;left:auto!important;transform:translateY(-52%) rotate(5deg)!important}
@media(max-width:1099px){html.omhm-holiday body.om-mvp #hero figure.hme-side{width:min(22%,200px)!important}}
@media(max-width:760px){
  html.omhm-holiday body.om-mvp #hero{height:760px!important}
  html.omhm-holiday body.om-mvp #hero figure.hme-side{top:auto!important;bottom:170px!important;width:34%!important}
  html.omhm-holiday body.om-mvp #hero figure.hme-side--l{left:6%!important;transform:rotate(-6deg)!important}
  html.omhm-holiday body.om-mvp #hero figure.hme-side--r{right:6%!important;transform:rotate(6deg)!important}
}

/* ---------- M2. Photo stripe: one photograph, one ornament tile that carries a product category image ---------- */
html.omhm-holiday .hm19-stripe--land .hm19-track{animation-duration:var(--hme-reel-fallback)}
html.omhm-holiday .hm19-stripe--land .hm19-tile--trees.hme-orn{position:relative;box-sizing:border-box;width:clamp(340px,33vw,480px);aspect-ratio:1402/1122;padding:0;border:2px solid var(--hme-red);border-radius:10px;overflow:hidden;background:#0a0a0a;box-shadow:0 10px 18px #0009;align-self:center}
@media(max-width:600px){html.omhm-holiday .hm19-stripe--land .hm19-tile--trees.hme-orn{width:300px}}
html.omhm-holiday .hm19-stripe--land .hm19-tile--trees.hme-orn>img:first-child{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;transform:scale(1.28);transform-origin:var(--hme-o,50% 50%)}
html.omhm-holiday .hm19-stripe--land .hme-orn--0{--hme-o:12% 30%}
html.omhm-holiday .hm19-stripe--land .hme-orn--1{--hme-o:88% 62%}
html.omhm-holiday .hm19-stripe--land .hme-orn--2{--hme-o:50% 90%}
html.omhm-holiday .hm19-stripe--land .hme-orn--3{--hme-o:70% 12%}
html.omhm-holiday .hm19-stripe--land .hm19-tile--trees.hme-orn>.hme-cat{position:absolute;left:50%;top:50%;width:34%;height:auto;aspect-ratio:1/1;object-fit:contain;transform:translate(-50%,-50%);border-radius:0;background:none!important;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}

/* ---------- M3. Memories heading and box ---------- */
/* OH and MADE: white, outlined in red. The 10 stays red and takes a white outline, so the two read as one lockup. */
html.omhm-holiday body.om-mvp #process .hm47-heading .hm47-r2{-webkit-text-stroke:8px var(--hme-red)!important;paint-order:stroke fill!important;color:#fff!important;text-shadow:0 3px 0 rgba(0,0,0,.55)!important}
html.omhm-holiday body.om-mvp #process .hm47-heading .hm47-r2 .hm47-ten{-webkit-text-stroke:8px #fff!important;paint-order:stroke fill!important;color:var(--hme-red)!important;text-shadow:none!important}
/* The box: the wall is the outer box (2 px red edge); the dark panel is inset by an inch with crisp edges, so the tree and ornaments show around it and at the corners. No gradient edge. */
html.omhm-holiday body.om-mvp #process .hz-head.hm48-memory-head{width:min(1100px,100%);padding:calc(var(--hme-inch) + 26px) calc(var(--hme-inch) + 28px) calc(var(--hme-inch) + 28px)!important;background:transparent!important}
html.omhm-holiday .hm48-surface--memory>.hm48-support{inset:var(--hme-inch);filter:none;border-radius:10px;background:rgba(4,4,4,.95)}
html.omhm-holiday .hm48-surface--memory{--hm48-tree-img-hi:url('./art-20261003/ornament-wall-b-1600.webp')}
html.omhm-holiday .hm48-surface--origin{--hm48-tree-img-hi:url('./art-20261003/ornament-wall-portrait-940.webp')}
html.omhm-holiday .hm48-surface--memory>.hm48-tree,html.omhm-holiday .hm48-surface--origin>.hm48-tree{background-image:var(--hm48-tree-img-hi)}

/* ---------- M4 and the reels: the VIP Raffle lockup in its card; one pace for every reel ---------- */
html.omhm-holiday #process.chapter-index .hm9-marquee-lane{animation-duration:var(--hme-reel-fallback)}
html.omhm-holiday #process .hme-lockup-card .hme-raffle-badge{display:block;height:auto!important;aspect-ratio:1774/887!important;width:100%;object-fit:contain;margin:2px auto}
html.omhm-holiday #process .hme-lockup-card .chapter-badge-heading{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
html.omhm-holiday .hm19-track[data-hme-hold],html.omhm-holiday .hm9-marquee-lane[data-hme-hold],html.omhm-holiday .hme-film-track[data-hme-hold]{animation-play-state:paused!important}

/* ---------- M5. A Place to Belong: tighter, the support lets the wall show ---------- */
html.omhm-holiday body.om-mvp #ten-years .hm47-origin{padding:18px 18px;gap:12px}
html.omhm-holiday body.om-mvp #ten-years .hm47-o-media{gap:8px}
html.omhm-holiday body.om-mvp #ten-years .hm47-origin h2{margin:0 0 8px}
html.omhm-holiday body.om-mvp #ten-years .hm47-origin h3{margin-bottom:6px}
html.omhm-holiday body.om-mvp #ten-years .hm47-origin p{margin-bottom:8px;font-size:16.5px;line-height:1.5}
html.omhm-holiday body.om-mvp #ten-years .hm47-o-subs{gap:12px}
html.omhm-holiday body.om-mvp #ten-years.held-founder-story .hm47-o-close#story-walk{padding:10px 0 0!important}
html.omhm-holiday .hm48-origin>.hm48-surface--origin>.hm48-support{inset:-10px;filter:blur(3px);background:linear-gradient(100deg,rgba(5,5,5,.74) 0%,rgba(5,5,5,.64) 100%)}
@media(min-width:1100px){html.omhm-holiday body.om-mvp #ten-years .hm47-origin{padding:20px;column-gap:22px;row-gap:12px;grid-template-rows:auto auto 1fr}}

/* ---------- M6 and the equal heights: the year rows are film strips ---------- */
html.omhm-holiday body.om-mvp .hm9-years{align-items:stretch}
html.omhm-holiday body.om-mvp .hm9-years>.album-gift{display:flex;flex-direction:column}
html.omhm-holiday body.om-mvp .hm9-years>.album-gift>.album-gift-body{display:flex;flex-direction:column;flex:1 1 auto}
html.omhm-holiday body.om-mvp .hm9-years .year-preview-index{flex:1 1 auto;display:grid;grid-auto-rows:minmax(116px,1fr)}
html.omhm-holiday body.om-mvp .hm9-years .hme-row{align-items:stretch;min-height:0}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-heading{align-self:center}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .hm47-side{align-self:center}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-strip.hme-film{position:relative;display:block;height:auto!important;min-height:96px;overflow:hidden;scroll-snap-type:none;margin:0!important;padding:0!important;align-self:stretch;border-radius:6px}
html.omhm-holiday body.om-mvp .hm9-years .hme-film-track{position:absolute;left:0;top:0;bottom:0;display:flex;width:max-content;animation:hme-film var(--hme-film-fallback) linear infinite;will-change:transform}
html.omhm-holiday body.om-mvp .hm9-years .hme-dir-r .hme-film-track{animation-direction:reverse}
html.omhm-holiday body.om-mvp .hm9-years .hme-film-set{display:flex;flex:0 0 auto;gap:6px;padding-right:6px;height:100%}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-photo{flex:0 0 auto;width:auto;height:100%;aspect-ratio:4/5;scroll-snap-align:none}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-photo img{width:100%!important;height:100%!important;object-fit:cover!important}
/* Wave J (J5b): WebKit counted the img's intrinsic 360 px width in each photo's max-content width (the percentage height does not resolve in the intrinsic pass), so a film set measured about 4.4 times too wide and the strip ran blank.
   The img leaves the flow; the 4/5 box decides the size at any strip height. Chromium measures the same as before. */
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-photo{position:relative}
html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-photo img{position:absolute!important;top:0;left:0;inset:0}
html.omhm-holiday body.om-mvp .hm9-years .hme-film:is(:hover,:focus-within) .hme-film-track{animation-play-state:paused}
@keyframes hme-film{to{transform:translateX(-50%)}}
@media(max-width:760px){html.omhm-holiday body.om-mvp .hm9-years .year-preview-index{grid-auto-rows:minmax(104px,1fr)}
  html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-strip.hme-film{min-height:96px}}
/* Reduced motion and ?static=1 (html.rv33 without rv33-js): a native scroll row, the copy hidden, nothing runs. */
html.rv33:not(.rv33-js).omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-strip.hme-film{overflow-x:auto;scrollbar-width:none}
html.rv33:not(.rv33-js).omhm-holiday body.om-mvp .hm9-years .hme-film-track{animation:none!important;transform:none!important}
html.rv33:not(.rv33-js).omhm-holiday body.om-mvp .hm9-years .hme-film-copy{display:none}
@media(prefers-reduced-motion:reduce){
  html.omhm-holiday body.om-mvp .hm9-years .hme-row .year-preview-strip.hme-film{overflow-x:auto;scrollbar-width:none}
  html.omhm-holiday body.om-mvp .hm9-years .hme-film-track{animation:none!important;transform:none!important}
  html.omhm-holiday body.om-mvp .hm9-years .hme-film-copy{display:none}
}

/* ---------- M7 and M8. Chapters: one layout, one photograph at a time on plaid, a wall crop sized for the box, the panel inset inside the wall ---------- */
html.omhm-holiday .hm48-row{--hme-pad:22px}
/* Bags bug: a positioned grid item with only a start line runs to the container edge, so the wall box of every row that has its text on the left spanned the whole section. Both lines are explicit now. */
html.omhm-holiday .hm48-row--media-left .hm48-inner>.hm48-surface{grid-column:2 / 3}
html.omhm-holiday .hm48-row--media-right .hm48-inner>.hm48-surface{grid-column:1 / 2}
html.omhm-holiday .hm48-row--media-left .hm48-inner{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
html.omhm-holiday .hm48-row--media-right .hm48-inner{grid-template-columns:minmax(0,56fr) minmax(0,44fr)}
html.omhm-holiday .hm48-row .hm48-gallery{max-width:520px}
/* The wall box: a 900 by 900 region of an ornament wall at native pixels (the holiday-wall crops in assets/art-20261007/). Seven rows take seven different crops. */
html.omhm-holiday #story-makers.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-a-l-900.webp')!important}
html.omhm-holiday #story-bags.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-b-r-900.webp')!important}
html.omhm-holiday #team.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-c-l-900.webp')!important}
html.omhm-holiday #story-party.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-a-r-900.webp')!important}
html.omhm-holiday #words.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-b-l-900.webp')!important}
html.omhm-holiday #story-raffle.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-c-r-900.webp')!important}
html.omhm-holiday #story-volunteers.hm48-row{--hm48-tree-img:url('./art-20261007/holiday-wall-a-l-900.webp')!important}
html.omhm-holiday .hm48-row .hm48-tree{background-size:cover;background-position:50% 50%}
/* The panel: crisp edges, inset by an inch inside the wall box, so the wall shows around it and in the corners. */
html.omhm-holiday .hm48-row .hm48-support{inset:var(--hme-inch);filter:none;border-radius:10px;background:rgba(5,5,5,.92)}
html.omhm-holiday .hm48-row--media-right>.hm48-inner>.hm48-surface>.hm48-support{background:rgba(5,5,5,.92)}
html.omhm-holiday .hm48-row .hm48-intro{padding:calc(var(--hme-inch) + var(--hme-pad)) calc(var(--hme-inch) + var(--hme-pad)) 0}
html.omhm-holiday .hm48-row .hm48-rest{padding:0 calc(var(--hme-inch) + var(--hme-pad)) calc(var(--hme-inch) + var(--hme-pad))}
html.omhm-holiday .hm48-row .hm48-prose p{font-size:16.5px!important;line-height:1.58!important}
@media(max-width:1099px){
  html.omhm-holiday .hm48-row .hm48-surface--block>.hm48-support{inset:var(--hme-inch);filter:none}
  html.omhm-holiday .hm48-row .hm48-intro,html.omhm-holiday .hm48-row .hm48-rest{--hme-pad:12px;padding:calc(var(--hme-inch) + var(--hme-pad))}
  html.omhm-holiday .hm48-row .hm48-intro{padding-bottom:calc(var(--hme-inch) + var(--hme-pad))}
  html.omhm-holiday .hm48-row .hm48-surface--block>.hm48-tree{background-image:var(--hm48-tree-img)}
}
/* The stage: plaid (lighter than before), one framed photograph centered. */
html.omhm-holiday body.om-mvp .hm48-stage::after{background:rgba(0,0,0,.1)}
html.omhm-holiday body.om-mvp .hm48-strip{justify-content:center;align-items:stretch}
html.omhm-holiday body.om-mvp .hm48-strip .hm48-slot.is-active.b59b-framed{flex:0 0 min(100cqw,calc(100cqh * var(--b59-ar,.8)))}
html.omhm-holiday body.om-mvp .hm48-strip[data-slots="1"] .hm48-slot.is-active:not(.b59b-framed){flex:0 0 min(78cqw,calc(100cqh * var(--photo-ratio,.8)));height:100%;border-color:var(--hme-red)}

/* ---------- M9 and M10. The Tenth sits on the plaid with its lockup; the year covers follow it, also on the plaid ---------- */
html.omhm-holiday body.om-mvp #story-learned{width:min(1200px,calc(100% - 48px));background:none!important;background-color:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;padding:0!important}
html.omhm-holiday body.om-mvp #story-learned .hme-tenth{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center}
html.omhm-holiday body.om-mvp #story-learned .hme-tenth-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}
html.omhm-holiday body.om-mvp #story-learned :is(.story-chapter-head,.story-chapter-layout,.story-prose){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important}
html.omhm-holiday body.om-mvp #story-learned .story-chapter-head{text-align:left}
html.omhm-holiday body.om-mvp #story-learned .story-chapter-head h2{text-align:left!important;margin:0 0 14px!important}
html.omhm-holiday body.om-mvp #story-learned .story-prose p{margin:0 0 .8em;text-align:left!important;font:700 19px/1.5 "OMHM Tomorrow",system-ui,sans-serif;color:#fff;border:0!important;padding:0!important;max-width:none;
  text-shadow:0 0 2px #000,0 1px 3px #000,0 0 10px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.8)}
html.omhm-holiday body.om-mvp #story-learned .hm12-actions{margin-top:14px}
@media(max-width:1099px){html.omhm-holiday body.om-mvp #story-learned .hme-tenth{grid-template-columns:minmax(0,1fr);gap:18px}
  html.omhm-holiday body.om-mvp #story-learned .hme-tenth-art{width:min(300px,76%);margin:0 auto}}
/* The year covers: the heading sits on plaid (no support); the packages keep their own boxes. */
html.omhm-holiday body.om-mvp #hm12-years-intro{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:56px}
html.omhm-holiday body.om-mvp #hm12-years-intro header{background:none!important;border:0!important;box-shadow:none!important}
html.omhm-holiday body.om-mvp #hm12-years-intro p{color:#fff;font-weight:700;text-shadow:0 0 2px #000,0 1px 3px #000,0 0 12px rgba(0,0,0,.9)}

/* ---------- M11. Make a Day of It: the photograph opposite, the body text at the site body size ---------- */
html.omhm-holiday body.om-mvp #faq .hme-day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:40px;align-items:center;max-width:none}
html.omhm-holiday body.om-mvp #faq .hme-day-copy>h2{margin:0 0 14px}
html.omhm-holiday body.om-mvp #faq .hme-day-copy>p{font:400 17px/1.62 "OMHM Tomorrow",system-ui,sans-serif;color:#fff;max-width:60ch;margin:0 0 .9em}
html.omhm-holiday body.om-mvp #faq .hme-day-photo{margin:0;padding:0}
html.omhm-holiday body.om-mvp #faq .hme-day-photo .omf{max-width:400px;margin-inline:auto}
@media(max-width:1099px){html.omhm-holiday body.om-mvp #faq .hme-day{grid-template-columns:minmax(0,1fr);gap:16px}
  html.omhm-holiday body.om-mvp #faq .hme-day-photo .omf{max-width:230px}}

/* ---------- M12. Under "The Best Gifts Come With a Story": Justin's sentence in mint Backline ---------- */
html.omhm-holiday body.om-mvp #hm12-final-cta .hme-treat{margin:16px 0 20px;font:400 clamp(1.9rem,3.2vw,2.7rem)/1.15 "OMHM Backline",cursive;color:var(--hme-mint);max-width:none;text-shadow:0 2px 0 rgba(0,0,0,.6)}

/* ---------- Gate follow-up (coordinator, 2026-10-07): "The Tenth." plaid strip. Headings sit on plaid with no support: the feathered dark supports behind the heading and its two lines leave.
   Legibility is the outline weight only: the mint Backline heading takes a black outline, the two lines take the same white-on-black text outline the Tenth body uses. ---------- */
html.omhm-holiday body.om-mvp section#cta[data-hm9-tenth] :is(.cta-core,.cta-head,.story-prose){background:none!important;background-color:transparent!important;box-shadow:none!important;border:0!important;filter:none!important}
html.omhm-holiday body.om-mvp section#cta[data-hm9-tenth] :is(.cta-core,.cta-head,.story-prose)::before,html.omhm-holiday body.om-mvp section#cta[data-hm9-tenth] :is(.cta-core,.cta-head,.story-prose)::after{content:none!important;display:none!important;background:none!important}
html.omhm-holiday body.om-mvp section#cta[data-hm9-tenth] .cta-head h2{-webkit-text-stroke:7px #000;paint-order:stroke fill;text-shadow:none!important}
html.omhm-holiday body.om-mvp section#cta[data-hm9-tenth] .story-prose p{font-weight:700;color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:0 0 2px #000,0 1px 3px #000}