.music-credit-card { flex:0 0 178px; overflow:hidden; border:1px solid var(--line); border-radius:17px; background:var(--card); scroll-snap-align:start; }
.music-credit-card img,.credit-placeholder { width:100%; height:152px; display:block; object-fit:cover; background:#e8eee4; }
.credit-placeholder { display:grid; place-items:center; color:var(--green); font:700 11px/1.45 ui-monospace,SFMono-Regular,monospace; text-align:center; letter-spacing:.08em; }
.music-credit-card > div { padding:12px 14px 15px; }
.music-credit-card span { color:var(--green); font-size:10px; font-weight:700; letter-spacing:.08em; }
.music-credit-card h5 { margin:6px 0 3px; font-size:17px; letter-spacing:-.03em; }
.music-credit-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
@media(max-width:560px) { .music-credit-card { flex-basis:156px; }.music-credit-card img,.credit-placeholder { height:134px; } }
.brand-grid.brand-single { grid-template-columns:repeat(5,minmax(0,1fr)); }
.sport-brands { margin-top:24px; }.sport-brands > .number { display:block; margin-bottom:13px; }
@media(max-width:900px) { .brand-grid.brand-single { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { .brand-grid.brand-single { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Screen favourites use the same hand-draggable, automatic shelf as books and music. */
.screen-grid.screen-rail {
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 16px;
  margin:0 -2px;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.screen-grid.screen-rail .screen-card {
  flex:0 0 230px;
  min-height:325px;
  scroll-snap-align:start;
}
@media(max-width:560px) {
  .screen-grid.screen-rail .screen-card { flex-basis:185px; min-height:265px; }
}

/* Author cards are a reading shelf too: one row, drag or wait for the movement. */
.author-strip {
  display:flex!important;
  flex-wrap:nowrap;
  gap:16px;
  overflow-x:auto;
  padding:2px 2px 16px;
  margin:0 -2px;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.author-strip .author-card {
  flex:0 0 220px;
  min-width:220px;
  scroll-snap-align:start;
}
@media(max-width:560px) {
  .author-strip .author-card { flex-basis:175px; min-width:175px; }
}

/* Three players stay in one static row; brand marks live behind them, not as a list. */
.badminton-stage { position:relative; isolation:isolate; padding:18px 12px; overflow:hidden; border-radius:24px; background:linear-gradient(135deg,rgba(236,246,230,.9),rgba(255,255,255,.88)); }
.badminton-stage .athlete-row { position:relative; z-index:1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.badminton-mark { position:absolute; z-index:0; width:180px; height:auto; opacity:.11; pointer-events:none; filter:grayscale(1); }
.mark-yonex { top:11px; left:-22px; transform:rotate(-12deg); }.mark-victor { right:-31px; top:41%; transform:rotate(9deg); }.mark-lining { bottom:-2px; left:29%; transform:rotate(-4deg); }
@media(max-width:560px) {
  .badminton-stage { padding:12px 7px; }.badminton-stage .athlete-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.badminton-mark { width:112px; }
}

/* The three badminton players remain a compact, fixed row rather than a rail. */
#interest-badminton .athlete-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#interest-badminton .athlete-card img { height:190px; }
#interest-badminton .athlete-card > div { padding:16px; }
#interest-badminton .athlete-card h4 { font-size:20px; }
@media(max-width:560px) {
  #interest-badminton .athlete-list { gap:7px; }
  #interest-badminton .athlete-card img { height:116px; }
  #interest-badminton .athlete-card > div { padding:10px 8px 12px; }
  #interest-badminton .athlete-card h4 { font-size:15px; margin:6px 0 3px; }
  #interest-badminton .athlete-card p,#interest-badminton .athlete-card .number { font-size:9px; }
}

/* Infinite, centre-focused carousel treatment for every hand-draggable display rail. */
.carousel-shell { position:relative; isolation:isolate; }
.focus-carousel {
  scroll-behavior:auto;
  scroll-snap-type:none!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none;
  padding-left:18%;
  padding-right:18%;
  mask-image:linear-gradient(90deg,transparent 0,black 9%,black 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,black 9%,black 91%,transparent 100%);
}
.focus-carousel::-webkit-scrollbar { display:none; }
.focus-carousel > * {
  transform:scale(.87);
  filter:blur(1.35px) saturate(.7);
  opacity:.58;
  transition:transform .42s cubic-bezier(.2,.85,.3,1),filter .42s ease,opacity .42s ease;
  will-change:transform,filter,opacity;
}
.focus-carousel > *.is-focus { transform:scale(1); filter:none; opacity:1; z-index:2; }
.focus-carousel > *.is-dim { transform:scale(.83); filter:blur(2.2px) saturate(.55); opacity:.38; }
.carousel-button {
  position:absolute;
  z-index:5;
  top:50%;
  width:43px;
  height:43px;
  border:1px solid rgba(255,255,255,.54);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:rgba(250,253,248,.55);
  box-shadow:0 8px 24px rgba(17,38,24,.15);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  cursor:pointer;
  font-size:21px;
  line-height:1;
  transform:translateY(-50%);
  transition:background .2s,transform .2s,opacity .2s;
}
.carousel-button:hover { background:rgba(255,255,255,.9); transform:translateY(-50%) scale(1.07); }
.carousel-button:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.carousel-prev { left:10px; }.carousel-next { right:10px; }
html[data-theme="dark"] .carousel-button { border-color:rgba(255,255,255,.18); color:#edf7ed; background:rgba(20,35,25,.56); }
html[data-theme="dark"] .carousel-button:hover { background:rgba(37,62,44,.9); }
@media(max-width:560px) {
  .focus-carousel { padding-left:15%; padding-right:15%; }
  .carousel-button { width:35px; height:35px; font-size:17px; }
  .carousel-prev { left:3px; }.carousel-next { right:3px; }
}
@media(prefers-reduced-motion:reduce) {
  .focus-carousel > *,.carousel-button { transition:none; }
}

/* Credits use the same three-up rhythm as singers; records and books form a five-up gallery. */
@media(min-width:761px) {
  .music-category.credits .focus-carousel { padding-left:9%; padding-right:9%; }
  .music-category.credits .music-credit-card { flex:0 0 calc((100% - 32px) / 3); }
  .focus-carousel[data-focus-count="3"] { padding-left:8%; padding-right:8%; }
  .music-category.albums .album-card,
  .bookshelf .book-card { flex:0 0 calc((100% - 60px) / 5); min-width:0; }
  .music-category.albums .album-card img { height:auto; aspect-ratio:1; }
  .bookshelf .book-card img { height:auto; aspect-ratio:3/4; }
}
.bookshelf .book-card > p { display:flex; flex-direction:column; gap:4px; }
.bookshelf .book-card > p b { font-size:12px; }
.pen-collection {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 22px;
  align-items:center;
  margin-top:22px;
  padding:24px;
  border:1px dashed #bdcfbb;
  border-radius:22px;
  background:linear-gradient(135deg,#edf5e8,#fff);
}
.pen-collection > .number { grid-column:1/-1; }
.pen-collection-art { width:88px; height:88px; display:grid; place-items:center; border-radius:20px; color:var(--green); background:linear-gradient(145deg,#dbead4,#f9fcf6); font-size:31px; }
.pen-collection h4 { margin:0 0 7px; font-size:23px; letter-spacing:-.04em; }
.pen-collection p { margin:0 0 12px; color:var(--muted); font-size:14px; }
html[data-theme="dark"] .pen-collection { background:linear-gradient(135deg,#17271d,#101813); }
@media(max-width:560px) {
  .pen-collection { grid-template-columns:66px 1fr; gap:10px 14px; padding:18px; }
  .pen-collection-art { width:66px; height:66px; border-radius:16px; }
  .pen-collection h4 { font-size:19px; }
  .pen-collection p { font-size:12px; }
}