/* Toto+Meme copy: the layout rules Showit's script used to apply at run time, as plain CSS.
   --z  how much the canvas is scaled (phone: screen/320; computer under 1200 wide: screen/1200; else 1)
   --cw canvas width (320 phone, 1200 computer)   --e empty space each side of the canvas on wide screens
   All four are set by tm.js. Section heights (--h) come from each page's own CSS. */
.sb { height: calc(var(--h) * var(--z)); }
.sc { width: var(--cw) !important; margin: 0 0 0 var(--e); transform: scale(var(--z)); transform-origin: 0 0; height: calc(100% / var(--z)); }
.sb[style*="fixed"], .sb { min-width: 0; }
.tm-sp { display: none; }
.m .tm-sp, .d .tm-sp { display: block; height: 0; }
.ss.sactive { animation: tm-fade .5s; }
@keyframes tm-fade { from { opacity: 0; } to { opacity: 1; } }
.se-img[data-img] { position: absolute; top: 0; left: 0; }
[data-pc], [data-state] { cursor: pointer; }

/* text that comes from the blog sets its own height (tm.js then stretches the section to fit) */
[data-grow]:not(.tm-fixed) > .se-wpt { position: relative; height: auto; }

/* slideshows */
.sg-s { position: relative; overflow: hidden; }
.tm-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.tm-slide.on { opacity: 1; }

/* photo grids: columns are filled by tm.js, shortest column first, as live does */
.sg-t { display: flex; align-items: flex-start; }
.sg-t .tm-col { flex: 1 1 0; min-width: 0; }
.sg-t img { display: block; width: 100%; height: auto; }

/* photo strips you swipe sideways */
.sg-sl { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sg-sl::-webkit-scrollbar { display: none; }
.sg-sl img { height: 100%; width: auto; flex: none; scroll-snap-align: center; }
.sg-sl::before, .sg-sl::after { content: ""; flex: none; width: 50%; } /* room for the first and last photo to sit in the middle, as on live */

/* from the blog theme's one-rule stylesheet */
.se-wpt ol, .se-wpt ul { margin-left: 20px; margin-bottom: 20px; }