body.crate-home{min-height:100vh;background:var(--color-cream-deep);color:var(--color-ink);font-family:var(--font-family)}
body.crate-home #view{width:100%;max-width:none;min-height:100vh;margin:0;padding:0}
.landing,.home-page{max-width:1440px;margin:0 auto;color:var(--color-ink)}
.topbar{min-height:80px;padding:var(--space-4) clamp(20px,5vw,var(--space-8));display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-cream-deep)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none;font-size:var(--type-title);font-weight:700;letter-spacing:-.04em}
.brand-mark{width:28px;height:28px;background:var(--color-brick);border-radius:50%;display:grid;place-content:center;gap:2px}
.brand-mark i{display:block;width:12px;height:2px;background:var(--color-cream)}
.nav-links{display:flex;align-items:center;gap:var(--space-5);color:var(--color-muted);font-size:var(--type-ui)}
.nav-links a,.text-link{color:inherit;text-decoration:none}
.nav-cta,.connect{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:var(--space-2);border:1px solid var(--color-brick);border-radius:var(--radius-pill);background:var(--color-brick);color:#fff;padding:0 var(--space-5);text-decoration:none;font-size:var(--type-ui);font-weight:700;cursor:pointer;white-space:nowrap;flex:none}
.nav-cta:hover,.connect:hover{background:var(--color-brick-dark);text-decoration:none}
.nav-cta.secondary-cta{background:transparent;border-color:var(--color-border);color:var(--color-ink)}
.nav-cta.secondary-cta:hover{background:var(--color-cream);border-color:var(--color-ink)}
.hero{padding:clamp(var(--space-7),7vw,96px) clamp(20px,6vw,88px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(var(--space-5),5vw,var(--space-8));min-height:640px}
.hero-copy{max-width:540px;z-index:1}
.eyebrow{margin:0 0 var(--space-3);color:var(--color-brick-dark);font-size:var(--type-meta);font-weight:700;letter-spacing:.08em}
.hero h1{max-width:10ch;margin:0 0 var(--space-5);font-size:var(--type-display);line-height:.98;letter-spacing:-.055em}
.hero h1 em{color:var(--color-brick);font-style:normal}
.dek{max-width:42ch;margin:0 0 var(--space-5);color:var(--color-muted);font-size:var(--type-body);line-height:1.55}
.primary{min-height:48px;padding:0 var(--space-5)}
.micro{margin:var(--space-2) 0;color:var(--color-muted);font-size:var(--type-meta);line-height:1.5}
.hero-art{min-width:0}
.sleeve-wall{height:clamp(420px,40vw,540px);padding:var(--space-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--space-2);position:relative;background:var(--color-night);transform:rotate(-1deg);box-shadow:8px 12px 0 var(--color-border)}
.wall-tile{position:relative;overflow:hidden;margin:0;background:var(--color-night-soft);transition:transform .22s ease,box-shadow .22s ease}
.wall-tile:nth-child(even){transform:translateY(var(--space-3))}
.wall-tile:hover,.wall-tile:focus-within{z-index:1;transform:translateY(-4px);box-shadow:0 10px 18px #0005}
.wall-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.wall-tile:hover img,.wall-tile:focus-within img{transform:scale(1.06)}
.wall-tile figcaption{position:absolute;inset:auto 0 0;padding:var(--space-4) var(--space-2) var(--space-2);display:grid;gap:var(--space-1);background:linear-gradient(transparent,#111e 30%,#111e);color:#fff;font-size:var(--type-meta);line-height:1.25;overflow-wrap:anywhere}
.wall-tile figcaption strong{font-size:var(--type-ui);line-height:1.2;overflow-wrap:anywhere}
.wall-caption{margin:var(--space-4) 0 0;color:var(--color-muted);font-size:var(--type-meta)}
.dimensions{padding:var(--space-7) clamp(20px,6vw,88px) var(--space-8);background:var(--color-cream)}
.dimensions-head{max-width:1440px;margin:0 auto var(--space-6);text-align:center}
.dimensions-head h2{margin:0;font-size:var(--type-title);letter-spacing:-.035em}
.dimension-row{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--space-3),3vw,var(--space-6))}
.dimension-item{min-width:0;display:grid;justify-items:center;gap:var(--space-4);text-align:center}
.dimension-item>p{max-width:34ch;margin:0;color:var(--color-muted);font-size:var(--type-body);line-height:1.5}
.dimension-label{--label-color:#743528;position:relative;width:min(100%,280px);min-width:220px;aspect-ratio:1;border:0;border-radius:50%;padding:0;display:grid;place-items:center;overflow:visible;background:radial-gradient(circle at center,var(--label-color) 0 46%,transparent 46.3%),repeating-radial-gradient(circle at center,transparent 0 48%,color-mix(in srgb,var(--label-color) 18%,var(--color-cream)) 48.4% 48.8%,transparent 49.2% 52%,color-mix(in srgb,var(--label-color) 13%,var(--color-cream)) 52.3% 52.7%,transparent 53.1% 57%);color:#fff;text-align:center;white-space:normal;cursor:pointer;isolation:isolate;transition:transform .35s ease,filter .35s ease}
.dimension-label:before,.dimension-label:after{content:"";position:absolute;z-index:-1;inset:8%;border:1px solid color-mix(in srgb,var(--label-color) 38%,var(--color-cream));border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--label-color) 9%,transparent),0 0 0 11px color-mix(in srgb,var(--label-color) 7%,transparent)}
.dimension-label:after{inset:14%;box-shadow:0 0 0 4px color-mix(in srgb,var(--label-color) 9%,transparent)}
.dimension-sound{--label-color:#405b4a}
.dimension-rare{--label-color:#6a501d}
.label-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.label-ring path{stroke:color-mix(in srgb,var(--label-color) 58%,var(--color-cream));stroke-width:.5}
.label-ring text{fill:var(--color-ink);font-family:var(--font-family);font-size:var(--type-meta);font-weight:800;letter-spacing:2.2px}
.dimension-label:hover .label-ring,.dimension-label:focus-visible .label-ring,.dimension-label.is-active .label-ring{animation:dimension-spin 1.818s linear infinite}
.dimension-label:focus-visible{outline:3px solid var(--color-brick);outline-offset:7px}
.label-fact{width:62%;max-width:170px;min-width:0;display:grid;justify-items:center;gap:var(--space-2);pointer-events:none}
.label-fact strong{font-size:var(--type-ui);line-height:1.14;letter-spacing:-.025em}
.label-fact span{font-size:var(--type-meta);line-height:1.3;color:#fff}
.label-fact strong,.label-fact span{max-width:100%;overflow-wrap:anywhere}
.wall-proof{margin:0 clamp(20px,6vw,88px) var(--space-7);padding:var(--space-5) var(--space-6);display:grid;grid-template-columns:112px minmax(0,.7fr) minmax(0,1.6fr);align-items:center;gap:var(--space-5);background:var(--color-night);color:var(--color-on-night)}
.find-cover{width:112px;aspect-ratio:1;object-fit:cover;box-shadow:0 8px 22px #0005}
.wall-proof>div{display:grid;gap:var(--space-2)}
.wall-proof .eyebrow{margin:0;color:var(--color-on-night)}
.wall-proof strong{font-size:var(--type-section)}
.wall-proof span:last-child{color:var(--color-on-night-muted);font-size:var(--type-meta)}
.find-fact{margin:0;color:var(--color-on-night);font-size:var(--type-body);line-height:1.55}
.how{padding:var(--space-7) clamp(20px,8vw,112px);border-top:1px solid var(--color-border)}
.how .steps{display:grid;width:100%;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.steps article{padding-top:var(--space-3);border-top:2px solid var(--color-brick)}
.steps article>span{color:var(--color-brick);font-size:var(--type-meta)}
.steps h2{margin:var(--space-4) 0 var(--space-2);font-size:var(--type-section)}
.steps p,.muted{max-width:42ch;color:var(--color-muted);font-size:var(--type-body);line-height:1.55}
.sign-in{padding:var(--space-7) clamp(20px,8vw,112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:clamp(var(--space-5),6vw,88px);background:var(--color-cream)}
.sign-in h2{margin:0 0 var(--space-3);font-size:var(--type-title);line-height:1.15}
.sign-in .muted{margin:0}
.auth-actions{min-width:0;container-type:inline-size;container-name:provider-actions;display:grid;gap:var(--space-3)}
.social-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.social-button,.email-button,.upload-button{display:flex;min-width:0;min-height:48px;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink);text-decoration:none;font-size:var(--type-ui);font-weight:600;white-space:nowrap}
.social-button span{min-width:0;white-space:nowrap}
.provider-mark{width:20px;height:20px;flex:none}
.google-mark{width:22px;height:22px}
.github-mark{color:var(--color-ink)}
.email-button{border-color:var(--color-border);background:var(--color-paper);color:var(--color-ink)}
.social-button:hover,.email-button:hover,.upload-button:hover{border-color:var(--color-ink);background:var(--color-cream);color:var(--color-ink);text-decoration:none}
@container provider-actions (max-width:680px){.social-row{grid-template-columns:1fr}.social-button{width:100%}}
.landing footer,.home-page footer{padding:var(--space-4) clamp(20px,5vw,72px);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-top:1px solid var(--color-border);color:var(--color-muted);font-size:var(--type-meta)}
.landing footer a{color:inherit;text-decoration:none}
.home-main{padding:var(--space-7) clamp(20px,5vw,72px);background:var(--color-cream)}
.home-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-5)}
.home-head h1{margin:0 0 var(--space-2);font-size:var(--type-display);line-height:1;letter-spacing:-.05em}
.home-head .dek{margin:0}
.connect{background:var(--color-brick);border-color:var(--color-brick);color:#fff}
.privacy-content{max-width:820px;margin:0 auto;padding:clamp(var(--space-7),8vw,96px) var(--space-5) var(--space-8);background:var(--color-cream)}
.privacy-content h1{margin:0 0 var(--space-3);font-size:var(--type-display);letter-spacing:-.05em;line-height:1}
.privacy-lead{max-width:42ch;margin:0 0 var(--space-7);color:var(--color-muted);font-size:var(--type-body)}
.privacy-content section{padding:var(--space-4) 0;border-top:1px solid var(--color-border)}
.privacy-content h2{margin:0 0 var(--space-2);font-size:var(--type-section)}
.privacy-content section p{max-width:68ch;margin:0;color:var(--color-muted);font-size:var(--type-body);line-height:1.6}
.stats-strip{display:flex;margin-bottom:var(--space-7);padding:var(--space-4) 0;border-block:1px solid var(--color-border)}
.stats-strip div{flex:1;display:grid;gap:var(--space-1);padding-left:var(--space-4);border-right:1px solid var(--color-border)}
.stats-strip div:first-child{padding-left:0}.stats-strip div:last-child{border:0}
.stats-strip strong{font-size:var(--type-title)}
.stats-strip span{color:var(--color-muted);font-size:var(--type-ui)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-4)}
.section-head h2{margin:0;font-size:var(--type-title)}
.text-link{display:inline-block;margin-top:var(--space-2);color:var(--color-brick);font-size:var(--type-ui)}
.buy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.buy-card{min-width:0;overflow:hidden;background:var(--color-night);color:var(--color-on-night);animation:home-rise .45s both;animation-delay:calc(var(--i)*35ms)}
.cover-wrap{display:block;position:relative;overflow:hidden;aspect-ratio:1;background:var(--color-night-soft);color:#fff}
.cover-wrap img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .35s,opacity .2s}
.cover-wrap.cover-loading img{opacity:0}
.cover-skeleton{position:absolute;inset:0;z-index:2;background:var(--surface);animation:pulse 1.2s ease-in-out infinite alternate}
.cover-wrap:not(.cover-loading) .cover-skeleton{display:none}
.cover-wrap.cover-missing .cover-skeleton{display:none}
.cover-wrap:hover img,.cover-wrap:focus-visible img{transform:scale(1.06)}
.cover-placeholder{display:block;width:100%;height:100%;background:var(--surface)}
.pick-mark{position:absolute;z-index:3;top:var(--space-2);left:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--color-cream);color:var(--color-ink);font-size:var(--type-meta)}
.buy-info{padding:var(--space-3)}
.buy-info h3{margin:0 0 var(--space-1);font-size:var(--type-ui);line-height:1.25}
.artist{margin:0 0 var(--space-3);color:var(--color-on-night-muted);font-size:var(--type-ui)}
.reason{margin:0 0 var(--space-3);color:var(--color-on-night);font-size:var(--type-ui);line-height:1.45}
.price{color:var(--color-on-night);font-size:var(--type-section)}
.buy-info .micro{color:var(--color-on-night-muted);font-size:var(--type-meta)}
.below-grid{margin-top:var(--space-7);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.below-grid article{padding:var(--space-5);background:var(--color-cream-deep)}
.below-grid h3{margin:0;font-size:var(--type-section)}
.below-grid p,.home-no-picks{color:var(--color-muted);font-size:var(--type-body);line-height:1.5}
.home-no-picks{padding:var(--space-5);background:var(--color-cream-deep)}
.home-empty{min-height:calc(100vh - 80px);padding:var(--space-8) var(--space-5);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.home-empty h2{margin:0 0 var(--space-2);font-size:var(--type-display);line-height:1;letter-spacing:-.05em}
.home-empty .muted{max-width:42ch}
.empty-record{width:148px;height:148px;margin-bottom:var(--space-5);display:grid;place-items:center;border-radius:50%;background:var(--color-night)}
.empty-record:before{content:"";width:120px;height:120px;border-radius:50%;background:repeating-radial-gradient(circle,var(--color-ink) 0 2px,var(--color-night-soft) 3px 4px);animation:home-spin 14s linear infinite}
.empty-record span{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--color-brick);border:6px solid var(--color-cream)}
body.crate-home a:focus-visible,body.crate-home button:focus-visible{outline:3px solid var(--color-brick);outline-offset:3px;border-radius:var(--radius-sm)}
.home-empty .button:focus-visible{border-radius:var(--radius-pill)}
@keyframes home-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes home-spin{to{transform:rotate(360deg)}}
@keyframes dimension-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.dimension-row{grid-template-columns:1fr;gap:var(--space-6)}}
@media(max-width:760px){
  .topbar{min-height:72px;padding:var(--space-3) var(--space-4)}
  .nav-links{display:none}
  .hero{padding:var(--space-7) var(--space-5) var(--space-5);display:block;min-height:0}
  .hero h1{max-width:11ch}
  .sleeve-wall{height:clamp(260px,72vw,340px);padding:var(--space-3);gap:var(--space-2);margin-top:var(--space-5);transform:none}
  .wall-tile:nth-child(even){transform:translateY(var(--space-2))}
  .dimensions{padding:var(--space-7) var(--space-5)}
  .dimension-row{grid-template-columns:1fr;gap:var(--space-6)}
  .dimension-label{width:min(100%,280px)}
  .wall-proof{margin:var(--space-4) var(--space-5) var(--space-5);padding:var(--space-4);grid-template-columns:88px 1fr;gap:var(--space-3)}
  .find-cover{width:88px;grid-row:span 2}
  .wall-proof .find-fact{grid-column:1/-1}
  .how{padding:var(--space-7) var(--space-5)}
  .how .steps{grid-template-columns:1fr;gap:var(--space-5)}
  .steps h2{margin:var(--space-3) 0 var(--space-2)}
  .sign-in{padding:var(--space-7) var(--space-5);grid-template-columns:1fr;gap:var(--space-5)}
  .auth-actions{width:100%}
  .home-main{padding:var(--space-6) var(--space-4) var(--space-7)}
  .home-head{align-items:flex-start;flex-direction:column}
  .home-head h1{font-size:var(--type-page)}
  .home-head .dek{font-size:var(--type-body)}
  .stats-strip{display:grid;grid-template-columns:1fr 1fr;row-gap:var(--space-4);margin-bottom:var(--space-6)}
  .stats-strip div{padding-left:var(--space-3)}
  .stats-strip div:nth-child(odd){padding-left:0}.stats-strip div:nth-child(even){border:0}
  .section-head{align-items:flex-start;flex-direction:column}
  .buy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
  .buy-info{padding:var(--space-3)}
  .below-grid{grid-template-columns:1fr;margin-top:var(--space-5)}
  .landing footer,.home-page footer{padding:var(--space-4)}
  .privacy-content{padding:var(--space-7) var(--space-5) var(--space-8)}
  .privacy-lead{margin-bottom:var(--space-5)}
}
@media(max-width:1024px){.sleeve-wall{height:clamp(360px,58vw,500px);padding:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));transform:none}.wall-tile:nth-child(even){transform:none}.wall-tile figcaption{padding:var(--space-4) var(--space-2) var(--space-2)}}
@media(max-width:760px){.sleeve-wall{height:clamp(360px,112vw,440px);padding:var(--space-3)}.wall-tile figcaption{padding:12px 4px 4px;gap:1px;font-size:var(--type-meta);line-height:1.2}.wall-tile figcaption strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--type-meta);line-height:1.1}.wall-tile figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--type-meta)}}
@media(prefers-reduced-motion:reduce){.crate-home *,.crate-home *:before,.crate-home *:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}
.destinations a:focus-visible,.destinations button:focus-visible{outline:3px solid var(--color-brick);outline-offset:2px}
.buy-info .eyebrow{color:var(--color-on-night)}