/* ==========================================================================
   YOU PRESS — blog
   Extends site.css. Same tokens, same diamond, same refusal of rounded
   corners. Nothing here redefines a base class; everything is prefixed .bl-
   so the signed-off pages cannot be disturbed.
   ========================================================================== */

/* ---------- category rail ---------- */
.bl-rail{border-bottom:1px solid var(--line);background:var(--wht)}
.bl-rail__in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.bl-rail__in::-webkit-scrollbar{display:none}
.bl-rail a{
  display:inline-flex;align-items:center;gap:8px;padding:18px 16px;white-space:nowrap;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);border-bottom:3px solid transparent;transition:color .2s,border-color .2s;
}
.bl-rail a:hover{color:var(--blk)}
.bl-rail a[aria-current]{color:var(--blk);border-bottom-color:var(--blue)}
.bl-rail span{font-size:.68rem;color:var(--grey-l);letter-spacing:.06em}

/* ---------- lead story ---------- */
.bl-lead{padding:clamp(40px,5vw,72px) 0 0}
.bl-lead__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.5vw,56px);align-items:center}
.bl-lead__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pale)}
.bl-lead__ph img{width:100%;height:100%;object-fit:cover}
.bl-lead h2{font-size:clamp(1.6rem,2.8vw,2.3rem);margin:14px 0 0}
.bl-lead h2 a:hover{color:var(--blue-d)}
.bl-lead p{margin-top:14px;max-width:52ch}

/* ---------- post grid ---------- */
.bl-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:clamp(24px,2.6vw,38px);padding:clamp(36px,5vw,64px) 0;
}
.bl-card{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:20px}
.bl-card__ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--pale);margin-bottom:16px}
.bl-card__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bl-card:hover .bl-card__ph img{transform:scale(1.04)}
.bl-card h3{margin:8px 0 0;font-size:1.06rem;line-height:1.3}
.bl-card:hover h3{color:var(--blue-d)}
.bl-card p{margin-top:10px;font-size:.92rem;flex:1}

/* a title-only cover for the handful of posts that have no image at all */
.bl-card__ph--none,.bl-lead__ph--none{
  display:grid;place-items:center;padding:22px;text-align:center;
  background:var(--pale);
  background-image:linear-gradient(135deg,transparent 46%,rgba(79,184,233,.28) 46% 54%,transparent 54%);
  background-size:22px 22px;
}
.bl-card__ph--none b,.bl-lead__ph--none b{
  font-size:1rem;line-height:1.25;color:var(--blk);max-width:18ch;
}

/* video is a different medium — say so before the click */
.bl-play{
  position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  background:var(--blue);transform:rotate(45deg);display:grid;place-items:center;
}
/* a real box, not a zero-width border triangle: place-items centres the box,
   and a 0x0 box with borders rotates about a point outside its own ink, which
   flung the triangle clear of the diamond */
.bl-play::after{
  content:'';width:15px;height:17px;background:var(--blk);
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:rotate(-45deg) translateX(1px);
}

/* ---------- meta line ---------- */
.bl-meta{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-l);
}
.bl-meta b{color:var(--blue-d);font-weight:700}
.bl-meta i{width:5px;height:5px;background:var(--line);transform:rotate(45deg);flex:none}

/* ---------- pagination ---------- */
.bl-pager{display:flex;justify-content:center;align-items:center;gap:6px;
  padding:0 0 clamp(48px,6vw,80px);flex-wrap:wrap}
.bl-pager a,.bl-pager span{
  min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px;
  font-size:.82rem;font-weight:700;border:1px solid var(--line);color:var(--grey);
}
.bl-pager a:hover{border-color:var(--blk);color:var(--blk)}
.bl-pager [aria-current]{background:var(--blk);border-color:var(--blk);color:var(--wht)}
.bl-pager .is-off{opacity:.35;pointer-events:none}

