/* Shym story home page (?newlook=2), 19 Oct 2026, CHOSEN by Francis over #1 the same day. home-story.php draws it,
   shym-story.js moves it. The colours, the font, the corners and the buttons are DESIGN.md's (the tokens sit on
   .shym-home in shym-shell.css). The layout and the motion are the story style (DESIGN.md, Overview), and the big
   words are larger than DESIGN.md's sizes, on purpose. Every class starts with shym-story. The theme styles bare tags, so every heading,
   paragraph, list and link here names its tag as well as its class.
   Motion lives behind .is-js (the script is running) and .is-still (the visitor asked for less motion): with no
   script, or with less motion, every part is a plain, still layout that shows everything. */

.shym-story{--gut:clamp(16px,3.4vw,48px);--slow:cubic-bezier(.16,1,.3,1);--soft:cubic-bezier(.65,0,.35,1);background:var(--white)}
.shym-story .shym-story__wrap{width:min(1365px,calc(100% - 48px));margin:0 auto}
.shym-story video{display:block}
.shym-story i{font-style:normal}

/* ---------- type ---------- */
.shym-story h1.shym-story__h1{margin:0;padding:0;max-width:13ch;font:600 clamp(46px,7.6vw,128px)/.94 var(--font);letter-spacing:-.045em;text-transform:none;color:var(--white)}
.shym-story h2.shym-story__h2{margin:0;padding:0;font:600 clamp(40px,6.2vw,104px)/.96 var(--font);letter-spacing:-.04em;text-transform:none;color:var(--ink)}
.shym-story h2.shym-story__h2.is-light{color:var(--white)}
.shym-story p.shym-story__eyebrow{margin:0 0 18px;padding:0;font:600 12.5px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.shym-story p.shym-story__side{margin:0;max-width:360px;font:400 17px/1.6 var(--font);color:var(--body)}
.shym-story p.shym-story__kicker{display:inline-flex;align-items:center;gap:8px;height:32px;margin:0 0 22px;padding:0 14px 0 11px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7);font:600 13px/1 var(--font);color:var(--white)}
.shym-story p.shym-story__kicker svg{width:16px;height:16px}
.shym-story p.shym-story__kicker.is-plain{height:auto;padding:0;box-shadow:none;margin:0 0 14px;font-weight:500;font-size:15px;color:rgba(255,255,255,.9)}
.shym-story .shym-story__m{display:inline-block;vertical-align:top;overflow:hidden;padding:0 .02em .1em;margin:0 -.02em -.1em}
.shym-story .shym-story__m>span{display:inline-block}
.shym-story .shym-story__dot{display:inline-block;flex:none;width:.16em;height:.16em;border-radius:50%;background:currentColor}

/* the round arrow of the cards and lines: an outline at rest, orange when pointed at (DESIGN.md: orange = action) */
.shym-story .shym-story__go{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--slow)}
.shym-story .shym-story__go svg{width:18px;height:18px}

/* things that rise into view (the script adds .is-in once each is on screen) */
.shym-story.is-js:not(.is-still) [data-rise]{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s var(--slow),transform 1.2s var(--slow);transition-delay:var(--d,0s)}
.shym-story.is-js [data-rise].is-in{opacity:1;transform:none}
.shym-story.is-js:not(.is-still) [data-split] .shym-story__m>span{transform:translate3d(0,110%,0);transition:transform 1.15s var(--slow);transition-delay:calc(var(--k,0) * 55ms)}
.shym-story.is-js [data-split].is-in .shym-story__m>span{transform:none}

