/* Stingray site grid — one content edge and one chrome gutter on every page.
   Content edge: 4.2vw (60px at 1440), never under 20px; up to 96px on very wide screens; the content box stops growing at 2000px.
   Chrome gutter (fixed buttons, page index): 28px; 20px on phones. */
:root{--edge:max(clamp(20px,4.2vw,96px),calc((100vw - 2000px) / 2));--chrome:28px}
@media(max-width:640px){:root{--edge:20px;--chrome:20px}}

/* every page container, header and footer sit on --edge */
html body .wrap,html body .nav-in{max-width:none;padding-left:var(--edge);padding-right:var(--edge)}
html body .home .top .wrap,html body .cover .top .wrap{padding-left:var(--edge);padding-right:var(--edge)}

/* ORIGAMI and conversion pages: sections padded around a body */
html body section.sec:has(>.body),html body section.cover:has(>.body){padding-left:var(--edge);padding-right:var(--edge)}
html body section.sec>.body,html body section.cover>.body{max-width:none}

/* display type: no hyphenation, no breaks inside words — long words are fitted by ux.js instead */
h1,h2,h3,.cw,.num,.ct,.jt{-webkit-hyphens:manual!important;hyphens:manual!important;word-break:normal!important;overflow-wrap:break-word!important}

/* fixed controls sit in the chrome gutter */
html body #sy-c.sy-fixed{right:var(--chrome);bottom:var(--chrome)}
html[dir=rtl] body #sy-c.sy-fixed{right:auto;left:var(--chrome)}
@media(max-width:1100px){html body #sy-c{right:var(--chrome);bottom:var(--chrome)}html[dir=rtl] body #sy-c{right:auto;left:var(--chrome)}}
html body #sy-top{left:var(--chrome);bottom:var(--chrome)}
html[dir=rtl] body #sy-top{left:auto;right:var(--chrome)}

/* the last footer on a page clears the fixed controls, so nothing in it sits under Ask Marina or ↑ */
html body footer:last-of-type,html body .foot{padding-bottom:calc(var(--chrome) + 64px)}
html body .foot .wrap{flex-wrap:wrap;row-gap:14px}