/* ===== The Paths and Library pages: heading, filter row, image-led grid ===== */
.pgh{max-width:120rem;margin:auto;padding:clamp(6.5rem,11vw,9.5rem) clamp(1rem,3vw,2rem) 0}
.pgh h1{font:700 clamp(3rem,8vw,7.5rem)/.95 Archivo,Arial,sans-serif;letter-spacing:-.01em;margin:0 0 1.1rem}
.pgh p{max-width:36rem;font-size:1.05rem;line-height:1.6}
.filt{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:1.8rem 0 2rem}
.filt button{background:none;border:0;color:inherit;font:inherit;font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;padding:.25rem 1rem;border-left:1px solid var(--accent);cursor:pointer;opacity:.75}
.filt li:first-child button{padding-left:0;border-left:0}
.filt button:hover,.filt button:focus-visible{opacity:1}
.filt button[aria-pressed=true]{font-weight:700;opacity:1;text-decoration:underline;text-underline-offset:.4em}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem .9rem;max-width:120rem;margin:auto;padding:0 clamp(1rem,3vw,2rem) clamp(3rem,8vw,6rem)}
.card{color:inherit}
.card[hidden]{display:none}
.card.lo{margin-top:2.4rem}
.card .ph{aspect-ratio:4/5}
.lib .card .ph{aspect-ratio:3/4}
.card .im{background-image:repeating-linear-gradient(155deg,rgba(255,255,255,.06) 0 2px,transparent 2px 18px),linear-gradient(var(--a,155deg),var(--c1,#1a2c63),var(--c2,#0a1226))}
.card:nth-child(2) .im{--a:205deg;--c1:#2b2466}
.card:nth-child(3) .im{--c1:#243b73;--c2:#101820}
.card:nth-child(4) .im{--a:205deg;--c1:#101820;--c2:#26306b}
.card:nth-child(5) .im{--c1:#3a2f78}
.card:nth-child(6) .im{--a:205deg;--c2:#151a2e}
.card:nth-child(7) .im{--c1:#2c4390;--c2:#101820}
.card:nth-child(8) .im{--a:205deg;--c1:#1c1c1c;--c2:#0a0a0a}
.ct{padding-top:.9rem}
.ct .no{display:block;font-size:.72rem;letter-spacing:.1em;opacity:.7;margin-bottom:.3rem}
.ct h3{font:700 clamp(1.05rem,4.4vw,1.5rem)/1.1 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:0 0 .4rem}
.ct p{font-size:.88rem;line-height:1.5;max-width:30rem;margin:0}
.soon{display:inline-block;margin-top:.7rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.age{border:1px solid currentColor;border-radius:999px;padding:.05rem .45rem;margin-right:.5rem}
.buyrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.9rem;flex-wrap:wrap}
.price{font-size:1rem}
.pill{background:transparent;color:inherit;border:2px solid currentColor;border-radius:999px;padding:.55rem 1.1rem;font:inherit;font-size:.85rem;cursor:pointer}
.pill:hover,.pill:focus-visible{background:var(--ink);color:var(--bg)}
.pill:disabled{opacity:.55;cursor:default;background:transparent;color:inherit}
.biglogo{display:flex;justify-content:center;padding:clamp(2rem,6vw,5rem) 1rem clamp(3rem,8vw,6rem)}
.biglogo .lgo{--lh:clamp(7rem,30vw,15rem)}

@media (min-width:900px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.2rem clamp(1.5rem,4vw,4.8rem)}
  .card.lo{margin-top:clamp(2.5rem,6vw,6rem)}
  .ct{padding-top:1.1rem}
  .ct h3{font-size:clamp(1.2rem,1.7vw,1.8rem)}
  .ct p{font-size:1rem}
  .filt button{font-size:1.15rem;padding-inline:1.4rem}
  .lib .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3rem clamp(1.2rem,2.4vw,2.8rem)}
  .biglogo .lgo{--lh:clamp(12rem,18vw,22rem)}
}
.lib .card{display:flex;flex-direction:column}
.lib .ct{flex:1;display:flex;flex-direction:column}
.lib .buyrow{margin-top:auto;padding-top:.9rem}