:root { --ink: #1f211e; --muted: #73756f; --paper: #f3f3ef; --tile-size: 28px; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.scale-test { overflow-x: hidden; }
.page-shell { max-width: 1500px; margin: 0 auto; padding: 86px clamp(22px, 5vw, 78px) 148px; }
.masthead { max-width: 820px; margin: 0 auto 78px; text-align: center; }
.eyebrow { margin: 0 0 20px; color: #494b46; font-size: 11px; font-weight: 800; letter-spacing: .19em; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4.1vw, 4.5rem); font-weight: 400; letter-spacing: -.055em; line-height: .99; }
.toolbar { display: flex; justify-content: center; gap: 12px; margin-top: 39px; }
.search { display: flex; align-items: center; width: min(300px, 60vw); border-bottom: 1px solid #bbbcb5; color: #666860; transition: border-color .2s ease; }
.search:focus-within { border-color: #20211f; }
.search span { padding: 0 8px 4px 0; font-size: 23px; line-height: 1; transform: rotate(-20deg); }
.search input { width: 100%; padding: 9px 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.search input::placeholder { color: #8a8b84; }
.add-button { padding: 10px 2px; border: 0; border-bottom: 1px solid #20211f; background: transparent; color: var(--ink); cursor: pointer; font: 700 12px/1 inherit; letter-spacing: .015em; }
.add-button span { margin-left: 4px; }
.wall { position: relative; width: min(100%, 760px); aspect-ratio: 760 / 480; margin: 0 auto; }
.scale-test .wall { width: min(1100px, calc(100vw - 48px)); max-width: 1100px; aspect-ratio: auto; min-height: 0; margin-inline: auto; overflow-x: hidden; }
.scale-test .masthead { margin-bottom: 60px; }
.debug-bounds .wall { outline: 1px solid red; }
.scale-test .page-shell { padding-bottom: 240px; }
.wall::before { content: ""; display: none; }
.scale-test .wall::before { display: block; position: absolute; inset: 0; background: var(--paper); z-index: 4; }
.scale-test .wall.is-ready::before { display: none; }
.logo-tile { position: absolute; width: var(--tile-size); height: var(--tile-size); color: inherit; text-decoration: none; outline-offset: 5px; transition: opacity .2s ease, filter .2s ease; }
.logo-area { display: block; width: 100%; height: 100%; }
.logo-positioner { display: block; width: 100%; height: 100%; perspective: 500px; }
.logo-celebrate { animation: logo-celebrate 600ms cubic-bezier(.22,.8,.3,1); transform-style: preserve-3d; position: relative; z-index: 1000; }
@keyframes logo-celebrate { 0% { transform: translateY(0) rotateY(0deg); } 35% { transform: translateY(-14px) rotateY(120deg); } 70% { transform: translateY(-5px) rotateY(300deg); } 100% { transform: translateY(0) rotateY(360deg); } }
.logo-mark { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%); opacity: .6; transform: scale(1); transform-origin: center; transition: transform .19s ease, filter .19s ease, opacity .19s ease; }
.logo-tile.is-broken { display: none; }
.logo-tile:hover, .logo-tile:focus-visible, .logo-tile.is-selected { z-index: 3; }
.logo-tile:hover .logo-mark, .logo-tile:focus-visible .logo-mark, .logo-tile.is-selected .logo-mark { filter: grayscale(0) saturate(1); opacity: 1; transform: scale(1.15); }
.logo-tile:focus-visible { outline: 2px solid #20211f; }
.logo-tile.is-dim { opacity: .12; filter: grayscale(1); }
.click-test-marker { outline: 1px dashed #d13b28; outline-offset: 3px; }
.click-test-legend { position: fixed; top: 14px; right: 14px; z-index: 8; padding: 7px 10px; background: rgba(243,243,239,.9); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .logo-mark, .logo-tile, .info-strip { transition: none !important; } .logo-tile:hover .logo-mark, .logo-tile:focus-visible .logo-mark, .logo-tile.is-selected .logo-mark { transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-celebrate { animation: none; } }
.logo-tile.is-match .logo-mark { opacity: .94; }
.tone-0 { --hue: 210; } .tone-1 { --hue: 5; } .tone-2 { --hue: 143; } .tone-3 { --hue: 260; }
.tone-4 { --hue: 30; } .tone-5 { --hue: 193; } .tone-6 { --hue: 335; } .tone-7 { --hue: 82; }
.tone-8 { --hue: 232; } .tone-9 { --hue: 350; } .tone-10 { --hue: 170; } .tone-11 { --hue: 48; }
.info-strip { position: fixed; right: 18px; bottom: 18px; left: 18px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 920px; margin: auto; padding: 16px 19px 16px 21px; border: 1px solid rgba(31,33,30,.12); background: rgba(248,248,244,.78); box-shadow: 0 12px 36px rgba(31,33,30,.12); backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.info-strip.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.info-copy { display: grid; gap: 2px; min-width: 0; }
.info-copy strong { font-size: 15px; } .info-copy span { font-size: 13px; } .info-copy small { color: var(--muted); font-size: 11px; }
.visit-link { flex: 0 0 auto; color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 900px) { :root { --tile-size: 24px; } }
@media (max-width: 620px) { :root { --tile-size: 20px; } .page-shell { padding-top: 58px; } .masthead { margin-bottom: 52px; } h1 { font-size: clamp(2rem, 10.5vw, 3rem); } .toolbar { align-items: flex-start; flex-direction: column; margin-top: 32px; } .search { width: 100%; } .add-button { align-self: flex-end; } .wall { min-height: 0; } .info-strip { right: 10px; bottom: 10px; left: 10px; gap: 12px; padding: 13px 14px; } .info-copy span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; } }
@media (max-width: 620px) { .scale-test .wall { width: calc(100vw - 24px); } }