/* SenturyUK Galleries */
/* Layout: one-screen curved reel of event covers on the landing view; each event opens as a scrolling page with a full-bleed cover, a sticky toolbar and a justified photo grid. Light only, matching the portfolio. */
:root {
	color-scheme: light;
	--ground: #FFFFFF;
	--ink: #1A223C;
	--deep: #001C44;
	--soft: #5A6485;
	--line: #D9E2F2;
	--wash: #F3F6FC;
	--accent: #FE01A9;
	--sky: #BAD8FD;
	--danger: #B00074;
	--display: 'Funnel Display', system-ui, sans-serif;
	--mono: 'IBM Plex Mono', ui-monospace, monospace;
	--gut: clamp(16px, 3.4vw, 48px);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ground); color: var(--ink); font-family: var(--display); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html:has(body.sg-home), body.sg-home { overflow: hidden; }
body:not(.sg-home) { height: auto; min-height: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
svg { display: block; }
.kicker { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--soft); }

/* ---------- Landing ---------- */
.page { height: calc(100% - var(--wp-admin--admin-bar--height, 0px)); min-height: 600px; display: flex; flex-direction: column; }
.top { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding: 20px var(--gut) 8px; }
.logo { display: block; width: 148px; height: 27px; background: var(--ink); -webkit-mask: url(../img/logo.svg) left center / contain no-repeat; mask: url(../img/logo.svg) left center / contain no-repeat; }
.logo-wrap { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-wrap .kicker { padding-left: 14px; border-left: 1px solid var(--line); color: var(--ink); }
.top nav { display: flex; align-items: center; gap: 4px 28px; flex-wrap: wrap; font-size: 15px; }
.top nav a { padding: 11px 0; text-decoration: none; }
.top nav a:hover { color: var(--accent); }
.top nav .cta { padding: 9px 18px; border: 1px solid var(--ink); }
.top nav .cta:hover { background: var(--ink); color: var(--ground); }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; padding: clamp(8px, 2vh, 28px) var(--gut) 0; }
h1 { margin: 8px 0 0; font-weight: 500; font-size: clamp(40px, 7vw, 108px); line-height: .94; letter-spacing: -0.045em; text-wrap: balance; }
.count { font-family: var(--mono); font-size: 12px; color: var(--soft); text-align: right; letter-spacing: .06em; }
.count b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(34px, 4vw, 60px); line-height: 1; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: clamp(14px, 2.2vh, 26px) var(--gut) 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 14px; background: none; border: 0; font-size: 14px; white-space: nowrap; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.seg button:not([aria-pressed="true"]):hover { color: var(--accent); }
.tools .lab { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--soft); }
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats button { min-height: 40px; padding: 0 14px; background: none; border: 1px solid var(--line); font-size: 14px; }
.cats button:hover { border-color: var(--ink); }
.cats button[aria-pressed="true"] { background: var(--sky); border-color: var(--sky); }
.search { position: relative; margin-left: auto; flex: 0 1 260px; min-width: 180px; }
.search input { width: 100%; min-height: 40px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: 0; background: var(--ground); font: inherit; font-size: 14px; color: var(--ink); }
.search input:focus { outline: none; border-color: var(--ink); }
.search svg { position: absolute; left: 11px; top: 50%; margin-top: -8px; color: var(--soft); pointer-events: none; }

