/* =====================================================================
   The site around the products.

   Loaded after assets/product.css, which already holds the type, the
   colours, the site bar, the buttons, the writing blocks, the photo
   bands and the foot. This file adds what only the rooms need:

     .panel   a full-width photograph with the name standing at the top
              of it and two links underneath, the way a hardware
              maker's front page introduces each product in turn
     .pair    two of those side by side
     .shelf   the App Store's tiles
     .ytp     the YouTube playlist player on the home page
     .sfoot   the large footer with the whole site in columns
   ===================================================================== */

/* ---------- the site bar, with more rooms in it ---------- */
.gnav nav{gap:22px}
.gnav .social{display:flex;gap:12px;margin-left:16px}
.gnav .social a{color:#bdbdc2;display:inline-flex}
.gnav .social a:hover{color:#fff}
.gnav .social svg{width:16px;height:16px;fill:currentColor}
@media (max-width:980px){ .gnav .social{display:none} }

/* the bar on a phone: the rooms scroll sideways under the brand */
.gnav-rooms{display:none}
@media (max-width:760px){
  .gnav-rooms{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut);
    background:#000;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px}
  .gnav-rooms::-webkit-scrollbar{display:none}
  .gnav-rooms a{color:#bdbdc2;text-decoration:none;white-space:nowrap}
  .gnav-rooms a[aria-current]{color:#fff}
}

/* ---------- a product, edge to edge ---------- */
.panel{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:#000;
  min-height:clamp(560px,86vh,940px);margin:0 0 4px}
.panel > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
.panel.low::after{background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 72%)}
.panel .in{position:relative;z-index:1;text-align:center;padding:clamp(48px,9vh,96px) var(--gut) 0;max-width:900px;margin:0 auto}
.panel.low{display:flex;align-items:flex-end}
.panel.low .in{padding:0 var(--gut) clamp(40px,8vh,80px)}
.panel .kick{font-size:15px;font-weight:600;color:var(--k,var(--accent));margin:0 auto 10px;text-shadow:0 0 6px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6)}
.panel h2{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.panel h2{font-weight:300;font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.035em;margin:0 0 14px}
.panel p{font-size:clamp(18px,1.8vw,23px);line-height:1.35;color:#e8e8ed;margin:0 auto 20px;max-width:34ch;
  text-shadow:0 1px 24px rgba(0,0,0,.5)}
.panel .links{display:flex;gap:10px 28px;justify-content:center;flex-wrap:wrap}
.panel .links span,.pair .links span{color:var(--k,var(--accent));font-size:18px}
.panel .links span::after,.pair .links span::after{content:" \203A"}
.panel:hover > img,.pair a:hover > img{transform:scale(1.025)}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 4px}
.pair a{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:#000;
  min-height:clamp(480px,70vh,760px)}
.pair a > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.pair a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.35) 32%,rgba(0,0,0,0) 58%)}
.pair .in{position:relative;z-index:1;text-align:center;padding:clamp(40px,7vh,72px) var(--gut) 0}
.pair .kick{font-size:14px;font-weight:500;color:var(--k,var(--accent));margin:0 auto 8px;text-shadow:0 0 6px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.85)}
.pair h2{font-weight:300;font-size:clamp(34px,4.2vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0 0 12px}
.pair p{font-size:clamp(16px,1.4vw,19px);color:#e8e8ed;margin:0 auto 16px;max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.pair .links{display:flex;gap:8px 24px;justify-content:center;flex-wrap:wrap}
.pair .links span{font-size:16.5px}
@media (max-width:820px){
  .pair{grid-template-columns:1fr}
  .panel{min-height:clamp(520px,92vh,760px)}
}

/* ---------- a section heading on its own ---------- */
.room-h{text-align:center;padding:clamp(72px,12vh,128px) var(--gut) clamp(28px,4vh,44px);max-width:900px;margin:0 auto}
.room-h .kick{font-size:15px;font-weight:500;color:var(--accent);margin:0 0 12px}
.room-h h1,.room-h h2{font-weight:300;font-size:clamp(40px,6vw,80px);line-height:1.02;letter-spacing:-.035em;margin:0 0 18px}
.room-h p{color:var(--muted);font-size:clamp(17px,1.5vw,20px);max-width:62ch;margin:0 auto}

/* ---------- the App Store's shelf ---------- */
.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);
  max-width:1280px;margin:0 auto;padding:0 var(--gut) clamp(56px,9vh,104px)}