/* ---------- post header ---------- */
.bl-head{background:var(--blk);color:var(--wht);padding:clamp(42px,6vw,76px) 0 clamp(52px,7vw,96px)}
.bl-head h1{max-width:22ch;font-size:clamp(1.9rem,3.9vw,3.1rem)}
.bl-head .bl-meta{margin-top:22px;color:#9A9A9C}
.bl-head .bl-meta b{color:var(--blue)}
.bl-head .bl-meta i{background:#3C3839}

/* the hero media rides up into the dark band — the one flourish on the page */
.bl-hero{margin-top:clamp(-76px,-6vw,-40px)}
/* contain, not cover: several covers are logos or posters, and cropping them
   to a photographic aspect ratio cuts the artwork in half */
.bl-hero__m{position:relative;overflow:hidden;background:var(--pale)}
.bl-hero__m img{width:100%;height:auto;max-height:74vh;object-fit:contain;display:block}
.bl-hero figcaption,.bl-fig figcaption{
  margin-top:10px;font-size:.8rem;color:var(--grey-l);letter-spacing:.01em;
}

/* ---------- article body ---------- */
/* left edge shared with the title and the hero, so the page has one spine.
   padding-top covers the case where a post has no hero media at all. */
.bl-body{max-width:68ch;padding:clamp(28px,3.5vw,46px) 0 clamp(40px,5vw,64px)}
.bl-body>*+*{margin-top:1.15em}
.bl-body p{font-size:1.045rem;line-height:1.78;color:#3E3C3D}
.bl-body h2,.bl-body h3,.bl-body h4{color:var(--blk);margin-top:1.9em;line-height:1.2}
.bl-body h2{font-size:clamp(1.35rem,2.1vw,1.75rem);padding-top:.55em;position:relative}
.bl-body h2::before{
  content:'';position:absolute;top:0;left:0;width:10px;height:10px;
  background:var(--blue);transform:rotate(45deg);
}
.bl-body h3{font-size:1.2rem}
.bl-body h4{font-size:1.04rem}
.bl-body a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.bl-body a:hover{color:var(--blk)}
.bl-body strong{color:var(--blk)}
.bl-body ul,.bl-body ol{padding-left:1.35em}
.bl-body li{color:#3E3C3D;line-height:1.72;margin-top:.5em}
.bl-body li::marker{color:var(--blue-d)}
.bl-body blockquote{
  border-left:3px solid var(--blue);padding:2px 0 2px 22px;margin-left:0;
}
.bl-body blockquote p{font-size:1.16rem;line-height:1.6;color:var(--blk)}

/* pictures keep the text's left edge but run out to the full column width */
.bl-fig{width:min(var(--max),100vw - var(--pad)*2);max-width:none}
.bl-fig img{width:auto;max-width:100%;height:auto;max-height:72vh}

.bl-gallery{
  width:min(var(--max),100vw - var(--pad)*2);max-width:none;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.bl-gallery .bl-gal__i{margin:0}
.bl-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:1}

.bl-video,.bl-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background:var(--blk)}
.bl-video iframe,.bl-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bl-embed--audio{padding-bottom:26%;min-height:180px;background:transparent}

.bl-file a{
  display:inline-flex;align-items:center;gap:12px;padding:16px 22px;
  border:2px solid var(--blk);font-weight:700;text-decoration:none;color:var(--blk);
}
.bl-file a:hover{background:var(--blk);color:var(--wht)}
.bl-file span{font-weight:400;font-size:.82rem;color:var(--grey);letter-spacing:.04em}
.bl-file a:hover span{color:#C8C8CA}

/* ---------- foot of a post ---------- */
.bl-more{background:var(--wash);padding:clamp(44px,5.5vw,76px) 0}
.bl-more .bl-grid{padding:26px 0 0}
.bl-back{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.84rem;
  letter-spacing:.04em;color:var(--blk)}
.bl-back::before{content:'';width:6px;height:6px;background:var(--blue);transform:rotate(45deg)}
.bl-back:hover{color:var(--blue-d)}

.bl-empty{padding:clamp(50px,7vw,90px) 0;text-align:center;color:var(--grey)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .bl-lead__in{grid-template-columns:1fr}
  .bl-hero{margin-top:clamp(-44px,-5vw,-28px)}
}
@media(max-width:560px){
  .bl-grid{grid-template-columns:1fr;gap:30px}
  .bl-fig,.bl-gallery{width:100%}
}

/* ==========================================================================
   Index furniture — hero, filters, search, film shelf
   Added when the blog gained real categories. Same tokens, same diamond, same
   refusal of rounded corners; every class is still .bl- prefixed.
   ========================================================================== */

/* the search toggles whole sections off, and .bl-grid's display:grid would
   otherwise win against the [hidden] attribute */
.bl-find[hidden],.bl-res[hidden],.bl-grid[hidden],.bl-lead[hidden],
.bl-watch[hidden],.bl-pager[hidden],.bl-years[hidden],#bl-x[hidden]{display:none!important}

/* ---------- hero ---------- */
/* the masthead portrait sits high in its frame; a centred crop would put the
   singer's face under the diamond's clipped top point */
.phero .dia__i img{object-position:center 22%}
.bl-stats{display:flex;gap:clamp(22px,3vw,46px);flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}
.bl-stats b{display:block;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;
  color:var(--blue);line-height:1.1}
.bl-stats span{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9A9A9C;margin-top:5px}

/* ---------- rail ---------- */
/* follows the reader down the archive; the header is sticky at 0 above it */
.bl-rail{position:sticky;top:66px;z-index:40}
/* Watch is a medium, not a subject — pushed away from the six categories */
.bl-rail__w{margin-left:auto;color:var(--blk)}
.bl-rail__w::before{content:'';width:0;height:0;margin-right:2px;
  border:5px solid transparent;border-left:8px solid var(--blue)}

/* ---------- year strip ---------- */
.bl-years{border-bottom:1px solid var(--line);background:var(--wash)}
.bl-years__in{display:flex;align-items:center;gap:2px;overflow-x:auto;
  scrollbar-width:none;padding:10px 0}
.bl-years__in::-webkit-scrollbar{display:none}
.bl-years__l{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey-l);margin-right:14px;white-space:nowrap;flex:none}
.bl-years a{display:inline-flex;align-items:baseline;gap:6px;padding:7px 11px;
  white-space:nowrap;border:1px solid transparent;transition:.2s}
.bl-years b{font-size:.84rem;font-weight:700;color:var(--grey)}
.bl-years span{font-size:.68rem;color:var(--grey-l);font-variant-numeric:tabular-nums}
.bl-years a:hover{border-color:var(--line);background:var(--wht)}
.bl-years a:hover b{color:var(--blk)}
.bl-years a[aria-current]{background:var(--blk);border-color:var(--blk)}
.bl-years a[aria-current] b{color:var(--wht)}
.bl-years a[aria-current] span{color:var(--blue)}

/* ---------- search ---------- */
.bl-find__in{display:flex;align-items:center;gap:14px;padding:clamp(26px,3vw,40px) 0 0}
.bl-find__f{flex:1;display:flex;align-items:center;gap:12px;
  border:1px solid var(--line);background:var(--wht);padding:0 16px;transition:border-color .2s}
.bl-find__f:focus-within{border-color:var(--blue)}
/* a diamond, not a magnifier — the site's one recurring shape */
.bl-find__i{width:9px;height:9px;background:var(--blue);transform:rotate(45deg);flex:none}
.bl-find input{flex:1;border:0;outline:0;background:none;padding:15px 0;
  font:inherit;font-size:.96rem;color:var(--blk)}
.bl-find input::placeholder{color:var(--grey-l)}
.bl-find button{border:1px solid var(--line);background:none;padding:14px 18px;
  font:inherit;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);cursor:pointer}
.bl-find button:hover{border-color:var(--blk);color:var(--blk)}

.bl-res{padding:clamp(26px,3vw,40px) 0 clamp(48px,6vw,80px)}
.bl-res__c{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey-l);margin-bottom:6px}
.bl-res__n{padding:26px 0;color:var(--grey)}
.bl-res__l{list-style:none;padding:0}
.bl-res__l a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:16px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bl-res__l b{font-size:1.02rem;font-weight:700;color:var(--blk);line-height:1.3}
.bl-res__l span{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey-l);white-space:nowrap}
.bl-res__l a:hover b{color:var(--blue-d)}

