/* Clips gallery (clips.jontyhood.com). Tokens lifted from jontyhood.com (landing.css). */
:root {
  --bg:#000; --fg:#fff; --fg-muted:#f3f3f3; --fg-faint:rgba(255,255,255,.55);
  --hairline:rgba(255,255,255,.5); --hairline-soft:rgba(255,255,255,.15); --hairline-faint:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.06); --accent:#00ff50; --accent-soft:rgba(0,255,80,.14); --nav-brand:rgb(249 247 243);
  --font-sans:'DM Sans', system-ui, sans-serif;
  --gutter:clamp(12px, 4vw, 64px);
  --ease:cubic-bezier(.25,1,.5,1); --blur:blur(20px) saturate(.8);
  --safe-top:env(safe-area-inset-top, 0px); --safe-bottom:env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { background:var(--bg); }
body { margin:0; min-height:100dvh; background:var(--bg); color:var(--fg); font-family:var(--font-sans); letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Header */
.top-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(14px + var(--safe-top)) var(--gutter) 14px; }
.nav-brand { display:inline-flex; align-items:center; min-height:44px; font-weight:800; font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--nav-brand); text-decoration:none; }
/* The full stop is a camera's recording light: red, slowly blinking */
.nav-brand .dot { display:inline-block; width:.3em; height:.3em; margin-left:.1em; transform:translateY(.29em); border-radius:50%;
  overflow:hidden; color:transparent; background:#ff2a2a; box-shadow:0 0 8px rgba(255,42,42,.7); animation:rec 2.4s ease-in-out infinite; }
@keyframes rec { 0%, 45% { opacity:1; } 60%, 85% { opacity:.15; } 100% { opacity:1; } }
.nav-meta { color:var(--fg-faint); font-size:.85rem; }
.intro { padding:clamp(4px,3vh,40px) var(--gutter) 0; max-width:1500px; margin:0 auto; }
h1 { margin:0; font-size:clamp(1.9rem,5vw,3.4rem); font-weight:500; letter-spacing:-.03em; line-height:1.05; }
.lede { margin:8px 0 0; color:var(--fg-faint); font-size:clamp(.9rem,1.1vw,1.02rem); line-height:1.45; }

/* Filters */
.filters { position:sticky; top:0; z-index:9; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding:calc(10px + var(--safe-top)) var(--gutter) 10px; margin-top:14px;
  background:rgba(0,0,0,.72); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.filters::-webkit-scrollbar { display:none; }
.pill { flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:999px; cursor:pointer;
  font-weight:500; font-size:.88rem; border:1.5px solid var(--hairline-soft); background:transparent; color:rgba(255,255,255,.88);
  transition:background .2s, color .2s, border-color .2s; }
.pill span { opacity:.55; font-variant-numeric:tabular-nums; }
.pill:hover { border-color:var(--hairline); }
.pill[aria-pressed="true"] { background:#fff; border-color:#fff; color:#0a0a0a; }

/* Grid */
main { max-width:1500px; margin:0 auto; padding:0 var(--gutter) 64px; }
.category { margin-top:28px; }
.category[hidden] { display:none; }
.category-title { display:flex; align-items:baseline; gap:10px; margin:0 0 12px; font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:500; letter-spacing:-.02em; }
.category-title span { font-size:.85rem; color:var(--fg-faint); letter-spacing:0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(28vw, 200px), 1fr)); gap:clamp(4px,1vw,16px); }
.tile { position:relative; display:block; aspect-ratio:9/16; overflow:hidden; border-radius:clamp(6px,.8vw,12px); background:#111;
  color:#fff; text-decoration:none; isolation:isolate; }
.tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.tile::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent, rgba(0,0,0,.75)); z-index:1; }
.tile:hover img { transform:scale(1.04); }
.tile-name { position:absolute; left:10px; right:10px; bottom:9px; z-index:2; font-weight:700; font-size:clamp(.95rem,1.4vw,1.15rem);
  line-height:1.1; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.tile-dur { position:absolute; top:8px; right:8px; z-index:2; padding:3px 7px; border-radius:6px; background:rgba(0,0,0,.55);
  font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums; }
footer { padding:0 var(--gutter) calc(40px + var(--safe-bottom)); color:var(--fg-faint); font-size:.8rem; text-align:center; }

/* Viewer: one clip per screen, swipe (or scroll, or arrow keys) between them */
body.viewing { overflow:hidden; }
.viewer { position:fixed; inset:0; z-index:50; background:#000; }
.viewer[hidden] { display:none; }
.track { position:absolute; inset:0; overflow-y:scroll; scroll-snap-type:y mandatory; overscroll-behavior:contain; scrollbar-width:none; }
.track::-webkit-scrollbar { display:none; }
.slide { position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; display:grid; place-items:center; }
.stage { position:absolute; inset:0; display:grid; place-items:center; isolation:isolate; }
.stage img, .stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.stage video { z-index:1; }
.ambient { display:none; }
.slide .paused-icon { position:absolute; z-index:3; width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,.45);
  display:grid; place-items:center; opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s; pointer-events:none; }
.slide.is-paused .paused-icon { opacity:1; transform:none; }
.hud { position:absolute; inset:auto 0 0; z-index:4; display:flex; align-items:flex-end; gap:12px;
  padding:60px max(14px, var(--gutter)) calc(20px + var(--safe-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.7));
  pointer-events:none; }
.hud > * { pointer-events:auto; }
.info { flex:1; min-width:0; }
.info strong { display:block; font-size:1.35rem; font-weight:700; line-height:1.1; }
.info span { display:block; margin-top:3px; color:rgba(255,255,255,.75); font-size:.85rem; }
.song-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:44px; margin-top:10px; padding:0 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); cursor:pointer; font-size:.85rem; font-weight:500;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.song-chip b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.song-chip.on { border-color:var(--accent); background:var(--accent-soft); }
.rail { display:flex; flex-direction:column; gap:14px; align-items:center; }
.rail button, .rail a { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:52px; padding:0; border:0;
  background:none; color:#fff; font-size:.72rem; font-weight:600; text-decoration:none; cursor:pointer; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.rail .ico { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,.2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); transition:background .2s; }
.rail button:hover .ico, .rail a:hover .ico { background:rgba(255,255,255,.15); }
.rail .on .ico { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.progress { position:absolute; left:0; right:0; bottom:0; z-index:5; height:3px; background:rgba(255,255,255,.15); }
.progress i { display:block; height:100%; width:0; background:#fff; }
.viewer-bar { position:absolute; inset:0 0 auto; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(10px + var(--safe-top)) max(12px, var(--gutter)) 24px; background:linear-gradient(rgba(0,0,0,.65), transparent); pointer-events:none; }
.viewer-bar > * { pointer-events:auto; }
.chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px 0 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; font-weight:500; font-size:.88rem; cursor:pointer;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.chip[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.auto-music b { font-weight:700; color:var(--fg-faint); }
.auto-music[aria-pressed="true"] b { color:var(--accent); }
.viewer-count { color:rgba(255,255,255,.75); font-size:.85rem; font-variant-numeric:tabular-nums; }
.bar-right { display:flex; align-items:center; gap:10px; }
.sound-tip { position:absolute; left:50%; top:50%; z-index:7; transform:translate(-50%,-50%); }
.sound-tip[hidden] { display:none; }
.swipe-tip { position:absolute; left:50%; bottom:calc(110px + var(--safe-bottom)); z-index:6; transform:translateX(-50%); padding:8px 14px;
  border-radius:999px; background:rgba(0,0,0,.6); font-size:.8rem; pointer-events:none; transition:opacity .4s; }
.swipe-tip.gone { opacity:0; }
.nav-arrows { position:absolute; right:max(14px, var(--gutter)); top:50%; z-index:6; display:none; flex-direction:column; gap:10px; transform:translateY(-50%); }
@media (hover:hover) and (pointer:fine) { .nav-arrows { display:flex; } .swipe-tip { display:none; } }
.nav-arrows button { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.4); color:#fff; cursor:pointer; }

/* Phones a little wider than 9:16 (most with the browser bars showing): fill the
   screen instead of leaving thin black side bars. Crops at most a few percent. */
@media (min-aspect-ratio: 9/17) and (max-aspect-ratio: 3/5) {
  .stage img, .stage video { object-fit:cover; }
}

/* Wide screens: the clip is a phone-shaped stage in the middle, with the
   caption on it and the action buttons just outside its right edge */
@media (min-aspect-ratio: 3/4) {
  .viewer { --sh:100dvh; }
  .stage { inset:auto; left:50%; top:50%; height:var(--sh); width:calc(var(--sh) * 9 / 16); transform:translate(-50%, -50%); }
  .hud { padding:60px 16px calc(20px + var(--safe-bottom)); }
  .rail { position:absolute; left:calc(100% + 14px); bottom:calc(20px + var(--safe-bottom)); }
}
/* ...and with room to spare (not a phone on its side), the stage is a phone: rounded
   screen, a bezel, and the clip's own colours blurred behind it */
@media (min-aspect-ratio: 3/4) and (min-height: 520px) {
  .viewer { --sh:min(calc(100dvh - 136px), 860px); }
  .stage::before { content:""; position:absolute; inset:-9px; z-index:-1; border-radius:42px; background:#0b0b0b;
    border:1px solid rgba(255,255,255,.16); box-shadow:0 40px 100px rgba(0,0,0,.55); }
  .stage img, .stage video { border-radius:33px; }
  .hud { padding:60px 18px 28px; border-radius:0 0 33px 33px; }
  .rail { left:calc(100% + 30px); bottom:28px; }
  .progress { left:22px; right:22px; bottom:12px; border-radius:2px; overflow:hidden; }
  .ambient { display:block; position:absolute; inset:-10%; width:120%; height:120%; object-fit:cover;
    filter:blur(50px) brightness(.38) saturate(1.3); }
}

/* Song sheet */
.sheet { position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.5); }
.sheet[hidden] { display:none; }
.sheet-panel { width:min(100%, 520px); max-height:78dvh; display:flex; flex-direction:column; border-radius:18px 18px 0 0;
  background:#141414; border:1px solid var(--hairline-faint); padding:8px 0 calc(8px + var(--safe-bottom)); animation:rise .25s var(--ease); }
@keyframes rise { from { transform:translateY(40px); opacity:0; } }
.sheet-panel::before { content:""; align-self:center; width:36px; height:4px; margin:2px 0 6px; border-radius:2px; background:var(--hairline-soft); }
.sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:6px 12px 12px 20px;
  border-bottom:1px solid var(--hairline-faint); }
.sheet-close { flex:none; min-height:44px; padding:0 14px; border:0; border-radius:999px; background:var(--glass); font-weight:600; cursor:pointer; }
.sheet-head h2 { margin:0; font-size:1.1rem; font-weight:600; }
.sheet-head p { margin:4px 0 0; color:var(--fg-faint); font-size:.85rem; }
.sheet ul { list-style:none; margin:0; padding:6px 0; overflow-y:auto; }
.sheet li button { width:100%; display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 20px; border:0; background:none;
  text-align:left; cursor:pointer; font-size:.95rem; line-height:1.3; }
.sheet li button:hover { background:var(--glass); }
.sheet li button span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sheet li button[aria-checked="true"] { color:var(--accent); }
.sheet li button[aria-checked="true"]::after { content:"✓"; margin-left:auto; }
.sheet li small { color:var(--fg-faint); }

@media (max-width:640px) {
  .nav-meta { display:none; }
  .top-nav { padding-bottom:4px; }
  .intro { padding-top:4px; }
  .filters { margin-top:8px; }
  .category { margin-top:18px; }
  .tile-name { left:7px; bottom:6px; font-size:.9rem; }
  .tile-dur { top:5px; right:5px; padding:2px 5px; font-size:.65rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }