/* Rare Earth Rock Shop - shared card CSS. Each card is 1050x600 CSS px (3.5x2 in @300dpi). NO borders or frames anywhere.
   Body text >= 38px (about 9 pt printed). Per-style look lives in styles/<id>/card.css and only sets variables + positions. */
.card{position:absolute;left:0;top:0;--b:0px;width:calc(1050px + 2*var(--b));height:calc(600px + 2*var(--b));overflow:hidden;
  --f-body:'Cormorant Garamond',Georgia,serif;--f-label:'Jost','Helvetica Neue',Arial,sans-serif;--f-title:var(--f-body);
  --ink:#222;--lab:#666;--acc:#888;--hair:rgba(0,0,0,.25);--bgc:#f4efde;--lc:200px;--ls:27px;--ts:128px;--grain:var(--grain-dark);
  font-family:var(--f-body);font-weight:500;font-size:40px;line-height:1.14;color:var(--ink);text-align:left;-webkit-font-smoothing:antialiased}
.card *{box-sizing:border-box}
.card .bg{position:absolute;inset:0;overflow:hidden}
.card .paper{position:absolute;inset:0;background:var(--bgc)}
.card .paper:after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.9}
.card .art{position:absolute;display:block;max-width:none}
.card .ph{position:absolute;overflow:visible;background:none}
.card .ph img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 12px rgba(0,0,0,.30))}
.card .ph.noph{display:grid;place-items:center;font:300 28px var(--f-label);color:#777;background:#d9d7cf}
.card .trim{position:absolute;left:var(--b);top:var(--b);width:1050px;height:600px}
.card .tx{position:absolute;left:45px;top:45px;width:650px}
.card h2,.card h3,.card p,.card ul{margin:0;padding:0;font-weight:inherit}
.card .title{font:400 var(--ts)/1.02 var(--f-title);white-space:nowrap;margin:0 0 12px;letter-spacing:-.005em}
/* ---- fields: reusable layout pieces ---- */
.card .fl{display:flex;flex-direction:column}
.card .fld{border-top:1px solid var(--hair)}
.card .fld.in{display:grid;grid-template-columns:var(--lc) 1fr;column-gap:14px;align-items:baseline;padding:6px 0 7px}
.card .fld.in .lb{white-space:nowrap;font:300 var(--ls)/1.2 var(--f-label);color:var(--lab);letter-spacing:.01em}
.card .fld.in.nolab .vl{grid-column:1/-1}
.card .fld.blk{padding:6px 0 8px}
.card .blk .lb{display:block;font:300 var(--ls)/1.2 var(--f-label);color:var(--lab);margin-bottom:2px}
.card .fl.g2{display:grid;grid-template-columns:1fr 1fr;column-gap:44px;row-gap:0}
.card .g2 .fld.in{display:block}.card .g2 .fld.in .lb{display:block;margin-bottom:1px}
.card .chips .cw{display:flex;flex-wrap:wrap;gap:6px 10px}
.card .chips .c{display:inline-block;border:1px solid var(--acc);border-radius:99px;padding:0 .6em 1px;line-height:1.25}
.card .boxf{border:1px solid var(--acc);padding:4px 14px 6px;margin:6px 0}
.card .namerow .vl{font-variant:small-caps;letter-spacing:.05em}
.card .namerow .vl span{white-space:nowrap}
.card .sep{display:inline-block;width:1px;height:.75em;background:var(--acc);margin:0 .55em;vertical-align:-.02em}
.card .lines .vl{line-height:1.12}
.card .dotl{display:flex;align-items:center;gap:14px}
.card .dot{width:26px;height:26px;border-radius:50%;background:var(--st);flex:none}
.card .cbar .dots{display:flex;align-items:center;gap:12px;margin-top:6px}
.card .cbar .dots i{display:block;width:18px;height:18px;border-radius:50%;opacity:.35}
.card .cbar .dots i.on{opacity:1;width:30px;height:30px}
.card .stripe{display:flex;align-items:center;gap:18px;text-transform:uppercase;letter-spacing:.3em;font:400 30px var(--f-label);color:var(--lab)}
.card .stripe:before,.card .stripe:after{content:"";flex:1;height:1px;background:var(--acc)}
.card .also i{font-style:italic;color:var(--lab)}
.card .meta h3{font:400 var(--ls)/1.2 var(--f-label);text-transform:uppercase;letter-spacing:.18em;color:var(--lab);margin-bottom:8px}
.card .meta .blurb,.card .meta li{font-size:38px;line-height:1.17}
.card .meta .blt li{list-style:none;position:relative;padding-left:26px;margin-bottom:6px}
.card .meta .blt li:before{content:"";position:absolute;left:2px;top:.6em;width:10px;height:1px;background:var(--acc);box-shadow:0 0 0 .5px var(--acc)}
.card .pq .q{font-size:44px;font-style:italic;line-height:1.12;margin-bottom:8px}
/* ---- back ---- */
.card .bk{position:absolute;left:45px;top:45px;width:960px;height:510px;display:flex;flex-direction:column}
.card .bt .fld:first-child{border-top:0;padding-top:0}
.card .th{font-style:italic;color:var(--lab);font-size:36px;margin-top:12px}
.card .brow{position:relative;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-top:1px solid var(--hair);padding-top:14px}
.card .lk .nm{font-size:44px;font-weight:600;line-height:1.05;letter-spacing:.005em}
.card .lk .wb{font-size:38px;line-height:1.2}
.card .lk .so{font:300 30px/1.3 var(--f-label);color:var(--lab)}
.card .qr{width:var(--q,100px);height:var(--q,100px);flex:none;border:1px solid var(--hair);display:grid;place-items:end center;font:400 26px/1 var(--f-label);padding-bottom:6px;color:var(--lab);letter-spacing:.1em}
