/* timeline v5: "The hammam, at home" as a sliding strip (prefix hs-). The old .tl rules in sections.css are unused.
   Three layouts:
   - default (no script, ?nolive=1, reduced motion), desktop: a 7-up grid (4 up below 1180 px), every card in the page;
   - phones (760 px and below), live or not: a native horizontal scroller with snap;
   - .hs-on (added by timeline.js on desktop with lx-live): the pinned strip, one row on one rail, moved by the scroll. */
.hs{background:var(--plaster);padding-block:clamp(56px,8vw,120px);position:relative}
.hs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* heading row: label and title on the left, the sentence on the right, sharing a baseline */
.hs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,44px)}
.hs-head h2{margin-top:12px}
.hs-sub{font-size:19px;line-height:1.45;color:var(--ink-2);max-width:34ch;padding-bottom:6px}

/* the track and the cards */
/* the view runs full width (the strip slides edge to edge); the track keeps the content inside the page's own column */
.hs-track{list-style:none;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;padding:0 max(var(--gutter),calc((100% - var(--max)) / 2)) 2px}
.hs-card{position:relative;min-width:0;display:flex}
.hs-lift{flex:1;display:flex;flex-direction:column;padding:10px;border-radius:8px 8px 3px 3px;background:var(--plaster-2);color:var(--ink)}
.hs-card.g-sage .hs-lift{background:#D4D8C4;background:color-mix(in srgb,var(--sage) 35%,var(--plaster))}
.hs-card.g-terra .hs-lift{background:#E8D3C1;background:color-mix(in srgb,var(--terracotta) 18%,var(--plaster))}
.hs-card.g-amber .hs-lift{background:#EBD6B8;background:color-mix(in srgb,var(--amber) 22%,var(--plaster))}
.hs-card.g-umber .hs-lift{background:var(--umber);color:var(--off)}
/* the rail when the cards are in the page: each card stands on its piece of the line, the pieces join across the gaps */
.hs-card::after{content:"";position:absolute;left:-7px;right:-7px;bottom:-2px;height:2px;background:var(--terracotta)}

/* the photograph, 4:5 */
.hs-ph{position:relative;aspect-ratio:4/5;border-radius:5px;overflow:hidden;background:var(--umber-2);isolation:isolate}
.hs-pic img{position:absolute;max-width:none;height:auto}
/* a cut-out on its set: a wall in the card's colour lit from the top left, a small plinth, a soft shadow under the product */
.hs-set{position:absolute;inset:0;--wall:var(--plaster-2);--ledge:#CDBDA4;background:radial-gradient(110% 80% at 22% 8%,rgba(251,247,238,.55),rgba(251,247,238,0) 62%),var(--wall)}
.g-sage .hs-set{--wall:#C2CAB2;--wall:color-mix(in srgb,var(--sage) 62%,var(--plaster));--ledge:#A4927B;--ledge:color-mix(in srgb,var(--umber) 34%,var(--plaster-2))}
.g-terra .hs-set{--wall:#DDB49B;--wall:color-mix(in srgb,var(--terracotta) 40%,var(--plaster));--ledge:#A9806A;--ledge:color-mix(in srgb,var(--umber) 30%,var(--terracotta) 40%)}
.g-umber .hs-set{--wall:var(--umber-2);--ledge:#7A5E48;--ledge:color-mix(in srgb,var(--umber) 70%,var(--plaster-2));background:radial-gradient(100% 75% at 30% 12%,rgba(251,247,238,.16),rgba(251,247,238,0) 62%),var(--wall)}
.hs-ledge{position:absolute;left:0;right:0;bottom:0;height:19%;background:linear-gradient(to bottom,rgba(251,247,238,.5) 0 1px,var(--ledge) 1px 30%,color-mix(in srgb,var(--ledge) 82%,var(--umber-2)))}
.hs-blob{position:absolute;left:50%;bottom:calc(19% - 9px);width:74%;height:20px;margin-left:-37%;border-radius:50%;background:radial-gradient(closest-side,var(--umber-2),rgba(58,39,25,0));opacity:.3}
.hs-cut{position:absolute;left:50%;bottom:19%;max-width:none;filter:drop-shadow(0 10px 12px rgba(42,29,21,.2)) drop-shadow(0 2px 3px rgba(42,29,21,.14))}
.hs-fit-soap .hs-cut{width:84%;height:auto;margin-left:-42%;bottom:17%;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 13%);mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 13%)}
/* widths from each photograph's own ratio so the product stands centred: glove 64, pouch 62, bottle 70 percent of the frame's height */
.hs-fit-glove .hs-cut{width:68.7%;height:auto;margin-left:-34.35%}
.hs-fit-pouch .hs-cut{width:68.9%;height:auto;margin-left:-34.45%}
.hs-fit-bottle .hs-cut{width:54.9%;height:auto;margin-left:-27.45%}

/* the numeral on an umber plate (amber on umber passes 3:1 for large text; amber on the light grounds would not) */
.hs-n{position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 10px 7px;border-radius:4px;background:var(--umber);color:var(--amber);font-family:var(--font-display);font-size:30px;line-height:1;font-weight:340;letter-spacing:-.01em;font-variation-settings:"opsz" 144,"SOFT" 40}
.g-umber .hs-n{background:var(--umber-2)}

/* the words */
.hs-words{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:16px 8px 8px}
.hs-t{font-size:26px;line-height:1.05}
.hs-l{font-size:16px;line-height:1.5;color:var(--ink-2);margin:8px 0 14px}
.g-umber .hs-l{color:rgba(251,247,238,.84)}
.hs-time{margin-top:auto;display:inline-block;padding:6px 10px;border-radius:3px;background:var(--off);color:var(--ink);font-size:13px;font-weight:700;line-height:1.3}
.g-umber .hs-time{background:rgba(251,247,238,.12);color:var(--off)}

/* the note bar */
.hs-note{margin-top:clamp(28px,3.4vw,44px);padding:20px 26px;border-radius:8px;background:var(--umber);color:var(--off);font-size:18px;line-height:1.5;font-weight:500}

/* the rail element is only used by the pinned strip */
.hs-rail{display:none}

/* static desktop below 1180 px: four up, then three */
@media (min-width:761px) and (max-width:1179px){
  .hs-track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px}
}
@media (min-width:761px) and (max-width:1439px){
  .hs-t{font-size:23px}
  .hs-l{font-size:15px}
  .hs-n{font-size:26px}
}

/* phones: a native scroller with snap, every card reachable by a swipe */
@media (max-width:760px){
  .hs-head{display:block}
  .hs-sub{margin-top:12px;font-size:17px}
  .hs-view{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hs-view::-webkit-scrollbar{display:none}
  .hs-track{display:flex;width:max-content;gap:12px;padding:0 var(--gutter) 2px}
  .hs-card{width:min(76vw,300px);flex:0 0 auto;scroll-snap-align:start}
  .hs-card::after{left:-6px;right:-6px}
  .hs-card:first-child::after{left:0}
  .hs-card:last-child::after{right:0}
  .hs-t{font-size:24px}
  .hs-note{font-size:17px;padding:16px 18px}
}

/* the pinned strip (desktop, lx-live, set up by timeline.js from 761 px wide and 640 px tall). The top padding keeps the
   label clear of the header (76 px), which stays put while the section holds; the cards shrink on short windows instead. */
@media (min-width:761px){
  .hs.hs-on{padding-bottom:clamp(40px,5vw,72px)}
  .hs.hs-on .hs-pin{height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:82px 0 20px}
  .hs.hs-on .hs-head{margin-bottom:clamp(20px,3vh,36px)}
  .hs.hs-on .hs-view{position:relative;overflow:hidden;outline:none;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
  .hs.hs-on .hs-view.grabbing{cursor:grabbing}
  .hs.hs-on .hs-view:focus-visible{box-shadow:inset 0 0 0 2px var(--umber)}
  .hs.hs-on .hs-track{--cw:clamp(200px,min(30vw,(100svh - 400px) * .8),340px);display:flex;width:max-content;gap:20px;padding:12px max(var(--gutter),calc((100vw - var(--max)) / 2)) 0;will-change:transform}
  .hs.hs-on .hs-card{width:var(--cw);flex:0 0 auto}
  .hs.hs-on .hs-card::after{display:none}
  .hs.hs-on .hs-lift{transform-origin:50% 100%;will-change:transform}
  .hs.hs-on .hs-words{padding-top:14px}
  .hs.hs-on .hs-rail{display:block;position:relative;height:2px;background:var(--umber)}
  .hs.hs-on .hs-fill{position:absolute;inset:0;background:var(--terracotta);transform-origin:0 50%;transform:scaleX(0)}
  .hs.hs-on .hs-cut,.hs.hs-on .hs-pic img{-webkit-user-drag:none}
  /* passed stops: the numeral turns from a quiet off-white to amber (an amber copy fades in on top; opacity only) */
  .hs.hs-on .hs-n{color:rgba(251,247,238,.58)}
  .hs.hs-on .hs-n::after{content:attr(data-n);position:absolute;left:10px;top:5px;color:var(--amber);opacity:0;transition:opacity .3s var(--ease)}
  .hs.hs-on .hs-card.is-past .hs-n::after{opacity:1}
}
@media (prefers-reduced-motion:reduce){.hs.hs-on .hs-n::after{transition:none}}