/* /sets/ — the set library. Pairs with /stylesheet.css.
⛔ THE BAND SYSTEM IS NOT IN THE SHARED STYLESHEET — each banded page carries its own copy.
These rules mirror the homepage's and the hub's exactly (same two navies, same parchment, same
3.1rem rhythm, same thin gold seam) so the three pages read as one site. If you change the palette,
change all three.
⛔ The sketch wallpaper used to live on `body` in stylesheet.css; as of 2026-10-15 the canvas is
flat navy site-wide, so the `body` rule below is now belt-and-braces rather than load-bearing. */
body{background-color:#131A2E;background-image:none !important;background-attachment:scroll}
.band{width:100%;padding:3.1rem 0}
.band--navy{background:#131A2E}
.band--navy-2{background:#1A2340}
.band--parchment{background:#F8F3E7;--text-faint:#726d64}
.band--parchment + .band--navy,.band--navy + .band--parchment,
.band--parchment + .band--navy-2,.band--navy-2 + .band--parchment{
border-top:1px solid rgba(184,134,11,.28)}
.lib-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 1.5rem}
/* ---- band 1: the hero --------------------------------------------------------
⏳ NO ARTWORK YET. The postcard illustration goes here when [Caleb] has picked it, at which point
this band becomes the hub's shape (full-bleed `background:url(...) left bottom/cover`, copy straight
on the art, credit line moved into the NEXT band, and the nav switching to the overlay treatment the
hub uses). The copy below is deliberately simple so that swap touches only this rule. */
.lib-hero-inner{max-width:760px}
.lib-eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;color:#E8C46A;margin:0 0 .55rem}
.lib-title{font-family:'Space Grotesk',sans-serif;font-size:3rem;line-height:1.04;font-weight:700;
letter-spacing:-.025em;color:#F8F3E7;margin:0 0 .7rem}
.lib-lede{color:#A9A396;font-size:1.02rem;line-height:1.65;margin:0;max-width:700px}
.lib-lede a{color:#E8C46A;font-weight:600}
/* ---- band 2: the filters + the pack grid ------------------------------------ */
.lib-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.8rem}
.lib-fbtn{background:#fff;border:1px solid var(--card-border);border-radius:999px;padding:.5rem 1rem;
cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:#5a5348}
.lib-fbtn:hover{border-color:var(--gold-border);background:var(--gold-soft);color:#7a5c14}
.lib-fbtn.sel{background:#131A2E;border-color:#131A2E;color:#fff}
/* ⭐ THE 3D IS CSS, and it is the whole reason the reference's packs look dimensional — measured off
their own served stylesheet (2026-10-15): a `perspective` container plus a hover tilt. Theirs uses
`box-shadow` on the ![]()
, which draws a RECTANGLE behind a transparent pack. `filter:drop-shadow`
follows the alpha channel instead, so ours is a pack-shaped shadow. */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
gap:1.9rem 1.15rem;perspective:1000px;margin:0}
.lib-tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;text-align:center}
/* ⛔ THE TILE SIZES BY WIDTH, SO A NARROWER PACK RENDERS TALLER (fixed 2026-10-28). The 1996 Japanese
pack's crop is 0.514 wide-over-tall against ~0.59 for the English packs, so `width:100%` drew it
visibly BIGGER than its neighbours. Packs are now capped to one rendered height and stand on a
common baseline, which is also how a shelf of packs should line up. */
.lib-shot{display:flex;align-items:flex-end;justify-content:center;width:100%;height:188px}
.lib-shot img{width:auto;height:100%;max-width:100%;display:block;
transition:transform .4s ease,filter .3s ease;transform-origin:50% 100%}
.lib-tile:hover .lib-shot img,.lib-tile:focus-visible .lib-shot img{
transform:rotateY(5deg) rotateX(10deg) scale(1.03);
filter:drop-shadow(0 14px 20px rgba(35,28,14,.42))}
.lib-name{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#171513;
line-height:1.25;margin:.75rem 0 0}
.lib-meta{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.03em;
color:#6b665f;margin:.24rem 0 0;line-height:1.5}
.lib-tile:hover .lib-name{color:#7a5c14}
.lib-live{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:#1d6b3a;margin:.3rem 0 0}
/* ---- the promo trio: no booster pack exists for these, so the tile says so rather than
pretending, and keeps the grid's rhythm at the same aspect as a pack. ---------- */
.lib-nopack{display:flex;flex-direction:column;align-items:center;justify-content:center;
aspect-ratio:390/640;border-radius:var(--radius-md);background:#131A2E;
border:1px solid #2c3560;padding:1rem;gap:.5rem;transition:transform .4s ease,box-shadow .3s ease}
.lib-tile:hover .lib-nopack{transform:rotateY(5deg) rotateX(10deg) scale(1.03);
box-shadow:0 14px 20px rgba(35,28,14,.34)}
.lib-nopack b{font-family:'Space Grotesk',sans-serif;font-size:1.02rem;color:#F8F3E7;
line-height:1.25;font-weight:700}
.lib-nopack span{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.05em;
text-transform:uppercase;color:#E8C46A}
.lib-nopack i{font-style:normal;font-size:.72rem;color:#A9A396;line-height:1.45}
/* ---- the tile is one anchor: a second inside it would close the outer one early ---------- */
.lib-tile{position:relative}
.lib-tile .lib-name:after{content:"";position:absolute;inset:0}
.lib-cta{margin:2.4rem 0 0;text-align:center}
.lib-btn{display:inline-flex;align-items:center;padding:.75rem 1.3rem;border-radius:var(--radius-sm);
border:1px solid rgba(237,241,248,.42);color:#EDF1F8;background:transparent;font-weight:600;
text-decoration:none}
.lib-btn:hover{border-color:#E8C46A;color:#E8C46A}
.lib-note{color:#A9A396;font-size:.86rem;line-height:1.7;max-width:760px;margin:1.1rem auto 0;
text-align:center}
.lib-note a{color:#E8C46A;font-weight:600}
@media (max-width:760px){
.lib-title{font-size:2.2rem}
.lib-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:1.5rem .9rem}
}