.stage { position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column; }
.reel { position: relative; flex: 1; perspective: 1100px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; transition: opacity .25s; }
.reel.swap { opacity: 0; }
.reel.dragging { cursor: grabbing; }
.card { position: absolute; left: 50%; top: 50%; padding: 0; border: 0; background: var(--line); overflow: hidden; will-change: transform; backface-visibility: hidden; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card .stamp { position: absolute; left: 10px; bottom: 10px; display: flex; white-space: nowrap; align-items: center; gap: 6px; padding: 5px 9px; background: var(--ground); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.card .stamp svg { width: 12px; height: 12px; }
.card::after { content: ''; position: absolute; inset: 0; border: 3px solid transparent; transition: border-color .25s; pointer-events: none; }
.card.active::after { border-color: var(--ink); }
.empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 16px; }
.empty b { font-weight: 500; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.02em; }

.index { flex: 1; overflow-y: auto; padding: 22px var(--gut) 40px; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px 20px; }
.icard { display: flex; flex-direction: column; gap: 10px; padding: 0; background: none; border: 0; text-align: left; }
.icard .ph { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.icard img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.icard:hover img { transform: scale(1.04); }
.icard b { font-weight: 500; font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; }
.icard .stamp { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; align-items: center; padding: 5px 9px; background: var(--ground); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.icard .stamp svg { width: 12px; height: 12px; }

.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 24px; align-items: center; margin: 0 var(--gut); padding: 14px 0 20px; border-top: 1px solid var(--line); }
.foot .ctrl { justify-self: end; }
.prog { display: flex; gap: 6px; align-items: center; }
.prog i { width: 18px; height: 2px; background: var(--line); transition: background .3s, width .3s; }
.prog i.on { width: 40px; background: var(--ink); }
.now { min-width: 0; }
.now b { display: block; margin-top: 2px; font-weight: 500; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -0.015em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now span { font-family: var(--mono); color: var(--soft); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; }
.ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn, .ctrl button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; background: none; border: 1px solid var(--line); font-size: 14px; text-decoration: none; white-space: nowrap; transition: border-color .2s, background .2s, color .2s; }
.btn:hover, .ctrl button:hover { border-color: var(--ink); }
.btn.go, .ctrl .go { background: var(--ink); border-color: var(--ink); color: var(--ground); padding: 0 22px; }
.btn.go:hover, .ctrl .go:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Gallery page ---------- */
.gal { min-height: 100%; }
.hero-top .logo-link { display: block; }
.hero { position: relative; height: clamp(420px, 72vh, 760px); overflow: hidden; background: var(--deep); color: #FFFFFF; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: settle 1.6s cubic-bezier(.2, .7, .2, 1); }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 28, 68, .55) 0%, rgba(0, 28, 68, .12) 22%, rgba(0, 28, 68, .5) 45%, rgba(0, 28, 68, .94) 100%); }
.hero-top { position: absolute; left: var(--gut); right: var(--gut); top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hero-top .logo { background: #FFFFFF; }
.hero-top .btn { border-color: rgba(255, 255, 255, .5); color: #FFFFFF; }
.hero-top .btn:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.hero-txt { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(22px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.hero .kicker { color: var(--sky); }
.hero h1 { margin: 12px 0 0; font-weight: 500; font-size: clamp(44px, 8.4vw, 136px); line-height: .92; letter-spacing: -0.045em; text-wrap: balance; }
.hero p { margin: 16px 0 0; max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255, 255, 255, .86); text-wrap: pretty; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: rgba(255, 255, 255, .86); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts .warn { padding: 3px 9px; background: var(--accent); color: var(--ink); }
.hero-act { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 230px; }
.hero-act .btn { min-height: 52px; color: #FFFFFF; border-color: rgba(255, 255, 255, .5); }
.hero-act .btn:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .12); }
.hero-act .btn.pink { background: var(--accent); border-color: var(--accent); color: var(--ink); font-size: 15px; }
.hero-act .btn.pink:hover { background: #FFFFFF; border-color: #FFFFFF; }
.hero-act small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .7); text-align: center; }

.gbar { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px)); z-index: 5; display: flex; align-items: center; gap: 10px 18px; padding: 10px var(--gut); background: var(--ground); border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 40px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; font-size: 15px; white-space: nowrap; }
.tabs button sup { font-family: var(--mono); font-size: 10px; color: var(--soft); margin-left: 3px; }
.tabs button[aria-pressed="true"] { border-bottom-color: var(--ink); }
.tabs button:hover { color: var(--accent); }
.gbar .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.gbar .btn.favon[aria-pressed="true"] svg { color: var(--accent); }

.credit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0 var(--gut); padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--soft); font-size: 14px; }
.credit b { color: var(--ink); font-weight: 500; }
.credit .kicker { align-self: center; }

.grid { padding: 8px var(--gut) 24px; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 30px 0 12px; }
.sec-h h3 { margin: 0; font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.025em; }
.jrow { display: flex; gap: 8px; margin-bottom: 8px; }
.tile { position: relative; flex: none; margin: 0; overflow: hidden; background: var(--line); cursor: zoom-in; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.tile:hover img { transform: scale(1.025); }
.tile .tb { position: absolute; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: var(--ground); border: 0; color: var(--ink); opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.tile .tb svg { width: 18px; height: 18px; }
.tile .tb:hover { background: var(--ink); color: var(--ground); }
.tile .fav { top: 8px; right: 8px; }
.tile .dl { bottom: 8px; right: 8px; }
.tile:hover .tb, .tile:focus-within .tb, .tile .fav[aria-pressed="true"] { opacity: 1; }
.tile .fav[aria-pressed="true"] { color: var(--accent); }
.tile .fav[aria-pressed="true"] svg path { fill: currentColor; }
.tile .num { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; background: rgba(255, 255, 255, .92); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: 0; transition: opacity .2s; }
.tile:hover .num { opacity: 1; }
.tile .chk { position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border: 2px solid #FFFFFF; border-radius: 50%; background: rgba(26, 34, 60, .35); display: none; align-items: center; justify-content: center; color: transparent; }
.tile .chk svg { width: 14px; height: 14px; }
.selecting .tile { cursor: pointer; }
.selecting .tile .chk { display: flex; }
.selecting .tile .tb { display: none; }
.selecting .tile.sel .chk { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.selecting .tile.sel img { transform: scale(.92); }
.selecting .tile.sel { background: var(--sky); }
.nofav { padding: 60px 0; text-align: center; color: var(--soft); }
.nofav b { display: block; color: var(--ink); font-weight: 500; font-size: 26px; letter-spacing: -0.02em; margin-bottom: 6px; }

.gate { max-width: 560px; margin: 0 auto; padding: clamp(48px, 8vw, 110px) var(--gut); display: flex; flex-direction: column; gap: 18px; }
.gate h3 { margin: 0; font-weight: 500; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -0.035em; }
.gate p { margin: 0; color: var(--soft); }
.gate .row { display: flex; gap: 8px; }
.gate input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0; font: inherit; font-size: 17px; color: var(--ink); background: var(--ground); }
.gate input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent); }
.gate .err { min-height: 20px; color: var(--danger); font-size: 14px; }
.gate .hint { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 10px 12px; background: var(--wash); color: var(--soft); }

.nextp { position: relative; display: block; width: 100%; height: clamp(280px, 46vh, 520px); padding: 0; overflow: hidden; background: var(--deep); color: #FFFFFF; border: 0; text-align: left; }
.nextp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.nextp:hover img, .nextp:focus-visible img { transform: scale(1.04); }
.nextp .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 28, 68, .3) 0%, rgba(0, 28, 68, .5) 45%, rgba(0, 28, 68, .92) 100%); }
.nextp .txt { position: absolute; left: var(--gut); right: clamp(84px, 12vw, 180px); bottom: clamp(20px, 3.4vw, 48px); }
.nextp small { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--sky); }
.nextp b { display: block; margin-top: 12px; font-weight: 500; font-size: clamp(34px, 6.4vw, 100px); line-height: .96; letter-spacing: -0.04em; text-wrap: balance; }
.nextp .arr { position: absolute; right: var(--gut); bottom: clamp(20px, 3.4vw, 48px); display: flex; align-items: center; justify-content: center; width: clamp(48px, 5vw, 72px); height: clamp(48px, 5vw, 72px); border: 1px solid #FFFFFF; font-size: clamp(18px, 1.8vw, 26px); transition: background .2s, color .2s, border-color .2s; }
.nextp:hover .arr, .nextp:focus-visible .arr { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.gfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px var(--gut) 90px; color: var(--soft); font-size: 14px; }

.selbar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 8; transform: translateX(-50%); display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100% - 32px); padding: 10px 10px 10px 20px; background: var(--ink); color: var(--ground); box-shadow: 0 18px 50px rgba(0, 28, 68, .3); animation: up .3s cubic-bezier(.2, .7, .2, 1); }
@keyframes up { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.selbar b { font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums; }
.selbar .link { min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--sky); font-size: 14px; }
.selbar .link:hover { color: var(--ground); text-decoration: underline; }
.selbar .btn { border-color: var(--accent); background: var(--accent); color: var(--ink); }
.selbar .btn:hover { background: var(--ground); border-color: var(--ground); }
.selbar .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Viewer ---------- */
.lb { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: var(--ground); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.lb-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px var(--gut); border-bottom: 1px solid var(--line); }
.lb-bar .ctrl button[aria-pressed="true"] { color: var(--accent); }
.lb-bar .ctrl button[aria-pressed="true"] svg path { fill: currentColor; }
.lb-bar svg { width: 18px; height: 18px; }
.lb-view { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: clamp(12px, 3vw, 36px) clamp(12px, 7vw, 110px); touch-action: none; cursor: zoom-in; user-select: none; }
.lb-view.zoomed { cursor: grab; }
.lb-view img { max-width: 100%; max-height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.lb-nav { position: absolute; top: 50%; width: 48px; height: 48px; margin-top: -24px; background: var(--ground); border: 1px solid var(--line); font-size: 16px; }
.lb-nav:hover { border-color: var(--ink); }
.lb-strip { display: flex; gap: 6px; padding: 10px var(--gut); overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: thin; }
.lb-strip button { flex: none; width: 54px; height: 54px; padding: 0; border: 2px solid transparent; background: var(--line); opacity: .55; }
.lb-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-strip button[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.lb-strip button:hover { opacity: 1; }
.dlmenu { position: relative; }
.dlmenu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; display: flex; flex-direction: column; min-width: 240px; padding: 6px; background: var(--ground); border: 1px solid var(--ink); box-shadow: 0 14px 40px rgba(0, 28, 68, .16); }
.dlmenu .menu button { justify-content: space-between; border: 0; min-height: 48px; text-align: left; }
.dlmenu .menu button:hover { background: var(--wash); }
.dlmenu .menu small { font-family: var(--mono); font-size: 11px; color: var(--soft); }

/* ---------- Share ---------- */
dialog.share { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid var(--ink); background: var(--ground); color: var(--ink); }
dialog.share::backdrop { background: rgba(0, 28, 68, .55); }
.share-in { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 4vw, 36px); }
.share-in h3 { margin: 0; font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.03em; }
.share-in p { margin: 0; color: var(--soft); }
.qr-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; align-items: center; }
.qr { width: 148px; height: 148px; padding: 10px; border: 1px solid var(--line); background: #FFFFFF; }
.qr canvas, .qr img { width: 100% !important; height: 100% !important; display: block; }
.copy { display: flex; gap: 8px; }
.copy input { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 0; font-family: var(--mono); font-size: 12px; color: var(--ink); background: var(--wash); }

.toast { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); z-index: 40; transform: translate(-50%, -12px); max-width: calc(100% - 32px); width: max-content; padding: 12px 18px; background: var(--ink); color: var(--ground); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--sky); font-weight: 500; }