/* ---------- 1. the opening ---------- */
/* the hero starts under the see-through main bar of the header, as on the first new page */
.shym-story .shym-story__open{position:relative;margin-top:calc(-1 * var(--shym-main-h,76px))}
.shym-story .shym-story__hero{position:sticky;top:0;z-index:0;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);color:var(--white)}
.shym-story .shym-story__hero-media{position:absolute;inset:0;overflow:hidden;transform-origin:50% 70%;transform:scale(calc(1 - .1 * var(--p,0)));border-radius:calc(28px * var(--p,0))}
.shym-story .shym-story__hero-media img,.shym-story .shym-story__hero-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:60% 50%}
.shym-story .shym-story__hero-media video{opacity:0;transition:opacity 1s}
.shym-story .shym-story__hero-media video.is-on{opacity:1}
/* strong only where the words are: along the bottom and up the left */
.shym-story .shym-story__hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,34,47,.72) 0%,rgba(38,34,47,.36) 40%,rgba(38,34,47,0) 70%),linear-gradient(90deg,rgba(38,34,47,.52) 0%,rgba(38,34,47,.44) 45%,rgba(38,34,47,0) 74%),linear-gradient(180deg,rgba(38,34,47,.42) 0%,rgba(38,34,47,0) 22%),rgba(38,34,47,.18)}
.shym-story .shym-story__hero-shade:after{content:"";position:absolute;inset:0;background:var(--ink);opacity:calc(var(--p,0) * .55)}
.shym-story .shym-story__hero-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;height:100%;padding:calc(var(--shym-main-h,76px) + 40px) var(--gut) clamp(32px,6vh,64px);transform:translate3d(0,calc(var(--p,0) * -12vh),0);opacity:calc(1 - var(--p,0) * 1.5)}
.shym-story .shym-story__hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;width:100%;margin-top:clamp(24px,4vh,44px)}
.shym-story .shym-story__hero-say{max-width:520px}
.shym-story p.shym-story__hero-lead{margin:0;font:400 17px/1.6 var(--font);color:rgba(255,255,255,.92)}
.shym-story a.shym-story__rating{margin-top:16px}
.shym-story .shym-story__btns{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.shym-story .shym-story__cue{position:absolute;right:var(--gut);top:calc(var(--shym-main-h,76px) + 36px);display:flex;flex-direction:column;align-items:center;gap:10px;font:600 12.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);writing-mode:vertical-rl}
.shym-story .shym-story__cue i{position:relative;display:block;width:1.5px;height:56px;overflow:hidden;background:rgba(255,255,255,.3)}
.shym-story .shym-story__cue i:after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--white);animation:shym-story-cue 2.2s var(--soft) infinite}
@keyframes shym-story-cue{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* the opening plays once when the page opens (no script needed) */
.shym-story .shym-story__h1 .shym-story__m>span{animation:shym-story-up 1.3s var(--slow) both;animation-delay:calc(.15s + var(--k,0) * 70ms)}
.shym-story .shym-story__hero-in>p.shym-story__kicker,.shym-story .shym-story__hero-foot{animation:shym-story-fade 1.2s var(--slow) both}
.shym-story .shym-story__hero-in>p.shym-story__kicker{animation-delay:.05s}
.shym-story .shym-story__hero-foot{animation-delay:.65s}
.shym-story .shym-story__hero-media img{animation:shym-story-zoom 2.4s var(--slow) both}
@keyframes shym-story-up{from{transform:translate3d(0,110%,0)}to{transform:none}}
@keyframes shym-story-fade{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
@keyframes shym-story-zoom{from{transform:scale(1.08)}to{transform:none}}

/* ---------- 1b. shop by category: the first thing on the white sheet that slides up over the opening ---------- */
/* Francis, 19 Oct 2026: the categories straight after the opening, the opening a full screen, and not "plain" with "a
   lot of white spaces around it": big cream cards, the product cards' look (DESIGN.md: cream, 18px corners, the white
   of a product shot melts into the cream, a 2px lift with the card hover shadow and an orange arrow on hover) */
.shym-story nav.shym-story__cats>.shym-story__wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"eye more" "cards cards";align-items:center;gap:18px 24px;padding:clamp(28px,3.2vw,48px) 0 0}
.shym-story p.shym-story__cats-eye{grid-area:eye;margin:0}
.shym-story ul.shym-story__cat-cards{grid-area:cards}
.shym-story .shym-story__cats-more{grid-area:more;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.shym-story .shym-story__cats-more .shym-look-link{margin-left:8px}
/* 4 cards: Saunas double, then Heaters, Hot tubs, Cold plunge (Log cabins became a chip, 23 Oct 2026) */
.shym-story ul.shym-story__cat-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.shym-story ul.shym-story__cat-cards>li{min-width:0;margin:0;padding:0}
.shym-story ul.shym-story__cat-cards>li.is-wide{grid-column:span 2}
.shym-story a.shym-story__cat,.shym-story a.shym-story__cat:visited{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:clamp(270px,22vw,330px);padding:18px 18px 20px;border-radius:18px;background:var(--cream);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .4s var(--slow),box-shadow .4s var(--slow)}
.shym-story a.shym-story__cat:hover{transform:translate3d(0,-2px,0);box-shadow:0 16px 34px -20px rgba(38,34,47,.45)}
.shym-story a.shym-story__cat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-story .shym-story__cat-pic{position:absolute;left:16px;right:16px;top:18px;bottom:106px;display:flex;align-items:flex-end;justify-content:center}
.shym-story .shym-story__cat-pic img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;object-fit:contain;mix-blend-mode:multiply;transform-origin:50% 100%;transition:transform .7s var(--slow)}
.shym-story a.shym-story__cat:hover .shym-story__cat-pic img{transform:scale(1.05)}
.shym-story .shym-story__cat-words{position:relative;display:flex;flex-direction:column;gap:3px;padding-right:44px}
.shym-story .shym-story__cat-words b{font:600 clamp(20px,1.7vw,26px)/1.1 var(--font);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.shym-story .shym-story__cat-from{margin-top:2px;font:400 14px/1.35 var(--font);white-space:nowrap;color:var(--body)}
.shym-story .shym-story__cat-from strong{font-weight:700;color:var(--ink)}
/* the count is a small orange link with its arrow, like "All products (175)" (Francis, 20 Oct 2026: "a pinch of the
   accent color", "a bit more subtle" than an arrow always on); pointed at, it darkens and its arrow moves right */
.shym-story .shym-story__cat-words i{display:flex;align-self:flex-start;align-items:center;gap:5px;font:600 13px/1.35 var(--font);font-style:normal;white-space:nowrap;color:var(--orange);transition:color .25s}
.shym-story .shym-story__cat-words i svg{flex:none;width:12px;height:12px;transition:transform .25s}
.shym-story a.shym-story__cat:hover .shym-story__cat-words i{color:var(--orange-deep)}
.shym-story a.shym-story__cat:hover .shym-story__cat-words i svg{transform:translateX(3px)}
.shym-story .shym-story__cat-go{position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--white);opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--slow)}
.shym-story .shym-story__cat-go svg{width:16px;height:16px}
.shym-story a.shym-story__cat:hover .shym-story__cat-go,.shym-story a.shym-story__cat:focus-visible .shym-story__cat-go{opacity:1;transform:none}

