/* =====================================================================
   Bushwick Daily · phone article · onward reading (stage 2, hl/stage2.php)
   Loaded below 600 px, only while `bd_hl2` is on. Every colour is one of hl.css's tokens, except the Next article bar,
   which is the masthead's band in both modes.

   The paywall is not touched: on a view where it rises (html.hl--gated without html.bd-is-member) nothing here shows
   and the masthead stays as hl.css has it. html.hl2-overlay is set by hl2.js on a page that arrived gated, so that a
   member's strip is laid over the page and nothing moves when the story unlocks.
   ===================================================================== */

/* ---------- 1. The masthead and the strip leave on the way down and return on the way up ---------- */
.hl2 .hl-masthead{transition:transform .25s ease}
.hl2 .hl-strip{position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);z-index:9;height:88px;overflow:hidden;padding:8px 0 0 var(--gutter);background:var(--paper);border-bottom:2px solid var(--ink);transition:transform .25s ease}
.hl2.hl2-down .hl-masthead,.hl2.hl2-down .hl-strip{transform:translateY(-160px)}
.hl2.hl-menu-open .hl-masthead{transform:none}
.hl-strip__label{font:800 10px/14px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.hl-strip__cards{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-right:var(--gutter);-webkit-overflow-scrolling:touch}
.hl-strip__cards::-webkit-scrollbar{display:none}
.hl-strip__card{flex:0 0 206px;display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;min-height:48px;padding-right:14px;border-right:1px solid var(--rule)}
.hl-strip__card:last-child{border-right:0}
.hl-strip__card .hl-photo{width:64px;height:48px}
.hl-strip__card__t{font:600 13px/16px var(--serif);color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* A page that arrived gated: the strip takes no room. A member gets it with the masthead on the way up. */
.hl2.hl2-overlay .hl-strip{position:fixed;left:0;right:0;transform:translateY(-160px)}
.hl2.hl2-overlay.bd-is-member.hl2-up .hl-strip{transform:none}

/* The reading line, while the masthead (and its own line) is away */
.hl-readline{position:fixed;left:0;top:env(safe-area-inset-top,0px);z-index:8;width:100%;height:3px;background:var(--hi);transform-origin:0 50%;transform:scaleX(var(--read2,0));opacity:0;transition:opacity .2s}
.hl2.hl2-down .hl-readline{opacity:1}

/* ---------- 2. Explore more, in the text ---------- */
.hl-explore{margin:8px calc(-1 * var(--gutter)) 24px;padding:16px var(--gutter) 4px;background:var(--tint)}
.hl-explore__head{margin:0 0 4px!important;font:800 13px/18px var(--sans)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)!important}
.hl-explore__head span{background:linear-gradient(transparent 55%,var(--hi) 55%);padding:0 3px;margin-left:-3px;color:var(--hilite-fg,var(--ink))}
.hl-explore__row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none!important;background:none!important}
.hl-explore__row:last-child{border-bottom:0}
.hl-explore__row .hl-photo{width:120px;height:80px}
.hl-explore__row__t{font:600 16px/20px var(--serif);color:var(--ink)}

/* ---------- 3. Next article, anchored to the bottom of the screen ---------- */
.hl-next{position:fixed;left:0;right:0;bottom:0;z-index:11;display:grid;grid-template-columns:1fr 48px 16px;gap:12px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)) var(--gutter);background:#0b0b0b;color:#ffffff;transform:translateY(110%);transition:transform .25s ease}
.hl-next[hidden]{display:none}
.hl2.hl2-next-on .hl-next{transform:none}
.hl-next__label{display:block;font:800 10px/14px var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#ffe135}
.hl-next__t{font:600 15px/19px var(--serif);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.hl-next__photo{width:48px;height:48px}
.hl-next__arrow{font:700 22px/1 var(--sans)}
.hl-next:focus-visible{outline:2px solid #ffffff;outline-offset:-4px}

/* ---------- 4. After the story: three topics, no second share row (the byline's share button opens the phone's sheet) ---------- */
.hl2 .hl-after .hl-share{display:none}

/* ---------- 5. Where the paywall rises: none of it ---------- */
.hl2.hl--gated:not(.bd-is-member) :is(.hl-strip,.hl-next,.hl-readline,.hl-explore){display:none!important}
.hl2.hl--gated:not(.bd-is-member) .hl-masthead{transform:none!important}

@media (prefers-reduced-motion:reduce){
  .hl2 .hl-masthead,.hl2 .hl-strip,.hl-next,.hl-readline{transition:none}
}