@media (max-width: 900px) {
	.hero-txt { grid-template-columns: 1fr; }
	.hero-act { flex-direction: row; flex-wrap: wrap; min-width: 0; }
	.hero-act .btn { flex: 1 1 200px; }
	.hero-act small { flex-basis: 100%; text-align: left; }
}
@media (max-width: 720px) {
	.top { padding-top: 14px; }
	.logo-wrap .kicker { display: none; }
	.top nav { gap: 0 18px; font-size: 14px; }
	.intro { grid-template-columns: 1fr; }
	.count { text-align: left; display: flex; gap: 10px; align-items: baseline; }
	.count b { font-size: 28px; }
	html:has(body.sg-home), body.sg-home { overflow: auto; }
	.page { height: auto; min-height: 100%; }
	.stage { flex: none; height: max(380px, 56vh); }
	.tools { gap: 8px; padding: 10px 0; }
	.search { order: -2; margin-left: 0; flex: 1 1 0; min-width: 0; }
	#views { order: -1; flex: none; }
	#sort, .cats { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	#sort { flex: 0 1 auto; max-width: 100%; }
	#sort button, .cats button { flex: none; }
	#sort::-webkit-scrollbar, .cats::-webkit-scrollbar { display: none; }
	.tools .lab { display: none; }
	.card .stamp .n { display: none; }
	.foot { grid-template-columns: 1fr; }
	.foot .ctrl { justify-self: start; }
	.prog { display: none; }
	.gbar { flex-wrap: wrap; }
	.tabs { flex-basis: 100%; order: 3; }
	.gbar .btn .t { display: none; }
	.qr-row { grid-template-columns: 1fr; justify-items: start; }
	.hero { height: clamp(460px, 80vh, 640px); }
	.lb-nav { display: none; }
	.lb-bar .ctrl .zl, .lb-bar .ctrl [data-z] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hero > img, .selbar { animation: none; }
	.tile img, .nextp img, .icard img, .reel, .toast { transition: none; }
}