/* ---------- 2. the purpose: a white sheet that slides up over the opening ---------- */
.shym-story .shym-story__sheet{position:relative;z-index:1;padding:0 0 clamp(40px,4vw,64px);border-radius:28px 28px 0 0;background:var(--white)}
.shym-story .shym-story__sheet>.shym-story__sheet-in{padding-top:clamp(56px,7vw,112px)}
.shym-story p.shym-story__statement{max-width:1200px;margin:0;font:500 clamp(30px,4.1vw,64px)/1.1 var(--font);letter-spacing:-.032em;color:var(--ink)}
.shym-story.is-js:not(.is-still) .shym-story__w{opacity:clamp(.14,calc((var(--p,1) * 1.25 - var(--i,0)) * 5),1)}
.shym-story ul.shym-story__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:clamp(64px,8vw,120px) 0 0;padding:clamp(28px,3vw,40px) 0 0;border-top:1px solid var(--line);list-style:none}
.shym-story ul.shym-story__stats li{display:flex;flex-direction:column;gap:12px;margin:0}
.shym-story ul.shym-story__stats b{font:600 clamp(56px,7.2vw,116px)/.9 var(--font);letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.shym-story ul.shym-story__stats span{max-width:300px;font:400 16px/1.5 var(--font);color:var(--body)}
/* the big sentence on the left, "About us" on the right on its last line (Francis, 19 Oct 2026) */
.shym-story .shym-story__purpose-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.shym-story .shym-story__purpose-head .shym-look-btn{flex:none;margin-bottom:max(0px,calc((clamp(30px,4.1vw,64px) - 44px) * .6))}
/* (the lift keeps the button's middle on the middle of the last line: the line's own space under the words grows with
   the size of the words, measured at 1024 to 1920 px) */

/* ---------- 2b. the brands: between the purpose's numbers and its closing words, ink logos moving slowly ---------- */
/* Francis, 19 Oct 2026: the brand logos, "it has to look the part". One Plum ink shape each (make_logos.py), a little
   faded until pointed at. The run goes edge to edge and fades at both ends; it moves one set of 6 in 56 s, about 30 px
   a second, and only while it is on screen (shym-story.js, part 8). */
/* Francis, 20 Oct 2026: no "Brands we work with" over the logos, and the line moved under them, closing the sheet */
.shym-story .shym-story__brands{margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(16px,2vw,28px);border-bottom:1px solid var(--line)}
.shym-story .shym-story__brands-run{margin:0 calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 max(40px,7%),#000 calc(100% - max(40px,7%)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 max(40px,7%),#000 calc(100% - max(40px,7%)),transparent 100%)}
.shym-story ul.shym-story__brands-track{display:flex;align-items:center;width:max-content;margin:0;padding:0;list-style:none}
.shym-story ul.shym-story__brands-track>li{display:flex;align-items:center;justify-content:center;flex:none;height:clamp(80px,7.4vw,108px);margin:0;padding:0 clamp(32px,3.6vw,64px)}
.shym-story ul.shym-story__brands-track img{display:block;width:auto;height:var(--h,40px);max-width:none;margin:0;opacity:.72;transition:opacity .35s}
.shym-story ul.shym-story__brands-track>li:hover img{opacity:1}
@keyframes shym-story-brands{to{transform:translate3d(-25%,0,0)}}
.shym-story.is-js:not(.is-still) ul.shym-story__brands-track{animation:shym-story-brands 56s linear infinite;animation-play-state:paused}
.shym-story.is-js:not(.is-still) .shym-story__brands-run.is-run ul.shym-story__brands-track{animation-play-state:running}
@media (hover:hover){.shym-story.is-js:not(.is-still) .shym-story__brands-run.is-run:hover ul.shym-story__brands-track{animation-play-state:paused}}
/* no script or less motion: one still row of the 6 */
.shym-story:not(.is-js) ul.shym-story__brands-track>li[aria-hidden],.shym-story.is-still ul.shym-story__brands-track>li[aria-hidden]{display:none}
.shym-story:not(.is-js) .shym-story__brands-run,.shym-story.is-still .shym-story__brands-run{margin:0;-webkit-mask-image:none;mask-image:none}
.shym-story:not(.is-js) ul.shym-story__brands-track,.shym-story.is-still ul.shym-story__brands-track{flex-wrap:wrap;justify-content:center;width:auto}

/* ---------- 3. Sauna life: the cards are dealt, then the row drifts sideways by itself ---------- */
.shym-story .shym-story__ritual{position:relative;background:var(--cream)}
.shym-story .shym-story__ritual .shym-story__stage{padding:clamp(80px,9vw,128px) 0}
.shym-story .shym-story__ritual-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 clamp(32px,5vh,56px)}
/* the two round arrows on the row's left and right edges, 24px in from the screen's edges and level with the middle of
   the cards (Francis, 23 Oct 2026: "on the row itself on the left and right edges"): the video tile's own round button,
   white with a Plum ink arrow, orange on hover. They come in once the row moves by itself, when cards fill both edges.
   Only with the moving row on a computer with a mouse: a finger drags the row, a phone swipes it. */
.shym-story .shym-story__arrows{display:none}
.shym-story button.shym-story__arrow,.shym-story button.shym-story__arrow:focus{position:absolute;top:0;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0;padding:0;border:0;border-radius:50%;background:var(--white) !important;outline:0;color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:background .3s,color .3s,transform .3s var(--ease),opacity .4s,visibility 0s .4s}
.shym-story button.shym-story__arrow.is-prev{left:24px}
.shym-story button.shym-story__arrow.is-next{right:24px}
.shym-story .shym-story__ritual.is-moving button.shym-story__arrow{opacity:1;visibility:visible;pointer-events:auto;transition:background .3s,color .3s,transform .3s var(--ease),opacity .4s}
.shym-story button.shym-story__arrow:hover{background:var(--orange) !important;color:var(--white)}
.shym-story button.shym-story__arrow.is-next:hover{transform:translateX(2px)}
.shym-story button.shym-story__arrow.is-prev:hover{transform:translateX(-2px)}
.shym-story button.shym-story__arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-story button.shym-story__arrow svg{display:block;width:18px;height:18px}
.shym-story button.shym-story__arrow.is-prev svg{transform:rotate(180deg)}
@media (min-width:768px) and (hover:hover){
  .shym-story.is-js:not(.is-still) .shym-story__arrows{display:block;position:absolute;left:0;right:0;top:var(--row-y,60%);z-index:3;height:0;pointer-events:none}
}
/* the plain row (no script, less motion, a phone): swiped sideways, out to the screen's edge */
.shym-story ol.shym-story__cards{position:relative;display:flex;gap:20px;margin:0 calc(50% - 50vw) 0 0;padding:0 24px 8px 0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.shym-story ol.shym-story__cards::-webkit-scrollbar{display:none}
.shym-story li.shym-story__card{position:relative;flex:0 0 clamp(240px,23vw,340px);aspect-ratio:2/3;margin:0;border-radius:18px;scroll-snap-align:start}
.shym-story a.shym-story__card-in,.shym-story a.shym-story__card-in:visited{position:absolute;inset:0;display:block;flex:none;aspect-ratio:auto;border-radius:18px;overflow:hidden;isolation:isolate;background:var(--ink);color:var(--white);text-decoration:none;-webkit-user-drag:none}
.shym-story .shym-story__card-media,.shym-story .shym-story__card-media img,.shym-story .shym-story__card-media video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .7s var(--ease)}
.shym-story .shym-story__card-media video{opacity:0;transition:opacity .25s,transform .7s var(--ease)}
.shym-story .shym-story__card-media video.is-on{opacity:1}
.shym-story a.shym-story__card-in:hover .shym-story__card-media img,.shym-story a.shym-story__card-in:hover .shym-story__card-media video{transform:scale(1.04)}
/* the shade, the words and the play button are the category page's own tile (shym-home.css 5b), Francis 19 Oct 2026 */
/* the round play button, white like the first new page's, orange when pointed at (DESIGN.md: orange = action) */
.shym-story a.shym-story__card-in:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* a computer or a tablet: the part stays on screen while the cards on screen are dealt one after the other and the
   scroll slides the row until about 30% of the first card is off the screen, then the page moves on and the row drifts
   left by itself, round and round; it can be dragged (shym-story.js; Francis, 23 Oct 2026) */
@media (min-width:768px){
  .shym-story.is-js:not(.is-still) .shym-story__ritual .shym-story__stage{position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh;padding:0;overflow:hidden}
  .shym-story.is-js:not(.is-still) ol.shym-story__cards{align-items:flex-end;width:max-content;margin:0;padding:0;overflow:visible;scroll-snap-type:none;will-change:transform;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
  .shym-story.is-js:not(.is-still) ol.shym-story__cards.is-dragging{cursor:grabbing}
  .shym-story.is-js:not(.is-still) ol.shym-story__cards.is-dragging a{pointer-events:none}
  .shym-story.is-js:not(.is-still) li.shym-story__card{flex:0 0 min(21.5vw,340px,40vh);height:auto;aspect-ratio:2/3;transform:translate3d(0,calc((1 - var(--q,1)) * 82vh),0) rotate(calc((1 - var(--q,1)) * var(--r,6deg)))}
  .shym-story.is-js:not(.is-still) li.shym-story__card:nth-child(4n+1){--r:-7deg}
  .shym-story.is-js:not(.is-still) li.shym-story__card:nth-child(4n+2){--r:6deg}
  .shym-story.is-js:not(.is-still) li.shym-story__card:nth-child(4n+3){--r:-5deg}
  .shym-story.is-js:not(.is-still) li.shym-story__card:nth-child(4n){--r:8deg}
}
@media (min-width:768px) and (max-width:1024px){
  .shym-story.is-js:not(.is-still) li.shym-story__card{flex-basis:min(30vw,37vh)}
}

/* ---------- 4. the reel ---------- */
.shym-story .shym-story__reel{position:relative;background:var(--cream)}
.shym-story .shym-story__reel .shym-story__stage{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.shym-story.is-js:not(.is-still) .shym-story__reel{height:340vh}
.shym-story.is-js:not(.is-still) .shym-story__reel .shym-story__stage{position:sticky;top:0}
.shym-story .shym-story__marquee{position:absolute;left:0;top:50%;width:100%;transform:translateY(-54%);pointer-events:none}
.shym-story .shym-story__marquee-in{display:flex;align-items:center;gap:.28em;width:max-content;font:600 clamp(84px,15vw,260px)/1 var(--font);letter-spacing:-.05em;white-space:nowrap;color:var(--ink);will-change:transform}
.shym-story .shym-story__marquee-in .shym-story__dot{width:.12em;height:.12em}
/* the window: the film fills the stage, and a clip shows only the window's part of it (shym-story.js opens it) */
.shym-story .shym-story__window{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--ink)}
.shym-story.is-js:not(.is-still) .shym-story__window{clip-path:inset(30% 32% round 28px)}
.shym-story .shym-story__window img,.shym-story .shym-story__window video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.shym-story .shym-story__window video{opacity:0;transition:opacity .8s}
.shym-story .shym-story__window video.is-on{opacity:1}
.shym-story .shym-story__window-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,34,47,.78) 0%,rgba(38,34,47,.3) 36%,rgba(38,34,47,0) 62%);opacity:var(--w,1)}
.shym-story .shym-story__window-words{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(36px,8vh,80px);z-index:2;display:flex;flex-direction:column;align-items:flex-start;opacity:var(--w,1);transform:translate3d(0,calc((1 - var(--w,1)) * 40px),0)}
.shym-story .shym-story__window-words .shym-look-btn{margin-top:28px}
.shym-story p.shym-story__hint{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,56px);z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font:600 12.5px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:calc(1 - var(--g,1) * 3)}
.shym-story p.shym-story__hint .shym-story__dot{width:7px;height:7px}
.shym-story.is-still p.shym-story__hint,.shym-story:not(.is-js) p.shym-story__hint{display:none}
.shym-story .shym-story__reel .shym-story__stage:after{content:"";position:absolute;inset:0;z-index:3;background:var(--ink);opacity:calc(var(--cover,0) * .7);pointer-events:none}