/* ---------- film shelf ---------- */
.bl-watch{background:var(--blk);color:var(--wht);padding:clamp(40px,5vw,68px) 0;
  margin-top:clamp(40px,5vw,68px)}
.bl-watch .eyebrow{color:var(--blue);margin:0}
.bl-watch .link{color:var(--blue)}
.bl-watch .link:hover{color:var(--wht)}
.bl-watch__h{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:clamp(20px,2.4vw,30px)}
.bl-watch__r{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.bl-watch__ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:#2E2A2B}
.bl-watch__ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bl-watch__c:hover .bl-watch__ph img{transform:scale(1.05)}
.bl-watch__ph--none{display:grid;place-items:center;padding:16px;text-align:center}
.bl-watch__ph--none b{font-size:.9rem;color:var(--wht)}
.bl-watch__c b{display:block;margin-top:12px;font-size:.95rem;line-height:1.3;color:var(--wht)}
.bl-watch__c:hover b{color:var(--blue)}
.bl-watch__c span{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8C8C8E}
.bl-watch .bl-play{width:44px;height:44px;margin:-22px 0 0 -22px}
.bl-watch .bl-play::after{width:12px;height:14px}

/* ---------- contained covers ---------- */
/* several covers are posters, banners and logos; cropping one cuts the artwork
   in half, which is exactly what the client rejected on the GHL theme */
.bl-card__ph--fit img,.bl-watch__ph--fit img{object-fit:contain}
.bl-card__ph--fit{background:var(--pale);
  background-image:linear-gradient(135deg,transparent 47%,rgba(79,184,233,.10) 47% 53%,transparent 53%);
  background-size:30px 30px}
.bl-lead__ph--fit{background:var(--pale);
  background-image:linear-gradient(135deg,transparent 47%,rgba(79,184,233,.10) 47% 53%,transparent 53%);
  background-size:34px 34px}
.bl-lead__ph--fit img{object-fit:contain;padding:clamp(16px,2vw,30px)}

/* ---------- responsive ---------- */
@media(max-width:1200px){
  /* the header stops being sticky here, so the rail takes the top slot */
  .bl-rail{top:0}
  .bl-watch__r{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .bl-stats{gap:20px}
  .bl-watch__r{grid-template-columns:1fr}
  .bl-find__in{flex-wrap:wrap}
  .bl-rail__w{margin-left:0}
}