/* ---------- WordPress additions ---------- */
.screen-reader-text, .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nojs { padding: 24px var(--gut); }
.nojs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.nojs a { font-size: 18px; }
.empty-site { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px; }
.empty-site b { font-weight: 500; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.03em; }
.empty-site span { color: var(--soft); max-width: 46ch; }
.closed { max-width: 640px; margin: 0 auto; padding: clamp(48px, 8vw, 110px) var(--gut); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.closed h2 { margin: 0; font-weight: 500; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -0.035em; }
.closed p { margin: 0; color: var(--soft); }
.adminnote { margin: 16px var(--gut) 0; padding: 12px 16px; background: var(--wash); border-left: 3px solid var(--accent); font-size: 14px; }
.grid noscript .fallback { display: flex; flex-wrap: wrap; gap: 8px; }
.grid noscript img { height: 220px; width: auto; }
.prog-z { display: inline-block; width: 120px; height: 3px; background: rgba(255, 255, 255, .25); vertical-align: middle; margin-left: 6px; }
.prog-z i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.plain-main { max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 72px) var(--gut); }
.plain-main h1 { font-size: clamp(36px, 5vw, 72px); }
.plain-main .body { color: var(--soft); font-size: 17px; }
.plain-main .body a { color: var(--ink); }
.plain-page .top { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.tile a.tb { text-decoration: none; }
.lb-bar .ctrl a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); font-size: 14px; text-decoration: none; }
.dlmenu .menu a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; padding: 0 12px; border: 0; text-decoration: none; font-size: 14px; }
.dlmenu .menu a:hover { background: var(--wash); }
.qr svg { width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
.card { display: block; color: var(--ink); }
.icard { color: inherit; text-decoration: none; }
.gate h2 { margin: 0; font-weight: 500; font-size: clamp(32px, 4vw, 54px); line-height: 1; letter-spacing: -0.035em; }
.gate .kicker svg, .facts svg { display: inline-block; vertical-align: -1px; margin-right: 4px; }
.hero > img { max-width: none; }
/* Touch screens have no hover, so keep the photo buttons visible there. */
@media (hover: none) {
	.tile .tb { opacity: 1; width: 34px; height: 34px; background: rgba(255, 255, 255, .9); }
	.tile .tb svg { width: 16px; height: 16px; }
	.credit .kicker { display: none; }
}