/* ---------- 5. the showroom: the saunas come on stage one by one, in front of their names ---------- */
.shym-story .shym-story__show{position:relative;background:var(--cream)}
.shym-story .shym-story__show .shym-story__stage{padding:clamp(80px,9vw,128px) var(--gut)}
.shym-story .shym-story__show-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px 48px;margin:0 0 40px}
.shym-story .shym-story__show-head .shym-look-link{margin-top:16px}
.shym-story h2.shym-story__h2.is-mid{font-size:clamp(34px,3.4vw,52px);line-height:1}
.shym-story p.shym-story__count{margin:6px 0 0;font:600 15px/1 var(--font);letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.shym-story p.shym-story__count b{font-weight:600;color:var(--ink)}
.shym-story ol.shym-story__models{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;margin:0;padding:0;list-style:none}
.shym-story li.shym-story__model{position:relative;display:flex;flex-direction:column;gap:16px;margin:0}
.shym-story .shym-story__model-word{display:none}
.shym-story a.shym-story__model-pic{display:block;aspect-ratio:4/3;line-height:0;-webkit-user-drag:none}
.shym-story a.shym-story__model-pic img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:50% 100%}
.shym-story a.shym-story__model-pic.is-shot img{mix-blend-mode:multiply}
.shym-story h3.shym-story__model-name{margin:0;padding:0;font:600 clamp(24px,2vw,30px)/1.1 var(--font);letter-spacing:-.025em;text-transform:none;color:var(--ink)}
.shym-story p.shym-story__model-kind{margin:6px 0 0;font:400 15px/1.5 var(--font);color:var(--muted)}
.shym-story p.shym-story__model-price{margin:10px 0 18px;font:700 18px/1 var(--font);color:var(--ink)}
.shym-story p.shym-story__model-price small{font:400 13px/1 var(--font);color:var(--muted)}
.shym-story .shym-story__pills{display:none}
/* the names of the series along the bottom: chips (DESIGN.md), white on the cream, ink for the one on stage */
.shym-story .shym-story__pills button.shym-story__pill,.shym-story .shym-story__pills button.shym-story__pill:hover,.shym-story .shym-story__pills button.shym-story__pill:focus{display:inline-flex;align-items:center;height:32px;margin:0;padding:0 13px;border:0;border-radius:999px;background:var(--white);box-shadow:none;font:500 13px/1 var(--font);letter-spacing:normal;text-transform:none;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.shym-story .shym-story__pills button.shym-story__pill.is-on{background:var(--ink);color:var(--white)}
.shym-story .shym-story__pills button.shym-story__pill:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* the stage: the part stays on screen while the saunas come on one by one (shym-story.js); it also slides up over
   the end of the film like a sheet */
.shym-story.is-js:not(.is-still) .shym-story__show{z-index:2;box-sizing:border-box;height:calc((var(--n,6) - .4) * 62vh + 100vh + 28px);padding-bottom:28px;margin-top:-100vh;margin-top:-100svh;border-radius:28px 28px 0 0}
.shym-story.is-js:not(.is-still) .shym-story__show .shym-story__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;padding:0;overflow:hidden}
.shym-story.is-js:not(.is-still) .shym-story__show-head{position:absolute;left:var(--gut);right:var(--gut);top:clamp(32px,7vh,80px);z-index:4;margin:0}
.shym-story.is-js:not(.is-still) ol.shym-story__models{display:block;position:absolute;inset:0}
.shym-story.is-js:not(.is-still) li.shym-story__model{position:absolute;inset:0;display:block}
.shym-story.is-js:not(.is-still) li.shym-story__model.is-far{visibility:hidden}
.shym-story.is-js:not(.is-still) .shym-story__model-word{display:block;position:absolute;left:50%;top:47%;z-index:1;font:600 min(33vw,calc(172vw / var(--c,6)))/.8 var(--font);letter-spacing:-.05em;white-space:nowrap;color:var(--white);transform:translate3d(calc(-50% + var(--d,0) * 36vw),-50%,0);opacity:clamp(0,1 - var(--ad,0) * 2.2,1);pointer-events:none;user-select:none}
.shym-story.is-js:not(.is-still) a.shym-story__model-pic{position:absolute;left:50%;bottom:19vh;z-index:2;width:min(46vw,720px);height:min(54vh,580px);aspect-ratio:auto;transform:translate3d(calc(-50% + var(--d,0) * var(--slide,62vw)),0,0) scale(calc(1 - var(--ad,0) * .2));transform-origin:50% 100%;opacity:clamp(0,1 - (var(--ad,0) - .45) * 1.9,1);will-change:transform}
.shym-story.is-js:not(.is-still) .shym-story__model-info{position:absolute;left:var(--gut);bottom:clamp(28px,6vh,64px);z-index:3;max-width:340px;opacity:calc(1 - var(--ad,0) * 3.4);transform:translate3d(0,calc(var(--ad,0) * 28px),0)}
.shym-story.is-js:not(.is-still) li.shym-story__model:not(.is-on) .shym-story__model-info{visibility:hidden}
.shym-story.is-js:not(.is-still) .shym-story__pills{position:absolute;right:var(--gut);bottom:clamp(28px,6vh,64px);z-index:4;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:50vw}

