/* SLOFF festival widgets: shared base (logo lockup, brand shapes, focus). Tokens only: see tokens.css. */
:where(:root){--sloff-gutter:clamp(16px, 12.2vw - 86px, 90px);--sloff-edge:max(var(--sloff-gutter), calc((100% - var(--sloff-content-max, 1260px)) / 2))}
/* Phones: the smallest label size (deadline names, award names, showtimes, badges) is 12 px, not 11 (Ryan, 2026-10-28). */
@media (max-width:767px){:where(:root){--sloff-fs-11:var(--sloff-fs-12)}}
.sloff-header,.sloff-footer,.sloff-hero{box-sizing:border-box;font-family:var(--sloff-font);color:var(--sloff-text)}
:is(.sloff-header,.sloff-footer,.sloff-hero,.sloff-menu) *,:is(.sloff-header,.sloff-footer,.sloff-hero,.sloff-menu) *::before,:is(.sloff-header,.sloff-footer,.sloff-hero,.sloff-menu) *::after{box-sizing:inherit}
:is(.sloff-header,.sloff-footer,.sloff-hero,.sloff-menu) a{text-decoration:none}
:is(.sloff-header,.sloff-footer,.sloff-hero,.sloff-menu) :is(a,button):focus-visible{outline:var(--sloff-focus-w) solid var(--sloff-focus);outline-offset:var(--sloff-focus-offset)}
/* Theme and Elementor kit link colors must not repaint the shared buttons inside our widgets. */
:is(.sloff-header,.sloff-hero) .btn-primary,:is(.sloff-header,.sloff-hero) .btn-primary:hover{color:var(--sloff-fest-accent-ink)}
:is(.sloff-header,.sloff-hero) .btn-secondary{color:var(--sloff-text)}
:is(.sloff-header,.sloff-hero) .btn-secondary:hover{color:var(--sloff-fest-accent)}

/* Logo lockup: the T10 SVGs at their mockup sizes (stacked 70.1×34.2, wide 87.6×44.5). */
.sloff-logo{display:inline-flex;color:var(--sloff-fest-cream);font-weight:var(--sloff-fw-black);white-space:nowrap}
.sloff-logo .sloff-logo__svg{display:block;width:auto;height:34.2px}
.sloff-logo .sloff-logo__svg--wide{display:none;height:44.5px}
.sloff-logo__img{display:block;width:auto;height:44px}

/* Brand shapes. The O is clipped to the ellipse from the key art. */
.sloff-sun{display:block;clip-path:none}
.sloff-sun__bg{fill:var(--sloff-bg)}
.sloff-sun__rays{fill:var(--sloff-fest-cream)}
.sloff-star{display:block;fill:var(--sloff-fest-olive)}
.sloff-icon{display:block;flex:none}

/* Social icon rows (footer, phone menu, Follow line, film share). 44 px targets; outlined by default, pink tiles with --tiles (mockups 077, 084). */
.sloff-social{display:flex;flex-wrap:wrap;gap:var(--sloff-space-2);margin:0;padding:0;list-style:none}
.sloff-social[hidden]{display:none}
.sloff-social li{margin:0;padding:0}
.sloff-social li[hidden]{display:none}
.sloff-social .sloff-social__link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--sloff-tap-min);height:var(--sloff-tap-min);margin:0;padding:0;border:1px solid var(--sloff-line-strong);border-radius:var(--sloff-radius-pill);background:transparent;color:var(--sloff-text);font:inherit;text-decoration:none;cursor:pointer}
.sloff-social .sloff-social__link:hover{border-color:var(--sloff-fest-accent);background:transparent;color:var(--sloff-fest-accent)}
.sloff-social .sloff-social__link:focus-visible{outline:var(--sloff-focus-w) solid var(--sloff-focus);outline-offset:var(--sloff-focus-offset)}
.sloff-social .sloff-social__icon{display:block;flex:none;width:20px;height:20px}
.sloff-social--tiles .sloff-social__link{border:0;border-radius:var(--sloff-radius-control);background:var(--sloff-fest-highlight);color:var(--sloff-fest-highlight-ink)}
.sloff-social--tiles .sloff-social__link:hover{background:var(--sloff-fest-cream);color:var(--sloff-fest-highlight-ink)}

/* Follow line (Home "Be first to know" card). */
.sloff-follow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sloff-space-2) var(--sloff-space-3);font-family:var(--sloff-font)}
.sloff-follow .sloff-follow__text{margin:0;color:var(--sloff-text);font-size:var(--sloff-fs-14);font-weight:var(--sloff-fw-bold)}
.sloff-follow .sloff-follow__text a{color:inherit;text-decoration:underline}

/* Final raster marks keep their source proportions. body outranks the page builder's generic img{height:auto}, which can load later. */
body :is(.sloff-logo__svg,.sloff-sun,.sloff-star) img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
.sloff-brand-art{display:block;width:100%;height:auto}
.sloff-brand-art img{display:block;width:100%;height:auto;object-fit:contain}
/* <main id="content"> takes focus from "Skip to content" (tabindex -1); no ring on the whole page. */
.sloff-main:focus{outline:none}