/* The collection leads; the shell provides a quieter frame. */
/* The ground tokens this file used to re-declare are plate-identity.css's. */
.shell{width:min(1456px,calc(100% - 64px))}
.intro h1{letter-spacing:-.045em}
.intro h1 span{color:#a6a7ac}
.toolbar{position:sticky;top:72px;z-index:2;background:rgba(14,15,17,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(15px)}
.search-wrap{border-color:#303237;background:#17181b}
/* No uniform border here: the frame is a soft edge (a one-pixel inner highlight, from
   library.css) plus the gentle lift on hover -- the preview playback is the only other
   change a hover makes. */
.creation{animation-duration:.28s}
dialog{border-color:#33343780;box-shadow:0 40px 120px #0009}
dialog::backdrop{background:#04050682;backdrop-filter:blur(26px)}
::view-transition-group(plate-project-preview){animation-duration:340ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(plate-project-preview),::view-transition-new(plate-project-preview){height:100%;object-fit:cover}
::view-transition-group(root){animation-duration:180ms}
.detail-stage{position:relative}
.detail-playback-toggle{position:absolute;right:34px;bottom:34px;z-index:2;padding:9px 15px;border-radius:24px;background:rgba(16,17,19,.9);border:1px solid #ffffff36;color:var(--text);font:600 11px/1 "Courier New",monospace;letter-spacing:.03em}
.detail-playback-toggle:hover{background:var(--accent);color:var(--bg)}
.detail-media-note{position:absolute;left:0;right:0;bottom:0;margin:0;padding:14px 20px;text-align:center;font-size:12px;color:var(--muted);background:linear-gradient(to top,#070708e6,#07070800)}
.how,.pricing,.faq{margin-top:10px}
/* Same curated two-project spread as the homepage's own collection (home-brand.css),
   applied here so library.html reads with the same rhythm on the default, unfiltered view. */
@media(min-width:1380px){
  .grid.is-curated{grid-template-columns:repeat(12,minmax(0,1fr))}
  .grid.is-curated>.creation{grid-column:span 4}
  .grid.is-curated>.creation:nth-child(1){grid-column:span 8}
  .grid.is-curated>.creation:nth-child(2){grid-column:span 4}
  .grid.is-curated>.creation:nth-child(1) .art{aspect-ratio:16/9}
  .grid.is-curated>.creation:nth-child(2) .art{aspect-ratio:4/5}
}
@media(min-width:1600px){.nav{padding-inline:max(32px,calc((100vw - 1456px)/2))}}
@media(max-width:700px){.shell{width:calc(100% - 32px)}.nav{height:64px;padding-inline:16px}.toolbar{top:64px}.art{border-radius:12px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* The display face on this page's own headings. The grid, the toolbar and the
   detail dialog are chapter 02's, from home-brand.css, shared with the homepage
   verbatim; these three headings are the library page's own and had been set in
   the text face at a tracking tuned for it. */
.plate-home .intro h1 { font-family: var(--display); font-weight: 600; letter-spacing: -.022em; line-height: 1.06; font-size: clamp(32px, 3.6vw, 50px); color: var(--ink); }
.plate-home .intro h1 span { color: var(--muted); }
.plate-home .how h2, .plate-home .pricing h2, .plate-home .faq h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.018em; line-height: 1.12; font-size: clamp(26px, 2.9vw, 40px); color: var(--ink); }
.plate-home .how h3, .plate-home .price-heading h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.012em; }
.plate-home .eyebrow { font: 700 clamp(10px, .8vw, 11.5px)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
/* The cut edge is the edge: the same decision the apertures and the cards make. */
.plate-home .price-card { border-radius: 0; background: var(--panel); }
.plate-home .price-card.pro { background: #16120e; border-color: #4a3a2a; }
.plate-home .price-card li:before { color: var(--orange); }
.plate-home .search-wrap, .plate-home .filters button { border-radius: 0; }