/* ---------- 6. the best sellers (the first new page's part) ---------- */
.shym-story .shym-story__best .shym-home__sec{padding-top:clamp(24px,2.4vw,40px)}
.shym-story .shym-story__best{padding-bottom:clamp(64px,8vw,112px)}
/* the other categories, as chips (DESIGN.md: cream pill, ink words, 13 px, 32 px tall) */
.shym-story nav.shym-story__also{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;width:min(1365px,calc(100% - 48px));margin:44px auto 0;padding:28px 0 0;border-top:1px solid var(--line)}
.shym-story p.shym-story__also-h{margin:0 6px 0 0;font:500 14px/1 var(--font);color:var(--muted)}
.shym-story a.shym-story__chip,.shym-story a.shym-story__chip:visited{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--cream);font:500 13px/1 var(--font);color:var(--ink);text-decoration:none;transition:background .25s,color .25s}
.shym-story a.shym-story__chip:hover,.shym-story a.shym-story__chip:focus-visible{background:var(--ink);color:var(--white)}
.shym-story a.shym-story__chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.shym-story nav.shym-story__also .shym-look-link{margin-left:8px}
/* the shelf: 1600 px and wider takes the wide column and 5 cards a row (Francis, 19 Oct 2026, "A"); narrower keeps
   4 a row (2 on a tablet or a phone) and shows only full rows: 8 of a set of 10, 4 of a set of 5 */
@media (max-width:1599px){
  .shym-story .shym-story__set.is-ten .shym-cards>:nth-child(n+9),.shym-story .shym-story__set.is-five .shym-cards>:nth-child(n+5){display:none}
}
@media (min-width:1600px){
  .shym-story .shym-story__best .shym-home__best>.shym-home__wrap,.shym-story nav.shym-story__also{width:min(1800px,calc(100% - 48px))}
  .shym-story .shym-story__set .shym-cards.shym-cards--4{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ---------- 7. the shop: one big line for each category ---------- */
.shym-story .shym-story__shop{position:relative;padding:clamp(96px,10vw,150px) 0 clamp(80px,9vw,128px)}
.shym-story .shym-story__shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin:0 0 clamp(36px,5vw,64px)}
.shym-story .shym-story__shop-head h2.shym-story__h2{max-width:14ch}
.shym-story ul.shym-story__rows{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.shym-story ul.shym-story__rows li{margin:0}
.shym-story a.shym-story__row,.shym-story a.shym-story__row:visited{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;padding:clamp(16px,1.8vw,26px) 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.shym-story a.shym-story__row b{font:600 clamp(32px,4.6vw,72px)/1 var(--font);letter-spacing:-.04em;color:var(--ink);transition:transform .7s var(--slow)}
.shym-story a.shym-story__row i{font:500 14px/1 var(--font);color:var(--muted);white-space:nowrap}
.shym-story a.shym-story__row .shym-story__go{color:var(--ink)}
.shym-story .shym-story__row-pic{display:none;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--cream)}
.shym-story .shym-story__row-pic img{width:100%;height:100%;object-fit:cover}
.shym-story a.shym-story__row:hover b,.shym-story a.shym-story__row:focus-visible b{transform:translateX(20px)}
.shym-story a.shym-story__row:hover .shym-story__go,.shym-story a.shym-story__row:focus-visible .shym-story__go{background:var(--orange);box-shadow:none;color:var(--white);transform:translateX(3px)}
.shym-story a.shym-story__row:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* the floating photo (a computer with a mouse): it follows the pointer over the list */
.shym-story .shym-story__float{position:fixed;left:0;top:0;z-index:5;width:clamp(240px,22vw,340px);aspect-ratio:4/3;border-radius:18px;overflow:hidden;pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(-50%,-50%,0);scale:.8;transition:opacity .35s,visibility .35s,scale .5s var(--slow)}
.shym-story .shym-story__float.is-on{opacity:1;visibility:visible;scale:1}
.shym-story .shym-story__float img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .35s}
.shym-story .shym-story__float img.is-on{opacity:1}

/* ---------- 8. what our customers say: the customer video and the 3 reviews in one wide row ---------- */
/* Francis, 19 Oct 2026: "it doesnt have to be scroll controlled like the others, just something wide like the others".
   Nothing here moves with the scroll. 1600 px and wider the part takes the best sellers' wide column; 1024 px and
   narrower the row is swiped, out to the screen's edge, as Sauna life on a phone. The bottom padding leaves room for
   the evening's sheet, which rises 28 px over it. */
/* a white sheet with round top corners that slides over the range (Francis, 19 Oct 2026: the best sellers moved up, and
   the range and the reviews, both cream, ran together); on white the cards and the Google badge are cream. The range
   is 28 px longer for it, so the sheet only ever covers empty cream */
.shym-story .shym-story__voices{position:relative;z-index:2;margin-top:-28px;padding:clamp(80px,9vw,128px) 0 clamp(108px,10vw,156px);border-radius:28px 28px 0 0;background:var(--white)}
.shym-story .shym-story__voices a.shym-home__gbadge{background:var(--cream)}
.shym-story .shym-story__voices .shym-home__gbadge-go{background:var(--white)}
.shym-story .shym-story__voices-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 clamp(32px,4vw,56px)}
.shym-story .shym-story__voices-head a.shym-home__gbadge{margin:0}
.shym-story .shym-story__voices-row{display:grid;grid-template-columns:var(--cols,repeat(3,minmax(0,1fr)));gap:16px}
.shym-story .shym-story__voices-row.has-film{grid-template-columns:minmax(0,1.1fr) var(--cols,repeat(3,minmax(0,1fr)))}
/* the video: no white frame, the corners of the cards */
.shym-story figure.shym-story__voices-film{display:flex;flex-direction:column;margin:0;padding:0;border-radius:0;background:none}
.shym-story figure.shym-story__voices-film .shym-home__vreview-media{border-radius:18px}
.shym-story figure.shym-story__voices-film figcaption{padding:14px 2px 0}
.shym-story figure.shym-story__quote{display:flex;flex-direction:column;margin:0;padding:clamp(24px,2vw,32px);border-radius:18px;background:var(--cream)}
.shym-story figure.shym-story__quote .shym-look-stars svg{width:18px;height:18px}
.shym-story blockquote.shym-story__quote-words{margin:16px 0 0;padding:0;border:0;font:500 var(--fs,clamp(17px,1.1vw,21px))/1.55 var(--font);font-style:normal;letter-spacing:-.005em;color:var(--ink);quotes:none}
/* the script sizes each review's words to fill its card (no empty white foot, Francis 19 Oct 2026); the card keeps the
   row's height and the words take the room between the stars and the name */
