/* iOS system palette: neutral greys + one accent (systemBlue) */
:root {
  --bg:#f2f2f7; --card:#fff; --fill:rgba(60,60,67,.12);
  --label:#000; --label2:rgba(60,60,67,.6);
  --accent:#007aff;   --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --gutter:max(24px, calc((100vw - 1000px) / 2));
  --ease:cubic-bezier(.32,.72,0,1);
}
@media (prefers-color-scheme:dark) {
  :root { --bg:#000; --card:#1c1c1e; --fill:rgba(235,235,245,.16);
    --label:#fff; --label2:rgba(235,235,245,.6);
    --accent:#0a84ff; --shadow:none; }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { color-scheme:light dark; }
body { margin:0; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg); color:var(--label); -webkit-font-smoothing:antialiased;
  font:400 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }

header { padding:clamp(28px, 8dvh, 88px) var(--gutter) 0; }
h1 { margin:0; font-size:clamp(40px, 7vw, 56px); font-weight:700; letter-spacing:-.03em; line-height:1.05; }
#tagline { margin:8px 0 0; font-size:17px; color:var(--label2); }

.carousel { --h:min(50dvh, 420px); --cw:min(calc(var(--h) * .8), 80vw);
  position:relative; flex:1; min-height:0; display:flex; align-items:center; width:100%;
  max-width:calc(var(--gutter) + 3 * var(--cw) + 96px); overflow:hidden; }
.track { position:relative; width:100%; display:flex; gap:16px; padding:8px calc(100% - var(--cw) - var(--gutter)) 8px var(--gutter);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.track.fits { padding-right:var(--gutter); -webkit-mask-image:none; mask-image:none; }
.track::-webkit-scrollbar { display:none; }

.card { flex:none; scroll-snap-align:start; display:flex; flex-direction:column;
  width:var(--cw); aspect-ratio:4 / 5; padding:24px; border-radius:24px;
  background:var(--card); box-shadow:0 0 0 1px var(--fill); color:inherit; text-decoration:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease), box-shadow .3s; }
.card:not(.active) { opacity:.72; }
.card:active { transform:scale(.98); }
.card:hover { box-shadow:0 0 0 1px var(--label2); }
.card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.top { display:flex; justify-content:space-between; align-items:center; color:var(--label2); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.arrow svg { display:block; width:22px; height:22px; transition:transform .3s var(--ease), color .2s; }
.card:hover .arrow svg { transform:translate(2px,-2px); color:var(--accent); }
.art { flex:1; min-height:0; width:100%; margin:8px 0; color:var(--label2); opacity:.75; transition:color .3s, opacity .3s; }
.card:hover .art { color:var(--label); opacity:1; }
.txt { display:flex; flex-direction:column; gap:6px; }
.card strong { font-size:28px; font-weight:600; letter-spacing:-.025em; line-height:1.1; }
.card small { font-size:15px; color:var(--label2); }
.host { margin-top:20px; padding-top:16px; border-top:1px solid var(--fill); font-size:13px; color:var(--label2); }

.pager { display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:12px; }
.nav { width:32px; height:32px; padding:0 0 2px; border:0; border-radius:50%; background:var(--fill); color:var(--label);
  font-size:20px; line-height:1; cursor:pointer; transition:opacity .2s; }
.nav[hidden] { display:none; }
.nav:disabled { opacity:.3; cursor:default; }
@media (hover:none) { .nav { display:none; } }

.dots { display:flex; justify-content:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--fill); }
.dots[hidden] { display:none; }
.dots button { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:var(--label2); opacity:.45; cursor:pointer; transition:opacity .2s, transform .2s; }
.dots button[aria-selected="true"] { opacity:1; background:var(--label); transform:scale(1.15); }

footer { padding:0 var(--gutter) 20px; text-align:center; font-size:12px; color:var(--label2); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }