/* WordPress templates and native content; the prototype stylesheet stays intact. */
.menu{display:flex;gap:33px;list-style:none;margin:0;padding:0}
.project-card{position:relative}
.project-title a::after{content:"";position:absolute;inset:0}
.project-title a:focus-visible::after{outline:2px solid var(--accent);outline-offset:6px}
.section-description p{line-height:1.6}
.project-detail{padding-block:64px 72px;display:flow-root}
.detail-heading{max-width:850px;margin-bottom:32px}
.detail-heading h1{font-size:clamp(36px,5vw,64px);margin-top:20px;overflow-wrap:anywhere}
.detail-heading .project-meta{font-size:14px;margin-top:20px}
.detail-artwork{width:200px;max-width:100%;margin-bottom:28px}
.detail-artwork img{width:100%;height:auto}
.detail-links{margin-block:0 32px;gap:0 24px}
.entry-content{max-width:800px;overflow-wrap:anywhere;font-size:17px;line-height:1.75}
.entry-content>*+*{margin-top:24px}
.entry-content h2{font-size:36px;margin-top:40px}
.entry-content h3{font-size:24px;margin-top:32px}
.entry-content a,.comments a{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.entry-content img{height:auto}
.entry-content iframe,.entry-content video{max-width:100%}
.entry-content figure{max-width:100%;margin-inline:0}
.entry-content .alignwide{max-width:var(--width)}
.entry-content .alignfull{max-width:100%}
.entry-content .wp-block-image.alignright,.entry-content .wp-block-image.alignleft{max-width:100%;float:none;margin-inline:0}
.entry-content table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto}
.entry-content th,.entry-content td{padding:12px;border:1px solid var(--line)}
.entry-content blockquote{border-left:2px solid var(--accent);padding-left:24px;margin-left:0;color:var(--muted)}
.entry-content pre{overflow-x:auto;padding:20px;background:#0a111a}
.post-navigation{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--accent)}
.navigation.pagination{margin-top:40px}
.page-numbers{display:inline-block;padding:10px}
.comments{padding-bottom:56px}
input,textarea,select,button{font:inherit;max-width:100%}
input,textarea{background:#0a111a;color:var(--ink);border:1px solid #526170;padding:10px;border-radius:2px}
button,input[type=submit]{cursor:pointer;background:var(--accent);color:var(--paper);padding:10px 18px;border:0}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.search-form{margin-top:24px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.comment-form label{display:block;margin-bottom:8px}
.comment-form textarea{width:100%}
.comment-form p{margin-top:18px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto!important;clip-path:none;height:auto;width:auto;top:5px;left:5px;padding:15px;z-index:100000;background:var(--paper)}
.mobile-nav .menu{flex-direction:column;gap:0}
@media(max-width:800px){.menu{gap:23px}.project-detail{padding-block:48px}}
@media(max-width:600px){.detail-artwork{width:140px}.detail-heading h1{font-size:36px}.entry-content{font-size:16px}.entry-content h2{font-size:30px}.footer-top nav .menu{gap:0 17px;flex-wrap:wrap;justify-content:end}.footer-top nav{max-width:210px}}

/* Fixed navigation and the homepage hero logo transition. */
:root{--smallhall-header-height:106px}
body{padding-top:var(--smallhall-header-height);--smallhall-admin-offset:0px}
body.admin-bar{--smallhall-admin-offset:32px}
html{scroll-padding-top:calc(var(--smallhall-header-height) + 24px)}
.site-header{position:fixed;inset-inline:0;top:var(--smallhall-admin-offset);z-index:1000}
body.home .site-header .brand{opacity:0;visibility:hidden;transform:scale(.9);transform-origin:left center;pointer-events:none;transition:opacity .35s ease,transform .65s cubic-bezier(.22,.8,.25,1),visibility 0s linear .35s}
body.home.is-scrolled .site-header .brand{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.skip-link{position:fixed;z-index:100001}
.skip-link:focus{top:calc(var(--smallhall-admin-offset) + 12px)}
#main,#about{scroll-margin-top:var(--smallhall-admin-offset)}
.hero-inner{min-height:292px}
@media(max-width:800px){.hero-inner{min-height:248px}}
@media(max-width:782px){body.admin-bar{--smallhall-admin-offset:46px}}
@media(max-width:600px){:root{--smallhall-header-height:96px}.hero-inner{min-height:215px}#wpadminbar{position:fixed}}
@media(max-width:360px){.hero-inner{min-height:203px}}

.hero-logo{position:absolute;left:0;top:50%;z-index:1;width:330px;display:flex;flex-direction:column;align-items:center;transform:translateY(-50%);transform-origin:left center;transition:transform .65s cubic-bezier(.22,.8,.25,1),opacity .45s ease}
.hero-logo img{display:block;width:100%;height:auto}
.hero-logo-tagline{margin-top:8px;font-size:12px;line-height:1;letter-spacing:.28em;text-transform:uppercase}
body.is-scrolled .hero-logo{transform:translate(-20px,calc(-50% - 76px)) scale(.4);opacity:0}
@media(max-width:800px){.hero-logo{width:280px}}
@media(max-width:600px){.hero-logo{width:242px}.hero-logo-tagline{font-size:10px;margin-top:7px}body.is-scrolled .hero-logo{transform:translate(-10px,calc(-50% - 66px)) scale(.4)}}
@media(max-width:360px){.hero-logo{width:220px}}
@media(prefers-reduced-motion:reduce){.hero-logo,.site-header .brand{transition:none}}

/* Translera floating switcher: keep it under the fixed header in Smallhall's palette. */
.translera-floating-switcher{top:calc(var(--smallhall-header-height) + 14px)!important;right:24px!important;bottom:auto!important;left:auto!important;z-index:1001;background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:8px!important;padding:6px!important;box-shadow:0 10px 28px rgb(0 0 0 / 24%)!important}
.translera-floating-switcher .translera-switcher{--translera-btn-bg:var(--paper);--translera-btn-text:var(--ink);--translera-btn-border-color:var(--accent);--translera-hover-bg:#172433;--translera-hover-text:var(--ink);--translera-hover-border:var(--accent);--translera-menu-bg:#0a111a;--translera-menu-text:var(--ink);--translera-menu-border:var(--line);--translera-menu-hover-bg:#172433;--translera-menu-hover-text:var(--ink);--translera-active-bg:#172433;--translera-active-text:var(--ink);font-family:"M PLUS Rounded 1c",sans-serif}
.translera-floating-switcher .translera-dropdown-toggle{background:var(--paper)!important;color:var(--ink)!important;border-color:var(--accent)!important}
.translera-floating-switcher .translera-dropdown-toggle:hover{background:#172433!important;color:var(--ink)!important}
.translera-floating-switcher .translera-dropdown-menu{background:#0a111a!important;color:var(--ink)!important;border-color:var(--line)!important;box-shadow:0 10px 28px rgb(0 0 0 / 30%)!important}
.translera-floating-switcher .translera-dropdown-menu a{color:var(--ink)!important}
.translera-floating-switcher .translera-dropdown-menu a:hover{background:#172433!important;color:var(--ink)!important}
@media(max-width:600px){.translera-floating-switcher{top:calc(var(--smallhall-header-height) + 10px)!important;right:14px!important}}

.entry-content .gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-block:32px}
.entry-content .gallery .gallery-item{float:none!important;width:auto!important;margin:0!important;min-width:0;text-align:center}
.entry-content .gallery img{width:100%;height:auto;border:0!important;border-radius:10px}
.entry-content .gallery br{display:none}
.entry-content li+li{margin-top:8px}
@media(max-width:800px){.entry-content .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.entry-content .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Rounded app artwork with a frame sampled from the featured image. */
.project-card .project-image{--art-color-1:#445e6c;--art-color-2:#9ad0df;--art-color-3:#607e92;border-radius:24%;padding:3px;background:conic-gradient(from 35deg,var(--art-color-1),var(--art-color-2),var(--art-color-3),var(--art-color-1));box-shadow:0 0 22px -4px var(--art-color-1),0 4px 10px rgb(0 0 0 / 18%);transition:box-shadow .2s ease}
.project-card .project-image img{border-radius:21%;background:#eceef0}
.project-card .project-image img.contain{object-fit:cover;padding:0}
.project-card .project-image.placeholder .lettermark{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:21%;background:#edf0f2}
.project-card:hover .project-image{box-shadow:0 0 32px -2px var(--art-color-1),0 4px 10px rgb(0 0 0 / 18%)}
/* The Tools cards are larger, so keep their glow contained to the artwork. */
.category-tools .project-image{box-shadow:0 0 18px -5px var(--art-color-1)}
.category-tools .project-card:hover .project-image{box-shadow:0 0 26px -3px var(--art-color-1)}
@media(prefers-reduced-motion:reduce){.project-card .project-image{transition:none}}