.shym-story figure.shym-story__quote.is-fit blockquote.shym-story__quote-words{flex:1 1 auto;min-height:0;overflow:hidden}
.shym-story blockquote.shym-story__quote-words:before,.shym-story blockquote.shym-story__quote-words:after{content:none}
.shym-story figcaption.shym-story__quote-who{margin-top:auto;padding-top:20px;font:600 15px/1.4 var(--font);color:var(--ink)}
@media (min-width:1600px){
  .shym-story .shym-story__voices>.shym-story__wrap{width:min(1800px,calc(100% - 48px))}
}
@media (max-width:1024px){
  .shym-story .shym-story__voices-head{flex-direction:column;align-items:flex-start}
  .shym-story .shym-story__voices-row,.shym-story .shym-story__voices-row.has-film{display:flex;gap:12px;margin-right:calc(50% - 50vw);padding-right:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-story .shym-story__voices-row::-webkit-scrollbar{display:none}
  .shym-story .shym-story__voices-row>figure{flex:0 0 min(340px,44vw);scroll-snap-align:start}
}

/* ---------- 9. recent projects: a dark sheet, one wide band of photos; the one pointed at opens wide ---------- */
/* Francis, 19 Oct 2026: the floating photos were "still not there". Nothing here moves with the scroll. Every photo
   is a narrow slice of the band, and the open one takes the rest of the width. The photo inside a slice is always as
   wide as an open one (container units), so a photo never changes size while the band moves: the slice only shows
   more or less of it. */
.shym-story .shym-story__evening{position:relative;z-index:2;margin-top:-28px;padding:clamp(96px,10vw,150px) 0 clamp(80px,9vw,128px);border-radius:28px 28px 0 0;background:var(--ink);color:var(--white)}
.shym-story .shym-story__eve-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 clamp(32px,4vw,56px)}
/* two lines, so the photos come up close under it */
.shym-story .shym-story__eve-head h2.shym-story__h2{max-width:11em;font-size:clamp(40px,5.2vw,88px)}
.shym-story .shym-story__eve-head p.shym-story__eyebrow{color:rgba(255,255,255,.72)}
.shym-story .shym-story__eve-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px;flex:none;max-width:360px}
.shym-story .shym-story__eve-side p.shym-story__side{color:rgba(255,255,255,.78)}
.shym-story .shym-story__projs{--n:var(--count,7);--closed:clamp(64px,6vw,116px);--gap:12px;--open-w:calc(100cqw - var(--n) * (var(--closed) + var(--gap)));display:flex;gap:var(--gap);height:clamp(420px,66vh,660px);container-type:inline-size}
.shym-story a.shym-story__proj,.shym-story a.shym-story__proj:visited{position:relative;display:block;flex:0 0 var(--closed);min-width:0;overflow:hidden;isolation:isolate;border-radius:18px;background:rgba(255,255,255,.06);color:var(--white);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:flex-grow .9s var(--slow),flex-basis .9s var(--slow)}
.shym-story a.shym-story__proj.is-on{flex:1 1 0}
.shym-story a.shym-story__proj:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.shym-story .shym-story__proj-pic{position:absolute;inset:0;display:block;opacity:.62;transition:opacity .7s var(--soft)}
.shym-story a.shym-story__proj.is-on .shym-story__proj-pic,.shym-story a.shym-story__proj:hover .shym-story__proj-pic{opacity:1}
.shym-story .shym-story__proj-pic img{position:absolute;top:0;left:50%;width:var(--open-w);max-width:none;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform:translateX(-50%);transition:transform 1.4s var(--slow)}
/* the shade under the words: along the foot only */
.shym-story a.shym-story__proj:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(38,34,47,.78) 0%,rgba(38,34,47,.3) 30%,rgba(38,34,47,0) 55%);pointer-events:none}
/* a slice: its place up the side, reading upwards */
.shym-story .shym-story__proj-side{position:absolute;left:50%;bottom:24px;z-index:2;font:600 15px/1 var(--font);letter-spacing:.01em;white-space:nowrap;color:var(--white);writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);transition:opacity .5s .25s}
.shym-story a.shym-story__proj.is-on .shym-story__proj-side{opacity:0;transition:opacity .2s}
/* the open one: the place in big words, what was put in, and the round arrow */
.shym-story .shym-story__proj-words{position:absolute;left:clamp(22px,2.4vw,36px);right:104px;bottom:clamp(22px,2.4vw,34px);z-index:2;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translate3d(0,18px,0);transition:opacity .25s,transform .4s var(--slow)}
.shym-story a.shym-story__proj.is-on .shym-story__proj-words{opacity:1;transform:none;transition:opacity .7s var(--soft) .35s,transform 1s var(--slow) .35s}
.shym-story .shym-story__proj-words b{font:600 clamp(28px,2.8vw,48px)/1.02 var(--font);letter-spacing:-.035em;white-space:nowrap;color:var(--white)}
.shym-story .shym-story__proj-words i{font:500 16px/1.4 var(--font);white-space:nowrap;color:rgba(255,255,255,.88)}
.shym-story .shym-story__proj-go{position:absolute;right:clamp(22px,2.4vw,32px);bottom:clamp(22px,2.4vw,32px);z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--ink);opacity:0;transform:scale(.6);transition:opacity .25s,transform .4s var(--slow),background .3s,color .3s}
.shym-story .shym-story__proj-go svg{width:18px;height:18px}
.shym-story a.shym-story__proj.is-on .shym-story__proj-go{opacity:1;transform:none;transition:opacity .6s .45s,transform .8s var(--slow) .45s,background .3s,color .3s}
.shym-story a.shym-story__proj.is-on:hover .shym-story__proj-go,.shym-story a.shym-story__proj.is-on:focus-visible .shym-story__proj-go{background:var(--orange);color:var(--white)}
@media (hover:hover) and (min-width:768px){
  .shym-story a.shym-story__proj.is-on:hover .shym-story__proj-pic img{transform:translateX(-50%) scale(1.035)}
}
/* the last tile: not a photo, it never opens; it goes to every project (Francis, 19 Oct 2026). As narrow as a closed
   photo, its words up the side like theirs, the round arrow at its top; orange when pointed at (DESIGN.md: orange =
   action). The open photo's width leaves room for it (--open-w counts it). */
.shym-story a.shym-story__proj-all,.shym-story a.shym-story__proj-all:visited{position:relative;display:flex;flex:0 0 var(--closed);flex-direction:column;align-items:center;justify-content:space-between;min-width:0;padding:22px 0 24px;border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16);color:var(--white);text-decoration:none;transition:background .35s,box-shadow .35s}
.shym-story a.shym-story__proj-all:hover,.shym-story a.shym-story__proj-all:focus-visible{background:var(--orange);box-shadow:none}
.shym-story a.shym-story__proj-all:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.shym-story .shym-story__proj-all-go{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);transition:transform .4s var(--slow)}
.shym-story .shym-story__proj-all-go svg{width:18px;height:18px}
.shym-story a.shym-story__proj-all:hover .shym-story__proj-all-go{transform:translateX(3px)}
.shym-story .shym-story__proj-all-words{font:600 16px/1 var(--font);letter-spacing:.01em;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg)}
/* 1600 px and wider: the best sellers' wide column */
@media (min-width:1600px){
  .shym-story .shym-story__evening>.shym-story__wrap{width:min(1800px,calc(100% - 48px))}
}

