/* lou21 shirts: two link cards under Choose your copy. Uses only the tokens of style.css, no scripts. */
#shirts{scroll-margin-top:16px}
.shirts-by{margin:-4px 0 16px}
.shirt{display:grid;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.shirt+.shirt{margin-top:12px}
.shirt-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:12px}
.shirt h3{font-size:21px;line-height:1.2;margin:0 0 8px}
.shirt .shirt-d{font-size:16px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.shirt .btn{margin:0}
.shirt-note{font:400 13px/1.4 var(--mono);color:var(--muted);text-align:center;margin:8px 0 0}
@media(min-width:560px){.shirt{grid-template-columns:200px minmax(0,1fr);align-items:center;gap:22px}}
/* header chip next to Open my book */
.topnav .pill.chip{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;background:rgba(0,0,0,.6)}
/* on a phone the chip sits on its own line under Open my book: one row cannot hold logo, flag and two pills in three languages */
@media(max-width:560px){
  .topnav .brand{flex:none;align-self:flex-start;margin-top:10px}
  .topnav .navr{display:grid;grid-template-columns:auto auto;justify-content:end;justify-items:end;align-items:center;gap:8px}
  .topnav #langSlot{grid-row:1;grid-column:1}
  .topnav #libBtn{grid-row:1;grid-column:2}
  .topnav .pill.chip{grid-row:2;grid-column:1/3;justify-self:end}
}
/* footer: the way to ludvaklatovsky.com is a real button, not a grey line */
.foot .foot-road{display:block;min-height:48px;margin:12px 0;padding:12px 16px;border:1.5px solid color-mix(in srgb,var(--blue) 55%,transparent);border-radius:12px;color:var(--link);font:600 15px/1.35 var(--text);text-align:center;text-decoration:none}
.foot .foot-road::after{content:" \203A"}
.foot .foot-road:focus-visible,.foot a:focus-visible,#shirts .btn:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.foot a:not(.foot-road){display:inline-block;padding:8px 2px}