.shelf .app{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:#0d0d0f;border-radius:18px;overflow:hidden;outline:1px solid rgba(255,255,255,.07);outline-offset:-1px;
  transition:transform .4s var(--ease),outline-color .3s}
.shelf .app:hover{transform:translateY(-4px);outline-color:rgba(255,255,255,.18)}
.shelf .app.nolink{cursor:default}
.shelf .app.nolink:hover{transform:none}
.shelf .app-shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.shelf .app-shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.shelf .app:hover .app-shot img{transform:scale(1.04)}
.shelf .app-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(13,13,15,.9))}
.shelf .soon{position:absolute;left:14px;top:14px;z-index:2}
.shelf .soon span{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.02em;padding:6px 11px;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.shelf .app-body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.shelf .app-id{display:flex;align-items:center;gap:10px}
.shelf .app-id img,.shelf .app-id .mark{width:30px;height:30px;border-radius:8px;flex:none;object-fit:cover}
.shelf .app-name{font-weight:500;font-size:22px;letter-spacing:-.015em;margin:0}
.shelf .app-note{color:var(--muted);font-size:15px;line-height:1.5;margin:0}
.shelf .app-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.shelf .app-price{margin:0;font-size:16px;display:flex;align-items:baseline;gap:8px}
.shelf .app-price:empty{display:none}
.shelf .app-price b{font-weight:500}
.shelf .app-price s{color:var(--dim);font-size:14px}
.shelf .app-price .save{font-size:12px;font-weight:600;color:#ff6b7a}
.shelf .app-price .free,.shelf .app-price .pwyw{font-weight:500}
.shelf .app-plats{margin:0;display:flex;gap:6px}
.shelf .app-plats .app-plat{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:11.5px;color:var(--muted);padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.shelf .app-go{margin:0 0 0 auto;color:var(--k,var(--accent));font-size:15px}
.shelf .app-go:empty{display:none}
.shelf .app.wide{grid-column:span 2}
.shelf .app.wide .app-shot{aspect-ratio:16/7.2}
@media (max-width:1000px){ .shelf{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .shelf{grid-template-columns:1fr} .shelf .app.wide{grid-column:auto} }

/* the signed-in note above the shelf */
.mine{display:none;max-width:1280px;margin:0 auto 18px;padding:0 var(--gut);font-size:15px;color:var(--muted)}
.mine.sa-on{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.mine b{color:var(--text);font-weight:500}
.mine a{color:var(--accent);text-decoration:none}
[data-sale-banner]:empty{display:none}
[data-sale-banner]{max-width:1280px;margin:0 auto 18px;padding:0 var(--gut)}

/* ---------- the playlist player (home) ---------- */
.ytp{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(300px,1fr);gap:16px;align-items:stretch;
  max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.ytp-stage{min-width:0}
.ytp-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0e0e10;border-radius:12px;
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.ytp-frame iframe,.ytp-frame > div{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytp-list{position:relative;min-height:0;overflow:hidden;background:#0d0d0f;border-radius:12px;
  outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.ytp-inner{position:absolute;inset:0;display:flex;flex-direction:column}
.ytp-head{display:flex;align-items:baseline;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line)}
.ytp-head b{font-size:15px;font-weight:600}
.ytp-head span{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
#ytp-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#ytp-tracks{list-style:none;margin:0;padding:6px}
.ytp-foot{display:block;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--accent);text-decoration:none}
.ytp-row{display:grid;grid-template-columns:20px 88px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;
  text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:7px 8px;border-radius:8px}
.ytp-row:hover{background:rgba(255,255,255,.05)}
.ytp-row.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.ytp-row .n{display:grid;place-items:center;font-size:11px;color:var(--muted)}
.ytp-row.on .n{color:var(--accent)}
.ytp-row .th{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#1a1a1d}
.ytp-row .th img{width:100%;height:100%;object-fit:cover;display:block}
.ytp-row .tx{min-width:0}
.ytp-row .tx b{font-size:13px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ytp-row .tx small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ytp-row .d{font-size:11px;color:var(--muted)}
.ytp-row .eq{display:none;gap:2px;align-items:flex-end;height:12px}
.ytp-row.playing .eq{display:flex}
.ytp-row.playing .n em{display:none}
.ytp-row .n em{font-style:normal}
.ytp-row .eq i{width:2.5px;height:12px;border-radius:2px;background:var(--accent);transform-origin:bottom;transform:scaleY(.3);animation:eqbar .9s ease-in-out infinite}
.ytp-row .eq i:nth-child(2){animation-delay:.15s}
.ytp-row .eq i:nth-child(3){animation-delay:.3s}
@keyframes eqbar{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ytp.noctl .ytp-row{cursor:default}
.ytp.noctl .ytp-row:hover{background:none}
@media (max-width:900px){ .ytp{grid-template-columns:1fr} .ytp-list{height:min(58vh,380px)} }
@media (prefers-reduced-motion:reduce){ .ytp-row .eq i{animation:none;transform:scaleY(.75)} }

/* ---------- reels, and the note on the wall ---------- */
.reelrow{display:grid;grid-auto-flow:column;grid-auto-columns:min(330px,84vw);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:6px var(--gut) 16px;max-width:1280px;margin:0 auto}
.reelrow > *{scroll-snap-align:start}
.reelrow .instagram-media{margin:0!important;min-width:0!important;max-width:100%!important;border-radius:14px!important}
.board{list-style:none;margin:0 auto 18px;padding:0;max-width:60ch;text-align:left}
.board li{position:relative;padding:10px 0 10px 22px;font-size:17px;border-bottom:1px solid var(--line)}
.board li:last-child{border-bottom:0}
.board li::before{content:"";position:absolute;left:2px;top:20px;width:6px;height:6px;border-radius:999px;background:var(--accent)}
.board-when{font-size:13px;color:var(--dim);text-align:center;margin:0 0 20px}

/* ---------- the large foot ---------- */
.sfoot{background:#0b0b0c;border-top:1px solid rgba(255,255,255,.08);padding:clamp(48px,8vh,80px) var(--gut) 36px;font-size:14px;color:var(--muted)}
.sfoot .cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.sfoot h4{font-size:13px;font-weight:600;color:var(--text);margin:0 0 14px}
.sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sfoot a{color:var(--muted);text-decoration:none}
.sfoot a:hover{color:#fff}
.sfoot .sf-brand img{height:40px;width:auto;margin:0 0 14px}
.sfoot .sf-brand p{margin:0 0 6px;max-width:30ch;line-height:1.55}
.sfoot .social{display:flex;gap:14px;margin-top:14px}
.sfoot .social svg{width:18px;height:18px;fill:currentColor}
.sfoot .base{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12.5px;color:var(--dim)}
.sfoot .base span:last-child{margin-left:auto}
@media (max-width:900px){ .sfoot .cols{grid-template-columns:1fr 1fr} .sfoot .sf-brand{grid-column:1/-1} }

/* ---------- a contact form on a dark page ---------- */
.cform{max-width:720px;margin:0 auto;padding:0 var(--gut) clamp(64px,10vh,112px);display:grid;gap:14px}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:grid;gap:6px;font-size:13.5px;color:var(--muted)}
.cform input,.cform select,.cform textarea{width:100%;background:#0d0d0f;border:1px solid rgba(255,255,255,.14);border-radius:10px;
  padding:13px 14px;color:var(--text);font:inherit;font-size:15.5px}
.cform textarea{min-height:140px;resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--accent)}
@media (max-width:600px){ .cform .row{grid-template-columns:1fr} }

/* the first panel: the name on black above the photograph, never on it */
.panel.above{min-height:0;display:block}
.panel.above::after{display:none}
.panel.above .in{padding:clamp(56px,9vh,104px) var(--gut) clamp(28px,4vh,44px)}
.panel.above .in h2{font-size:clamp(52px,8.4vw,112px)}
.panel.above > img{position:relative;height:clamp(320px,58vw,860px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}

/* The older pages' shared script still draws a photo or a field of bars
   behind any .hero it finds. These pages set their own picture. */
.hero-bg,.wave{display:none!important}

/* ---------- before and after players (mixing) ---------- */
#ab-grid{max-width:1080px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ab{background:#0d0d0f;border-radius:14px;padding:22px 22px 20px;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
.ab-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:14px}
.ab-head h3{margin:0;font-size:19px;font-weight:500}
.ab-head .who{font-size:12.5px;color:var(--dim)}
.ab-toggle{display:inline-flex;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);margin-bottom:14px}
.ab-toggle button{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;padding:7px 16px;cursor:pointer}
.ab-toggle button.on{background:var(--accent);color:var(--accent-ink)}
.ab audio{width:100%;height:38px}
.ab-note:empty{display:none}
.ab-note{font-size:12.5px;color:var(--dim);margin:10px 0 0}
@media (max-width:860px){ #ab-grid{grid-template-columns:1fr} }

/* ---------- names as chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto;
  padding:0 var(--gut) clamp(56px,9vh,104px)}
.chips li a,.chips li span{display:inline-block;padding:10px 18px;border-radius:999px;text-decoration:none;color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:15.5px}
.chips li a:hover{box-shadow:inset 0 0 0 1px var(--accent);color:#fff}
.chips li span{color:var(--dim);box-shadow:none}

/* ---------- about: the story, the gallery, the lightbox, contact ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start;
  max-width:1180px;margin:0 auto;padding:clamp(64px,10vh,112px) var(--gut)}
.story p{color:var(--muted);font-size:clamp(17px,1.4vw,19px);line-height:1.7;margin:0 0 18px;max-width:58ch}
.story p.first{color:#e8e8ed;font-size:clamp(20px,1.8vw,24px);line-height:1.5}
.shot.portrait{position:sticky;top:80px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#111}
.shot.portrait img{width:100%;height:100%;object-fit:cover}
.shot.empty{display:none}
.slot-note{display:none}
@media (max-width:860px){ .story{grid-template-columns:1fr} .shot.portrait{position:static;max-width:360px} }

.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:1280px;margin:0 auto;padding:0 var(--gut)}
.gallery .shot{position:relative;overflow:hidden;margin:0;aspect-ratio:1;cursor:zoom-in;border-radius:8px;background:#111}
.gallery .shot.feat{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gallery .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.gallery .shot img.dim{opacity:0}
.gallery .shot:hover img{transform:scale(1.04)}
@media (max-width:900px){ .gallery{grid-template-columns:repeat(4,1fr)} .gallery .shot:nth-child(n+12){display:none} }
@media (max-width:520px){ .gallery{grid-template-columns:repeat(3,1fr);gap:6px} .gallery .shot:nth-child(n+7){display:none} }
.gal-more{display:flex;justify-content:center;padding:28px 0 0}

.lb{position:fixed;inset:0;z-index:120;display:none;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb.on{display:grid;grid-template-rows:1fr auto}
.lb-stage{display:grid;place-items:center;padding:clamp(14px,4vw,56px);min-height:0}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
.lb-bar{display:flex;align-items:center;gap:14px;padding:0 clamp(14px,4vw,40px) calc(20px + env(safe-area-inset-bottom,0px))}
.lb-cap{font-size:13px;color:rgba(255,255,255,.65);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.lb-btn{width:44px;height:44px;flex:none;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,.16)}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:clamp(14px,4vw,40px);z-index:2}
body.lb-open{overflow:hidden}

.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:start;
  max-width:1080px;margin:0 auto;padding:0 var(--gut) clamp(64px,10vh,112px)}
.contact form{display:flex;flex-direction:column;gap:14px}
.contact .field{display:flex;flex-direction:column;gap:7px}
.contact label{font-size:13.5px;color:var(--muted)}
.contact input,.contact select,.contact textarea{background:#0d0d0f;border:1px solid rgba(255,255,255,.14);border-radius:10px;color:var(--text);
  font:inherit;font-size:15.5px;padding:13px 14px}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--accent);outline:none}
.contact textarea{resize:vertical;min-height:140px}
button.send{align-self:flex-start;background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;font:inherit;font-weight:500;
  font-size:16px;padding:14px 28px;cursor:pointer}
button.send[disabled]{opacity:.55;cursor:default}
.form-msg{font-size:14px;margin:0;min-height:1.2em;color:var(--muted)}
.form-msg.ok{color:#7fe0a8}
.form-msg.err{color:#ff9a8a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mail{font-size:clamp(22px,2.6vw,32px);font-weight:300;color:var(--text);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);word-break:break-word}
.mail:hover{color:var(--accent);border-color:var(--accent)}
.contact-meta{color:var(--muted);font-size:15px;line-height:1.9;margin:22px 0 0}
.contact-meta a{color:var(--muted)}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }

/* ---------- the blog list (blog.html draws the cards) ---------- */
#posts{max-width:1280px;margin:0 auto;padding:0 var(--gut) clamp(64px,10vh,112px)}
#posts .chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;justify-content:center;padding:0 0 28px;max-width:none;flex-wrap:nowrap}
#posts .chips::-webkit-scrollbar{display:none}
#posts .chip{flex:none;cursor:pointer;white-space:nowrap;font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:0;
  background:none;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#posts .chip:hover{color:#fff}
#posts .chip.on{background:#fff;color:#000;box-shadow:none}
#posts .card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
#posts .thumb{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#111;outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
#posts .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
#posts .card[href]:hover .thumb img{transform:scale(1.04)}
#posts .thumb .len,#posts .thumb .soon{position:absolute;left:12px;bottom:12px;font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.65);color:#fff}
#posts .card.lead{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin:0 0 clamp(40px,7vh,72px)}
#posts .lead .thumb{aspect-ratio:16/9}
#posts .lead h2{font-weight:300;font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.025em;margin:0 0 14px}
#posts .lead p{color:var(--muted);font-size:17px;margin:0 0 14px;max-width:46ch}
#posts .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 24px;padding:0;max-width:none}
#posts .card-meta{display:flex;gap:12px;padding:14px 2px 0}
#posts .card-av{flex:none;width:34px;height:34px;border-radius:999px;overflow:hidden;background:#222}
#posts .card-av img{width:100%;height:100%;object-fit:cover}
#posts .card h3{font-weight:500;font-size:18px;line-height:1.35;margin:0 0 4px}
#posts .card[href]:hover h3{color:var(--accent)}
#posts .who{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
#posts .who b{font-weight:500;color:var(--muted)}
#posts .who span{display:block}
#posts .nothing{border:1px dashed rgba(255,255,255,.18);border-radius:16px;padding:40px;text-align:center;color:var(--muted)}
#posts .nothing h3{font-size:22px;font-weight:400;color:var(--text);margin:0 0 8px}
@media (max-width:820px){ #posts .card.lead{grid-template-columns:1fr} }
/* playlist player when YouTube cannot serve the list: say so, keep the rows useful */
.ytp-off{position:absolute;inset:0;display:grid;place-content:center;gap:6px;padding:24px;text-align:center;color:var(--muted);font-size:15px}
.ytp-off p{margin:0}
.ytp-off p:first-child{color:#e8e8ed}