/* ---------- the header steps away while a computer reads down, and comes back on the way up ---------- */
@media (min-width:1025px){
  body.shym-look.shym-story-page.shym-story-away .elementor-location-header{transform:translateY(-100%)}
}

/* ---------- 10. guides: a white sheet over the dark projects; three tall photo cards, the newest one wider ---------- */
/* Francis, 20 Oct 2026: "Guides. Yes absolutely", then "we could do better, something that looks more the part of the
   whole homepage": the cards of the project strips and Sauna life (18px corners, the photo filling the card, a Plum ink
   shade at the foot under white words, the white round arrow that turns orange). Title size for every title, the wide
   card's too (Francis, 20 Oct 2026: "consistent just like the others, not bigger"). */
.shym-story .shym-story__guides{position:relative;z-index:3;margin-top:-28px;padding:clamp(80px,9vw,128px) 0 clamp(108px,10vw,156px);border-radius:28px 28px 0 0;background:var(--white)}
.shym-story .shym-story__guides-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin:0 0 clamp(32px,4vw,56px)}
.shym-story .shym-story__guides-head h2.shym-story__h2{max-width:11em;font-size:clamp(40px,5.2vw,88px)}
.shym-story .shym-story__guides-side{display:flex;flex-direction:column;align-items:flex-start;gap:18px;flex:none;max-width:360px}
.shym-story ul.shym-story__guide-list{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:14px;height:clamp(440px,40vw,600px);margin:0;padding:0;list-style:none}
.shym-story ul.shym-story__guide-list>li{display:flex;min-width:0;margin:0;padding:0}
.shym-story a.shym-story__guide,.shym-story a.shym-story__guide:visited{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;overflow:hidden;isolation:isolate;border-radius:18px;background:var(--ink);color:var(--white);text-decoration:none}
.shym-story a.shym-story__guide:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.shym-story .shym-story__guide-pic{position:absolute;inset:0;z-index:-1;display:block}
.shym-story .shym-story__guide-pic img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;transition:transform 1.4s var(--slow)}
.shym-story .shym-story__guide-pic:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(38,34,47,.9) 0%,rgba(38,34,47,.62) 34%,rgba(38,34,47,0) 66%)}
.shym-story a.shym-story__guide:hover .shym-story__guide-pic img{transform:scale(1.05)}
.shym-story .shym-story__guide-words{display:flex;flex-direction:column;gap:10px;padding:0 clamp(22px,2.2vw,32px) clamp(24px,2.4vw,34px)}
.shym-story .shym-story__guide-words i{font:normal 500 14px/1.5 var(--font);color:rgba(255,255,255,.88)}
.shym-story .shym-story__guide-words i span{white-space:nowrap}
.shym-story .shym-story__guide-words b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font:700 26px/1.12 var(--font);letter-spacing:-.02em;color:var(--white)}
.shym-story .shym-story__guide-go{position:absolute;top:clamp(18px,1.8vw,24px);right:clamp(18px,1.8vw,24px);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--white);color:var(--ink);transition:background .3s,color .3s}
.shym-story .shym-story__guide-go svg{width:18px;height:18px;transition:transform .3s}
.shym-story a.shym-story__guide:hover .shym-story__guide-go,.shym-story a.shym-story__guide:focus-visible .shym-story__guide-go{background:var(--orange);color:var(--white)}
.shym-story a.shym-story__guide:hover .shym-story__guide-go svg{transform:translateX(2px)}

/* ---------- a tablet ---------- */
@media (max-width:1024px){
  /* the guides: a swipe row of three tall cards */
  .shym-story ul.shym-story__guide-list{display:flex;gap:12px;height:auto;margin-right:calc(50% - 50vw);padding-right:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-story ul.shym-story__guide-list::-webkit-scrollbar{display:none}
  .shym-story ul.shym-story__guide-list>li{flex:0 0 320px;scroll-snap-align:start}
  .shym-story.is-js:not(.is-still) ul.shym-story__guide-list>li[data-rise]{opacity:1;transform:none}
  .shym-story a.shym-story__guide,.shym-story a.shym-story__guide:visited{aspect-ratio:4/5}
  /* the words take more of a narrow card, so the shade reaches higher (4.5 to 1 or more, _guides_contrast.py) */
  .shym-story .shym-story__guide-pic:after{background:linear-gradient(0deg,rgba(38,34,47,.92) 0%,rgba(38,34,47,.82) 48%,rgba(38,34,47,0) 80%)}
  .shym-story ul.shym-story__cat-cards{display:flex;gap:12px;margin-right:calc(50% - 50vw);padding-right:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .shym-story ul.shym-story__cat-cards::-webkit-scrollbar{display:none}
  .shym-story ul.shym-story__cat-cards>li{flex:0 0 220px;scroll-snap-align:start}
  .shym-story ul.shym-story__cat-cards>li.is-wide{flex-basis:340px}
  /* a swiped row: every card is on show at once, not rising in one by one off screen */
  .shym-story.is-js:not(.is-still) ul.shym-story__cat-cards>li[data-rise]{opacity:1;transform:none}
  .shym-story ol.shym-story__models{grid-template-columns:1fr 1fr}
  .shym-story .shym-story__projs{--n:min(var(--count,7),5);--closed:60px;height:460px}
  .shym-story a.shym-story__proj:nth-child(n+6){display:none}
  .shym-story .shym-story__float{display:none}
}

/* ---------- a phone ---------- */
@media (max-width:767px){
  .shym-story .shym-story__wrap{width:calc(100% - 32px)}
  .shym-story .shym-story__guides{padding:64px 0 92px}
  .shym-story .shym-story__guides-head{flex-direction:column;align-items:flex-start}
  .shym-story ul.shym-story__guide-list{margin-right:-16px;padding-right:16px}
  .shym-story ul.shym-story__guide-list>li{flex-basis:80vw}
  .shym-story ol.shym-story__cards{gap:12px;margin-right:-16px;padding-right:16px}
  .shym-story li.shym-story__card{flex-basis:66vw}
  .shym-story{--gut:16px}
  .shym-story h1.shym-story__h1{font-size:clamp(42px,12.4vw,64px);max-width:none}
  .shym-story h2.shym-story__h2{font-size:clamp(38px,10.6vw,56px)}
  .shym-story .shym-story__hero-media img,.shym-story .shym-story__hero-media video{object-position:50% 50%}
  .shym-story .shym-story__hero-shade{background:linear-gradient(0deg,rgba(38,34,47,.88) 0%,rgba(38,34,47,.6) 46%,rgba(38,34,47,.12) 74%,rgba(38,34,47,.4) 100%)}
  .shym-story .shym-story__hero-foot{flex-direction:column;align-items:stretch}
  .shym-story .shym-story__btns{flex-direction:column}
  .shym-story .shym-story__btns .shym-look-btn{width:100%}
  .shym-story .shym-story__cue{display:none}
  .shym-story p.shym-story__statement{font-size:clamp(27px,7.6vw,36px);line-height:1.16}
  /* the purpose part on a phone, shorter (Francis, 19 Oct 2026: "only on phone ... the section is a bit too long"):
     each number sits beside its words as one row, and the gaps are tighter. A computer keeps its layout. */
  .shym-story .shym-story__sheet{padding:0 0 32px}
  .shym-story .shym-story__sheet>.shym-story__sheet-in{padding-top:52px}
  .shym-story ul.shym-story__cat-cards{margin-right:-16px;padding-right:16px}
  .shym-story ul.shym-story__cat-cards>li{flex-basis:46vw}
  .shym-story ul.shym-story__cat-cards>li.is-wide{flex-basis:72vw}
  .shym-story a.shym-story__cat,.shym-story a.shym-story__cat:visited{height:250px;padding:14px 14px 16px}
  .shym-story .shym-story__cat-pic{left:12px;right:12px;top:14px;bottom:98px}
  .shym-story .shym-story__cat-words b{font-size:20px}
  .shym-story .shym-story__cat-from{font-size:13px}
  /* a phone has no pointer: the orange count is the cue, so the hover circle never shows (20 Oct 2026) */
  .shym-story .shym-story__cat-go{display:none}
  .shym-story nav.shym-story__cats>.shym-story__wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"eye" "cards" "more";gap:14px}
  .shym-story .shym-story__cats-more .shym-look-link{margin-left:4px}
  .shym-story ul.shym-story__stats{grid-template-columns:1fr;gap:0;margin-top:36px;padding-top:0}
  .shym-story ul.shym-story__stats li{flex-direction:row;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
  .shym-story ul.shym-story__stats b{flex:0 0 104px;font-size:44px}
  .shym-story ul.shym-story__stats span{font-size:14px;line-height:1.45}
  .shym-story .shym-story__purpose-head{flex-direction:column;align-items:flex-start;gap:24px}
  .shym-story .shym-story__purpose-head .shym-look-btn{margin-bottom:0}
  /* the numbers' last row already ends with a line, so the band needs none of its own */
  .shym-story .shym-story__brands{margin-top:0;padding:20px 0 16px}
  .shym-story .shym-story__brands-run{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
  .shym-story ul.shym-story__brands-track>li{height:64px;padding:0 22px}
  .shym-story ul.shym-story__brands-track img{height:calc(var(--h,40px) * .62)}
  .shym-story .shym-story__ritual-head,.shym-story .shym-story__shop-head,.shym-story .shym-story__voices-head{flex-direction:column;align-items:flex-start}
  .shym-story .shym-story__voices-row,.shym-story .shym-story__voices-row.has-film{padding-right:16px}
  .shym-story .shym-story__voices-row>figure{flex-basis:78vw}
  /* the plain reading size on a phone; the words do not grow to fill the card there (shym-story.js) */
  .shym-story blockquote.shym-story__quote-words{font-size:16px;line-height:1.55}
  /* and each card ends right under its words, so a short review leaves no empty white foot (a row to swipe shows one card at a time) */
  .shym-story .shym-story__voices-row,.shym-story .shym-story__voices-row.has-film{align-items:flex-start}
  .shym-story .shym-story__marquee-in{font-size:clamp(72px,24vw,120px)}
  .shym-story.is-js:not(.is-still) .shym-story__window{clip-path:inset(28% 16% round 28px)}
  .shym-story.is-js:not(.is-still) .shym-story__reel{height:310vh}
  .shym-story ol.shym-story__models{grid-template-columns:1fr}
  .shym-story.is-js:not(.is-still) .shym-story__show{height:calc((var(--n,6) - .4) * 54vh + 100vh + 28px)}
  .shym-story.is-js:not(.is-still) .shym-story__show-head .shym-look-link{display:none}
  .shym-story.is-js:not(.is-still) .shym-story__model-word{top:40%;font-size:min(30vw,calc(150vw / var(--c,6)))}
  .shym-story.is-js:not(.is-still) a.shym-story__model-pic{width:92vw;height:38vh;bottom:29vh;--slide:108vw}
  .shym-story.is-js:not(.is-still) .shym-story__model-info{right:var(--gut);max-width:none;bottom:clamp(20px,4vh,40px)}
  .shym-story.is-js:not(.is-still) .shym-story__model-info .shym-look-btn{position:absolute;right:0;bottom:0}
  .shym-story.is-js:not(.is-still) p.shym-story__model-price{margin-bottom:0}
  .shym-story.is-js:not(.is-still) .shym-story__pills{display:none}
  /* a phone: strips one under the other, a tap opens one */
  .shym-story .shym-story__eve-head{flex-direction:column;align-items:flex-start}
  .shym-story .shym-story__projs{--gap:8px;--open-h:min(104vw,460px);flex-direction:column;height:auto}
  .shym-story a.shym-story__proj:nth-child(n+6){display:block}
  .shym-story a.shym-story__proj,.shym-story a.shym-story__proj:visited{flex:0 0 auto;height:64px;transition:height .8s var(--slow)}
  .shym-story a.shym-story__proj.is-on{flex:0 0 auto;height:var(--open-h)}
  .shym-story .shym-story__proj-pic img{top:50%;left:0;width:100%;height:var(--open-h);transform:translateY(-50%)}
  .shym-story .shym-story__proj-side{left:18px;bottom:auto;top:50%;writing-mode:horizontal-tb;transform:translateY(-50%)}
  .shym-story .shym-story__proj-words{right:76px}
  .shym-story .shym-story__proj-words b{font-size:clamp(26px,7.6vw,34px)}
  .shym-story .shym-story__proj-words i{font-size:15px}
  .shym-story .shym-story__proj-go{width:44px;height:44px}
  .shym-story a.shym-story__proj-all,.shym-story a.shym-story__proj-all:visited{flex:0 0 auto;flex-direction:row-reverse;height:64px;padding:0 10px 0 18px}
  .shym-story .shym-story__proj-all-words{writing-mode:horizontal-tb;transform:none}
  .shym-story a.shym-story__row{grid-template-columns:auto 1fr auto;gap:14px}
  .shym-story a.shym-story__row i{display:none}
  .shym-story a.shym-story__row .shym-story__go{width:40px;height:40px}
  .shym-story .shym-story__row-pic{display:block;width:56px;height:56px}
  .shym-story a.shym-story__row b{font-size:clamp(26px,7.4vw,34px)}
}

/* ---------- less motion: everything still, nothing pinned ---------- */
@media (prefers-reduced-motion:reduce){
  .shym-story .shym-story__h1 .shym-story__m>span,.shym-story .shym-story__hero-in>p.shym-story__kicker,.shym-story .shym-story__hero-foot,.shym-story .shym-story__hero-media img,.shym-story .shym-story__cue i:after{animation:none}
  .shym-story .shym-story__hero{position:relative}
  .shym-story a.shym-story__proj,.shym-story a.shym-story__proj *{transition:none !important}
}