/* ==========================================================================
   Pulsar Theme — Cards
   All article card variants.
   BEM: .pls-card, .pls-card__*, .pls-card--variant
   ========================================================================== */

/* --- Base Card --- */
.pls-card{position:relative;background:var(--pls-surface);border-radius:var(--pls-radius);overflow:hidden;border:1px solid var(--pls-border-soft);transition:box-shadow .2s}
/* Compact: a card in a vertical list, with a separator instead of a border.
   A deliberately strong override (0,2,0 beats the base rule) so the critical
   CSS does not show a bordered box while the main stylesheet is still on its
   way. */
.pls-card.pls-card--compact{border:none;border-top:1px solid var(--pls-border-soft);border-radius:0}

/* In-feed native ad card: it looks like the article cards.
   The "advertisement" label is drawn by the ad network itself, under the
   title of the unit, so the theme does not add one of its own. */
.pls-card.pls-card--infeed-spot{padding:0;display:flex;align-items:center;justify-content:center;min-height:290px;border:1.5px solid color-mix(in srgb,var(--pls-brand) 40%,transparent)}
.pls-card.pls-card--infeed-spot:hover{box-shadow:none}
.pls-card--infeed-spot > ins.adsbygoogle{display:flex;align-items:center;justify-content:center;width:100%;margin:0 auto}

.pls-card:hover{box-shadow:var(--pls-shadow-md)}
.pls-card__link{position:absolute;inset:0;z-index:1}
.pls-card__title a{position:relative;z-index:2;color:inherit}
/* card-standard / card-app: overlay link via title::after (no nested anchors) */
.pls-card--standard .pls-card__title a{position:static}
.pls-card--standard .pls-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.pls-card--standard .pls-card-app__btn,
.pls-card--standard .pls-card__comments,
/* The icon stays absolute, floating over the cover, above the overlay */

.pls-card__title a:hover,
.pls-card:hover .pls-card__title a{color:var(--pls-brand);transition:color .15s}

/* Cover image wrapper */
.pls-card__cover{position:relative;overflow:hidden}
.pls-card__cover .pls-img{transition:transform .3s}
.pls-card:hover .pls-card__cover .pls-img{transform:scale(1.03)}

/* Content area */
.pls-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}

/* Badge (category) — always inline, never full-width */
.pls-badge{display:inline-block;padding:calc(3px * var(--pls-card-scale)) calc(8px * var(--pls-card-scale));border-radius:calc(4px * var(--pls-r));font-size:calc(10.5px * var(--pls-card-scale));font-weight:700;letter-spacing:.4px;text-transform:uppercase;line-height:1.3;align-self:flex-start}
.pls-badge--brand{background:var(--pls-brand-soft);color:var(--pls-brand)}
.pls-badge--plain{background:transparent;color:var(--pls-brand);padding:0;letter-spacing:var(--pls-badge-plain-ls,-.2px)}
.pls-badge--accent{background:var(--pls-accent-soft);color:var(--pls-accent)}
.pls-badge--neutral{background:#eef1f7;color:var(--pls-ink2)}
/* Solid: the brand colour filled in, white text. It is the shape a news masthead
   gives the category above a headline — see the single article, where the badge
   is the first thing on the page and a tint is not enough to carry it. */
.pls-badge--solid{background:var(--pls-brand);color:#fff}

/* The category is a link wherever the badge carries one, and says so when the
   pointer is on it. Written for the anchor and not for the class: the same
   badge is drawn as plain text where there is nothing to follow, and a colour
   that changes under the pointer would promise a link that is not there.
   Each state darkens in its own way — the filled one deepens, the tinted one
   fills in, the bare one darkens the word — so the movement is the same
   wherever the category appears, whatever shape the site gives it. */
a.pls-badge{transition:background-color .15s,color .15s}
a.pls-badge--solid:hover{background:var(--pls-brand-dark)}
a.pls-badge--brand:hover{background:var(--pls-brand);color:#fff}
a.pls-badge--plain:hover{color:var(--pls-brand-dark)}
a.pls-badge--accent:hover{background:var(--pls-accent-ink,#bf4f28);color:#fff}

.pls-badge--featured{background:#fff3d6;color:#a06800;margin-right:6px}
/* On a dark section the cream badge loses its contrast, so it turns to solid
   gold with dark text on it, which clears AA. */
.pls-section--dark .pls-badge--featured,.pls-section--hero-e .pls-badge--featured{background:#c99633;color:#3a2600}

/* Title */
.pls-card__title{font-family:var(--pls-font-h);font-size:calc(var(--pls-card-title-size) * var(--pls-title-scale,1));line-height:1.3;font-weight:600;letter-spacing:-.2px;color:var(--pls-ink);margin:8px 0;word-break:break-word}

/* Excerpt */
.pls-card__excerpt{font-size:calc(var(--pls-card-excerpt-size) * var(--pls-card-scale));color:var(--pls-mute);line-height:1.5;margin:0 0 12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Meta row: author, time, comments — single line */
.pls-meta{display:flex;align-items:center;gap:6px;font-size:calc(var(--pls-meta-size) * var(--pls-card-scale));color:var(--pls-mute);margin-top:auto;padding-top:12px;white-space:nowrap;flex-wrap:nowrap}
.pls-meta__avatar{width:calc(20px * var(--pls-card-scale));height:calc(20px * var(--pls-card-scale));border-radius:50%;object-fit:cover;flex-shrink:0}
.pls-meta__author{color:var(--pls-ink2);font-weight:500;white-space:nowrap}
.pls-meta__sep{color:var(--pls-border);flex-shrink:0}

/* Comment link — inline in meta, z-index above card overlay */
.pls-card__comments{position:relative;z-index:2;display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:4px;font-size:calc(12px * var(--pls-card-scale));line-height:1;color:var(--pls-comment-ink,var(--pls-brand));background:var(--pls-comment-bg,var(--pls-brand-soft));padding:5px 8px;border-radius:calc(6px * var(--pls-r));transition:color .15s,background .15s;margin-left:auto;flex-shrink:0;white-space:nowrap;width:max-content;box-sizing:border-box;min-height:calc(25px * var(--pls-card-scale))}
.pls-card__comments>*{flex-shrink:0}
.pls-card__comments svg{width:calc(15px * var(--pls-card-scale));height:calc(15px * var(--pls-card-scale));display:inline-block;line-height:1;white-space:nowrap;flex-shrink:0}
.pls-card__comments-label{margin-left:1px}
.pls-card__comments:hover{color:#fff;background:var(--pls-brand)}
/* One rule for every card: the pill is the brand tint and everything inside it
   is ink. Written with the descendants because some cards wrap the number in a
   span of their own. */
.pls-card__comments,.pls-card__comments *,
.pls-card__comments--inline,.pls-card__comments--inline *,
.pls-card__comments--compact,.pls-card__comments--compact *{color:var(--pls-comment-ink,var(--pls-brand))}
.pls-card__comments:hover,.pls-card__comments:hover *,
.pls-card__comments--inline:hover,.pls-card__comments--inline:hover *{color:#fff}
/* The comment badge is a pill in the brand tint with black text on it,
   on the cards exactly as in the article: it is the same object, and it
   used to be a grey word on the cards and a pill on the single. The
   category above it is the opposite — the plain word in the brand
   colour — so the two never read as the same kind of thing. */
body.search .pls-card--standard .pls-meta__sep{display:none}
body.search .pls-card--standard .pls-meta time{margin-left:0}
body.search .pls-card--standard .pls-card__comments{margin-left:auto}

/* --- Card Standard (grid, with cover + body) --- */
.pls-card--standard{display:flex;flex-direction:column}
.pls-card--standard .pls-card__cover .pls-img,.pls-card--standard .pls-card__cover .pls-img-placeholder{aspect-ratio:16/9;width:100%}

/* --- Card Compact (list, horizontal thumbnail + text) --- */
/* The list card: the picture on the left, the whole entry on the right, one
   article to a line. The picture is given a share of the row rather than a
   width in pixels — the row is as wide as the column it stands in, and a fixed
   picture would be half the row on a narrow screen and a stamp on a wide one.
   Its own ratio, 3:2, so a row keeps its height whatever the photograph is. */
.pls-card.pls-card--list{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:24px;
  align-items:start;background:none;border:none;border-radius:0;box-shadow:none;padding:22px 0}
/* The rows sit against one another: the rule between two of them is the border
   of the second, and the space above it must be the space below it. The grid
   that holds them gives up its gap, which would otherwise be added on one side
   only and push the rule off centre. */
.pls-list-rows{gap:0}
.pls-card--list + .pls-card--list{border-top:1px solid var(--pls-border-soft)}
.pls-card--list .pls-card__cover{position:relative;aspect-ratio:16/9;border-radius:var(--pls-radius-sm);overflow:hidden}
.pls-card--list .pls-card__cover .pls-img{width:100%;height:100%;object-fit:cover}
/* The three pieces are spaced one by one and not by a gap shared between them:
   a title set at 1.45 carries its own half-line under the last line, so an equal
   gap above and below the author reads as more above. The numbers differ so the
   space looks the same. */
.pls-card--list .pls-card__body{padding:0;display:flex;flex-direction:column;gap:0}
.pls-card--list .pls-card__title{font-size:calc(var(--pls-card-list-title-size,calc(var(--pls-card-title-size) * 1.25)) * var(--pls-title-scale,1));line-height:1.45;margin:0}
.pls-card--list .pls-meta{margin:6px 0 0}
.pls-card--list .pls-card__excerpt{margin:11px 0 0;font-size:var(--pls-card-list-excerpt-size,15px);line-height:1.5;-webkit-line-clamp:2}
/* The category on the picture, in the corner the eye reaches last: over a
   photograph it needs its filled shape, whatever the site sets elsewhere. */
/* `display:block` and no line height on the wrapper: the badge inside is an
   inline block, so it sits on a text baseline and the line it sits on leaves a
   few pixels above it. At the bottom of the picture that space falls where the
   descenders would be and nobody sees it; at the top it holds the badge off the
   corner. */
.pls-card--list .pls-card__cover-cat{position:absolute;left:0;bottom:0;z-index:2;display:block;line-height:0}
/* The same badge at the other end of the picture. Set on the badge and not by
   turning the picture around, so what sits over it — a review score, a play
   mark — stays where it was. */
.pls-card--list .pls-card__cover-cat--top{top:0;bottom:auto}
.pls-card--list .pls-card__cover-cat .pls-badge{border-radius:0;padding:5px 10px;
  background:var(--pls-brand);color:#fff}

@media(max-width:640px){
/* On a phone the two columns become one: a picture that is a third of a narrow
   screen is too small to tell anything, and the headline has nowhere to go. */
.pls-card.pls-card--list{grid-template-columns:1fr;gap:12px;padding:18px 0}
.pls-card--list .pls-card__title{font-size:calc(var(--pls-card-list-title-size,var(--pls-card-title-size)) * var(--pls-title-scale,1))}
}

/* --------------------------------------------------------------------------
   The extended timeline: a dated rule with the entries of each day hanging off
   it. The rule runs close to what it dates — far enough left to be a margin,
   near enough that the eye reads the dot and the row as one thing. The rule and the dots belong to the container and to the date, not to
   elements of their own: a line drawn as a div would have to be kept as tall as
   the list by a script.
   -------------------------------------------------------------------------- */
/* The colour the list stands on. The dots break the rule with a ring of it and
   the end cap covers what is left of the rule with it, so both have to know
   where they are: on the page, or inside a white box. One variable, set once by
   whoever holds the list. */
.pls-timeline-ext{position:relative;padding-left:34px;--pls-tlx-ground:var(--pls-bg)}
/* The rule stops in the middle of the cap that closes it: below that there is
   nothing left to date. */
.pls-timeline-ext::before{content:'';position:absolute;left:15px;top:6px;bottom:16px;width:2px;
  background:var(--pls-border-soft)}

/* The month, once, where it changes. A tab pinned to the rule: it names the
   block that follows, and a shape of its own is what tells it apart from the
   dates inside. */
.pls-tlx__month{position:relative;left:-34px;display:inline-flex;align-items:baseline;gap:8px;
  padding:8px 16px;margin:0 0 22px;background:var(--pls-surface);
  border:1px solid var(--pls-border-soft);border-radius:calc(8px * var(--pls-r))}
.pls-timeline-ext > .pls-tlx__month:not(:first-child){margin-top:36px}
.pls-tlx__month-name{font-size:15px;font-weight:800;color:var(--pls-ink);line-height:1;
  text-transform:none}
.pls-tlx__month-year{font-size:13px;color:var(--pls-mute);line-height:1}

/* The date of a group, with the dot that marks it on the rule. The dot carries
   a ring of the page's own colour rather than a border: that is how it breaks
   the line running under it without the line having to be cut. */
.pls-tlx__day{position:relative;margin:26px 0 14px;font-size:15px;font-weight:600;
  color:var(--pls-ink)}
.pls-tlx__day:first-child,.pls-tlx__month + .pls-tlx__day{margin-top:0}
.pls-tlx__day::before{content:'';position:absolute;left:-25px;top:50%;width:14px;height:14px;
  margin-top:-7px;border-radius:50%;background:var(--pls-brand);
  box-shadow:0 0 0 4px var(--pls-tlx-ground)}

/* The cap that closes the rule. The same tab as the month, so the list opens
   and shuts with the same shape, and small enough that it reads as a full stop
   rather than as another entry. */
.pls-tlx__end{position:relative;z-index:1;left:-34px;display:inline-flex;align-items:center;
  justify-content:center;min-width:64px;margin:22px 0 0;padding:7px 14px;
  background:var(--pls-surface);border:1px solid var(--pls-border-soft);
  border-radius:calc(8px * var(--pls-r));font-size:13px;font-weight:700;
  color:var(--pls-mute);letter-spacing:.02em}
.pls-tlx__end--more{letter-spacing:.12em;font-size:15px;padding-top:4px;padding-bottom:10px}
/* Where the list grows by button, the cap carries both wordings and shows the
   one that is true: an ellipsis while there is more to load, the closing word
   once the last batch is in. */
.pls-tlx__end--more .pls-tlx__end-done{display:none}
.pls-tlx__end:not(.pls-tlx__end--more) .pls-tlx__end-more{display:none}

.pls-card.pls-card--tlx{position:relative;background:none;border:none;border-radius:0;
  box-shadow:none;padding:0 0 26px}
/* Two articles of the same day are two rows under one date, so what parts them
   is a rule of their own and not the space a new date brings. */
.pls-card--tlx + .pls-card--tlx{border-top:1px solid var(--pls-border-soft);padding-top:26px}

.pls-tlx__row{position:relative;display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
  gap:24px;align-items:start}
.pls-card--tlx .pls-card__cover{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--pls-radius-sm)}
.pls-card--tlx .pls-card__cover .pls-img{width:100%;height:100%;object-fit:cover}
.pls-card--tlx .pls-card__body{padding:0;display:flex;flex-direction:column;gap:12px}
/* The line above the title has two ends: who wrote it on one side, what it has
   collected on the other. */
.pls-tlx__meta{margin:0;display:flex;align-items:center;justify-content:space-between;width:100%}
.pls-tlx__author{display:inline-flex;align-items:center;gap:8px}
/* One size at every width, and its own: the row is the same width on a phone as
   on a desktop once the columns fold, so a title that shrank with the screen
   would be smaller in the place it has the most room to be read. */
.pls-card--tlx .pls-card__title{font-size:calc(var(--pls-card-tlx-title-size,18px) * var(--pls-title-scale,1));line-height:1.45;margin:0}
/* Two lines, at a size of its own: the opening is there to help decide, not to
   be read instead of the article. */
.pls-card--tlx .pls-card__excerpt{margin:0;font-size:var(--pls-card-tlx-excerpt-size,15px);line-height:1.5;-webkit-line-clamp:2}

@media(max-width:640px){
/* On a phone the rule keeps its place but the row gives up its columns: a
   picture beside a headline on a screen this narrow leaves neither readable. */
.pls-timeline-ext{padding-left:26px}
.pls-timeline-ext::before{left:9px}
.pls-tlx__month{left:-26px;padding:7px 12px}
.pls-tlx__end{left:-26px}
.pls-tlx__day::before{left:-22px;width:12px;height:12px;margin-top:-6px}
/* Stacked, the space under the picture reads larger than it is: what opens the
   body is the line of data, and the comment button on it makes that line taller
   than the words in it. The gap is closed to match what the eye sees, which is
   the distance from the picture to the first words rather than to the top of
   the row. */
.pls-tlx__row{grid-template-columns:1fr;gap:8px}
}

/* The timeline: a list of articles by the hour they were published, with a rule
   running down the side. It began as a section of the front page and is now one
   of the shapes the search results can take, so it lives with the other ways of
   listing articles rather than with the page that first asked for one. */
.pls-timeline{position:relative;padding-left:20px;border-left:2px solid var(--pls-border)}
.pls-timeline__item{display:grid;grid-template-columns:auto 1fr 60px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--pls-border-soft)}
.pls-timeline__item:last-child{border-bottom:none}
.pls-timeline__marker{display:flex;align-items:center;gap:12px;min-width:80px}
.pls-timeline__dot{width:10px;height:10px;border-radius:50%;background:var(--pls-brand);border:2px solid var(--pls-surface);position:absolute;left:-6px}
.pls-timeline__time{text-align:right}
.pls-timeline__hour{display:block;font-size:14px;font-weight:600;color:var(--pls-ink)}
.pls-timeline__date{display:block;font-size:12px;color:var(--pls-mute)}
.pls-timeline__content a{display:block}
.pls-timeline__title{font-family:var(--pls-font-h);font-size:calc(var(--pls-card-timeline-title-size,var(--pls-card-title-size)) * var(--pls-title-scale,1));font-weight:600;line-height:1.3;color:var(--pls-ink);margin:4px 0 0;transition:color .15s}
.pls-timeline__item:hover .pls-timeline__title{color:var(--pls-brand)}
.pls-timeline__excerpt{font-size:13px;color:var(--pls-mute);line-height:1.4;margin:4px 0 0}
.pls-timeline__thumb{width:60px;height:60px;border-radius:var(--pls-radius-sm);overflow:hidden;flex-shrink:0;cursor:pointer;text-decoration:none}
.pls-timeline__thumb .pls-img{width:60px;height:60px;aspect-ratio:1;object-fit:cover}
/* No-thumb variant: collapse the 3rd grid column entirely */
.pls-timeline--no-thumb .pls-timeline__item{grid-template-columns:auto 1fr}
/* No-category-bg variant: keep label, drop the pill background */
.pls-timeline--no-cat-bg .pls-timeline__cat,
.pls-timeline__cat--plain{background:transparent;color:var(--pls-brand);padding:0;border-radius:0;letter-spacing:-.2px}

/* Narrower screens: the hour and the thumbnail are the first to go, because the
   title is what the list is for. */
@media(max-width:1024px){
.pls-timeline__item{grid-template-columns:auto 1fr 50px;gap:12px}
}
@media(max-width:640px){
.pls-timeline{padding-left:14px}
.pls-timeline__item{grid-template-columns:1fr;gap:8px}
/* The opening is cut at two lines: with the row stacked, a third line pushes
   the next entry off the screen and the list stops looking like one. */
.pls-timeline__excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pls-timeline__thumb{display:none}
.pls-timeline__marker{min-width:0}
}

/* The box the compact cards stand in. They are rows and not tiles: what holds
   them is one column with a rule between each, so it lives with the card it
   holds rather than with the screen that first used it — the category lists and
   the search results ask for it too. */
.pls-list-box{background:var(--pls-surface);border-radius:var(--pls-radius);border:1px solid var(--pls-border-soft);overflow:hidden}
.pls-list-box > .pls-card--compact:first-child{border-top:none}

.pls-card--compact{display:grid;grid-template-columns:235px 1fr auto;gap:16px;padding:14px;align-items:center;border-radius:0;border:none;border-top:1px solid var(--pls-border-soft)}
.pls-card--compact:first-child{border-top:none}
.pls-card--compact .pls-card__cover{width:235px;height:132px;border-radius:calc(10px * var(--pls-r));overflow:hidden;flex-shrink:0;border:1px solid var(--pls-border-soft)}
.pls-card--compact .pls-card__cover .pls-img,.pls-card--compact .pls-card__cover .pls-img-placeholder{width:235px;height:132px;aspect-ratio:auto}
.pls-card--compact .pls-card__body{padding:0}
.pls-card--compact .pls-card__title{font-size:calc(var(--pls-card-compact-title-size,16px) * var(--pls-title-scale,1));line-height:1.5;margin:6px 0 0}
.pls-card--compact .pls-card__meta{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--pls-mute);flex-wrap:wrap}
.pls-card--compact .pls-card__sep{color:var(--pls-mute);opacity:.6}
.pls-card--compact .pls-card__time{font-size:12px;color:var(--pls-mute)}
.pls-card--compact .pls-card__reading{font-size:12px;color:var(--pls-mute)}
/* The comment count at the end of the row, against the right edge of the card,
   rather than pressed against the reading time: it is the one thing on that
   line the reader can press, and a fixed corner is easier to aim at than a
   position that moves with the length of the date beside it. */
.pls-card--compact .pls-card__comments--inline{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--pls-comment-ink,var(--pls-brand));text-decoration:none;padding:5px 8px;background:var(--pls-comment-bg,var(--pls-brand-soft));border-radius:calc(6px * var(--pls-r));transition:color .15s,background .15s}
.pls-card--compact .pls-card__comments--inline svg{width:15px;height:15px}
.pls-card--compact .pls-card__comments--inline:hover{color:#fff;background:var(--pls-brand)}
.pls-card--compact .pls-card__aside{display:flex;align-items:center;flex-shrink:0}
.pls-card--compact .pls-card__comments--compact{margin-left:0;font-size:11px}
.pls-card--compact:hover{box-shadow:none;background:var(--pls-bg)}

/* --- Card Hero (large, for hero sections) --- */
.pls-card--hero{display:flex;flex-direction:column}
.pls-card--hero .pls-card__cover .pls-img,.pls-card--hero .pls-card__cover .pls-img-placeholder{aspect-ratio:16/9;width:100%}
.pls-card--hero-natural .pls-card__cover .pls-img,.pls-card--hero-natural .pls-card__cover .pls-img-placeholder{aspect-ratio:auto;height:auto}
.pls-card--hero .pls-card__body{padding:22px 24px 24px}
.pls-card--hero .pls-card__title{font-size:calc(var(--pls-card-hero-title-size,28px) * var(--pls-title-scale,1));line-height:1.15;letter-spacing:-.7px;margin:0 0 10px}
.pls-card--hero .pls-card__excerpt{font-size:15px;color:var(--pls-ink2);line-height:1.55;-webkit-line-clamp:3}

/* --- Card Side (hero stacked, horizontal split) --- */
.pls-card--side{display:grid;grid-template-columns:1fr 1.2fr;flex:1}
.pls-card--side .pls-card__cover .pls-img,.pls-card--side .pls-card__cover .pls-img-placeholder{height:100%;aspect-ratio:auto}
.pls-card--side .pls-card__body{padding:16px 18px;display:flex;flex-direction:column;justify-content:space-between}
.pls-card--side .pls-card__title{flex:1;display:flex;align-items:center;font-size:calc(var(--pls-card-side-title-size,var(--pls-card-title-size)) * var(--pls-title-scale,1))}
.pls-card--side .pls-card__title a{display:block}
.pls-card--side .pls-meta{margin-top:0;padding-top:12px}
.pls-card--side .pls-meta__author{white-space:nowrap}
/* Image on the right variant, from tablet up; on mobile it stays stacked */
@media(min-width:641px){
  .pls-card--side-reverse{grid-template-columns:1.2fr 1fr}
  .pls-card--side-reverse .pls-card__cover{order:2}
  .pls-card--side-reverse .pls-card__body{order:1}
}

/* --- The review score on a cover --- */
/* An article with the Review box on carries its score in the corner of its
   cover, in every card that has one — standard, hero, compact, side, cover
   story. The rule hangs off the cover and not off `.pls-card--review`, a
   modifier only the standard card adds. */
.pls-card__cover .pls-review-score{position:absolute;top:10px;right:10px;background:var(--pls-band);color:#fff;padding:4px 9px;border-radius:calc(7px * var(--pls-r));font-size:12px;font-weight:700;line-height:1.3;z-index:2;box-shadow:0 2px 8px rgba(15,29,54,.28)}
/* Bigger on a hero cover, where 12px would be lost, and smaller on the little
   thumbnail of a compact card, where it would cover a third of the picture. */
.pls-card--hero .pls-card__cover .pls-review-score{top:14px;right:14px;padding:6px 12px;font-size:15px;border-radius:calc(9px * var(--pls-r))}
.pls-card--compact .pls-card__cover .pls-review-score,
.pls-card--side .pls-card__cover .pls-review-score{top:7px;right:7px;padding:3px 7px;font-size:11px;border-radius:calc(6px * var(--pls-r))}

/* --- Video play button overlay --- */
.pls-card__play{position:absolute;bottom:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none;transition:background .2s,transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.pls-card__play svg{stroke:none;fill:var(--pls-ink-on-light);margin-left:2px;transition:fill .2s}
.pls-card:hover .pls-card__play{background:var(--pls-brand);transform:scale(1.08);box-shadow:0 4px 12px rgba(30,99,212,.3)}
.pls-card:hover .pls-card__play svg{fill:#fff}
.pls-card__play--lg{width:48px;height:48px;bottom:14px;right:14px}
.pls-card__play--lg svg{margin-left:3px}
.pls-card__play--sm{width:26px;height:26px;bottom:6px;right:6px}
.pls-card__play--sm svg{margin-left:1px}

/* --- Offer overlay on card cover --- */
.pls-card__offer-badge{position:absolute;top:12px;left:12px;background:var(--pls-accent-ink,#bf4f28);color:#fff;padding:4px 10px;border-radius:calc(6px * var(--pls-r));font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;z-index:1}

/* --- CTA button (load more, etc.) --- */
.pls-btn-more{margin-top:24px;width:100%;padding:14px;background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:var(--pls-radius);font-size:14px;font-weight:600;color:var(--pls-ink);display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s}
.pls-btn-more:hover{background:var(--pls-bg)}
@media(max-width:640px){.pls-btn-more{background:var(--pls-brand);color:#fff;border-color:var(--pls-brand)}.pls-btn-more:hover{background:var(--pls-brand-dark)}}

/* --- Responsive --- */
@media(max-width:1024px){
.pls-card--side{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.pls-card--side .pls-card__body{justify-content:flex-start}
.pls-card--hero .pls-card__title{font-size:calc(var(--pls-card-hero-title-size,22px) * var(--pls-title-scale,1))}
}

@media(max-width:640px){
.pls-card--compact{grid-template-columns:80px 1fr;gap:12px}
.pls-card--compact .pls-card__cover{width:80px;height:50px}
.pls-card--compact .pls-card__cover .pls-img,.pls-card--compact .pls-card__cover .pls-img-placeholder{width:80px;height:50px}
.pls-section--list .pls-card--compact{grid-template-columns:110px 1fr;gap:12px}
.pls-section--list .pls-card--compact .pls-card__cover,
.pls-section--list .pls-card--compact .pls-card__cover .pls-img{width:110px;height:66px}
.pls-card--compact .pls-card__aside{display:none}
.pls-card__comments{line-height:1;flex-direction:row;flex-wrap:nowrap;white-space:nowrap}
.pls-card__comments svg{display:inline-block;line-height:1;white-space:nowrap;flex-shrink:0;margin:0}
.pls-card__comments-num,.pls-card__comments-label{line-height:1;display:inline-block;white-space:nowrap}
.pls-card--hero .pls-card__body{padding:14px}
.pls-card--hero .pls-card__title{font-size:calc(var(--pls-card-hero-title-size,15px) * var(--pls-title-scale,1));line-height:1.3;font-weight:600;letter-spacing:-.2px;color:var(--pls-ink);margin:8px 0}
.pls-card--hero .pls-card__excerpt{display:none}
.pls-card--hero .pls-meta:has(.pls-meta__author) time,.pls-card--hero .pls-meta .pls-meta__author+.pls-meta__sep{display:none}
:root{--pls-meta-size:11px}
.pls-meta{gap:4px}
.pls-meta__author{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.pls-card__body{padding:14px}
:root{--pls-card-title-size:16px}
.pls-card__title{line-height:1.5}

/* Cars & bikes on the phone: the cards do not shrink.
   On a trade title the card is nearly full width even on a small screen, and a
   title sized for a third of a row reads like a footnote there. Sizes: title
   20/700, excerpt 15, meta row 12, category 11. The cards of every other style
   are untouched, and so are the hero and compact ones here. */
.pls-style-auto .pls-card--standard .pls-card__title{line-height:1.3;font-weight:700}
.pls-style-auto .pls-card--standard .pls-card__excerpt{line-height:1.5}
.pls-style-auto .pls-card--standard .pls-badge{font-size:11px}

}

/* --- Card Cover Story (overlay text on image) --- */
.pls-card--cover-story{position:relative;display:flex;flex-direction:column}
.pls-card--cover-story .pls-card__cover .pls-img,.pls-card--cover-story .pls-card__cover .pls-img-placeholder{aspect-ratio:16/9;width:100%}
.pls-card--cover-story .pls-card--cover-story__overlay{position:absolute;bottom:0;left:0;right:0;padding:28px 24px 24px;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 60%,transparent 100%);z-index:1;display:flex;flex-direction:column;gap:8px}
.pls-card--cover-story .pls-card__title{color:#fff;font-size:calc(var(--pls-card-cover-title-size,21px) * var(--pls-title-scale,1));line-height:1.15;font-weight:700;letter-spacing:-.6px;margin:4px 0}
.pls-card--cover-story .pls-card__title a{color:#fff}
.pls-card--cover-story .pls-card__title a:hover,
.pls-card--cover-story.pls-card:hover .pls-card__title a{color:var(--pls-brand-soft)}
.pls-card--cover-story .pls-card__excerpt{color:rgba(255,255,255,.8);font-size:14px;-webkit-line-clamp:2;margin:0 0 4px}
.pls-card--cover-story .pls-meta{color:rgba(255,255,255,.65);padding-top:4px;margin-top:0}
.pls-card--cover-story .pls-meta__author{color:#fff}
.pls-card--cover-story .pls-meta__sep{color:rgba(255,255,255,.35)}
.pls-card--cover-story .pls-card__comments{color:rgba(255,255,255,.65)}
.pls-card--cover-story .pls-card__comments:hover{color:#fff;background:rgba(255,255,255,.15)}
.pls-card--cover-story .pls-meta__avatar{border:1px solid rgba(255,255,255,.3)}
@media(max-width:1024px){
.pls-card--cover-story .pls-card__title{font-size:calc(var(--pls-card-cover-title-size,19px) * var(--pls-title-scale,1))}
.pls-card--cover-story .pls-card--cover-story__overlay{padding:20px 18px 18px}
}
@media(max-width:640px){
.pls-card--cover-story .pls-card__title{font-size:calc(var(--pls-card-cover-title-size,17px) * var(--pls-title-scale,1))}
.pls-card--cover-story .pls-card__excerpt{display:none}
}

/* ──────────────────────────────────────────────
   The reusable primary button, in the same style as the sidebar widgets:
   a middling 10px radius, tight padding, and no lift on hover.
   ────────────────────────────────────────────── */

/* ── Featured video, on the standard card and on the single post hero ────
   The cover stays the featured image, which is what the browser measures as
   the largest paint; featured-video.js crossfades the video over it after a
   3-2-1 countdown. These rules hold for the cards and for the hero alike. */
.pls-card__cover--video,
.pls-single-content__hero--video{background:#0b1120}
.pls-card__fvideo{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;opacity:0;transition:opacity .5s ease;z-index:1;pointer-events:none;background:#0b1120}
.pls-card__fvideo.is-playing{opacity:1}
.pls-card__fvideo--yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* No hover zoom on the image while a video sits over it. */
.pls-cover-playing .pls-img{transform:none}

/* The 3-2-1 countdown: a circle over the cover, bottom right, where the play
   badge sits. */
.pls-fv-count{
    position:absolute;bottom:10px;right:10px;width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none;
    background:rgba(11,17,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#fff;font-weight:800;font-size:18px;line-height:1;font-variant-numeric:tabular-nums;
    box-shadow:0 2px 10px rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.55)
}
.pls-fv-count--pop{animation:pls-fv-pop .9s ease-out}
@keyframes pls-fv-pop{0%{transform:scale(1.5);opacity:.2}45%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:1}}
/* Single post hero: a slightly larger countdown. */
.pls-single-content__hero--video .pls-fv-count{width:52px;height:52px;font-size:24px;bottom:14px;right:14px}

/* Audio button, tap to unmute, bottom left over the cover.
   It shows only while a video is playing, and only one video has sound. */
.pls-fv-sound{
    position:absolute;bottom:10px;left:10px;width:40px;height:40px;border-radius:50%;
    display:none;align-items:center;justify-content:center;z-index:4;cursor:pointer;padding:0;
    background:rgba(11,17,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:background .15s,transform .15s
}
.pls-cover-playing .pls-fv-sound{display:flex}
.pls-fv-sound:hover{background:rgba(11,17,32,.8);transform:scale(1.06)}
.pls-fv-sound.is-on{background:var(--pls-brand);border-color:var(--pls-brand)}
.pls-fv-sound svg{display:block;width:20px;height:20px}
.pls-single-content__hero--video .pls-fv-sound{width:52px;height:52px;bottom:14px;left:14px}

/* Play button on a YouTube cover, when nothing may be fetched from YouTube
   until the reader asks for it. Centred, because it is the only thing to press. */
.pls-fv-play{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:52px;height:52px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;z-index:4;cursor:pointer;padding:0 0 0 3px;
    background:rgba(11,17,32,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:background .15s,transform .15s
}
.pls-fv-play:hover{background:rgba(11,17,32,.85);transform:translate(-50%,-50%) scale(1.06)}
.pls-fv-play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pls-fv-play svg{display:block}

@media (prefers-reduced-motion:reduce){
    .pls-card__fvideo,.pls-fv-count{display:none}
    .pls-fv-count--pop{animation:none}
}

/* ── Masked icons (cached SVG files) for the play control ──
   The rules the inline <svg> used to carry, on the <span class="pls-micon">
   that pulsar_micon() writes instead. ── */
/* The disc is white in both appearances — it sits over a photograph — so the
   triangle on it needs the ink of a light surface, not the ink of the page:
   following the page's turned it white on white. */
.pls-card__play .pls-micon--play{background-color:var(--pls-ink-on-light);margin-left:2px}
.pls-card:hover .pls-card__play .pls-micon--play{background-color:#fff}
.pls-card__play--lg .pls-micon--play{margin-left:3px}
.pls-card__play--sm .pls-micon--play{margin-left:1px}


/* --- The box the two row shapes stand in ---------------------------------
   The rows are a shape, not a page: the front page can carry them as a block
   just as an archive carries them as its listing, so what draws them lives
   with the cards — this sheet is loaded everywhere, while archive.css is not.
   --------------------------------------------------------------------- */
/* Rows standing on the colour of the site need something to stand on, and the
   cards of the standard grid already have one each. The two list shapes do not:
   they are rows, so what holds them is one box around the whole list. */
.pls-list-frame{background:var(--pls-surface);border:1px solid var(--pls-border-soft);
  border-radius:var(--pls-radius);padding:6px 24px}

/* Inside the box, nothing hangs out of it. The rule, the dots and the month are
   drawn in the margin the timeline keeps for them, and that margin is now
   inside a card: what stood in the page's own space has to come back in, or the
   card is the only thing on the screen with something sticking through its
   edge.
   ⚠ The three offsets below are not free numbers: the rule sits at 40px, so its
   middle is at 41, and a dot 14px across is centred on it only at 34 — 42 to
   the left of the 76px the timeline indents by. The month and the end cap are
   pushed further left again so the rule runs through them rather than beside
   them. Move the rule and all three follow, or they line up with nothing. */
/* Room above the month and under the cap: they are the two ends of the list,
   and inside a box they need the same air the sides give them, or the list
   starts and stops against the border. */
.pls-list-frame.pls-timeline-ext{padding:26px 32px 28px 76px;--pls-tlx-ground:var(--pls-surface)}
.pls-list-frame.pls-timeline-ext::before{left:40px;bottom:44px}
.pls-list-frame .pls-tlx__month,
.pls-list-frame .pls-tlx__end{left:-56px}
.pls-list-frame .pls-tlx__day::before{left:-42px}

@media(max-width:640px){
.pls-list-frame.pls-timeline-ext{padding:18px 18px 20px 48px}
.pls-list-frame.pls-timeline-ext::before{left:22px;bottom:36px}
.pls-list-frame .pls-tlx__month,
.pls-list-frame .pls-tlx__end{left:-40px}
.pls-list-frame .pls-tlx__day::before{left:-31px}
}
@media(max-width:640px){
.pls-list-frame{padding:2px 16px;margin:0 calc(-1 * var(--pls-sp-md));border-radius:0;border-left:0;border-right:0}
}

/* ── Placeholder cards ────────────────────────────────────────────────────
   Drawn while a category filter is fetching its articles. They carry the
   classes of a standard card, so cover ratio, radius and spacing come from the
   rules above and follow whatever the preset sets; only the grey boxes belong
   here. Deliberately still: a filter answers in a fraction of a second, and
   something pulsing for that long reads as a fault rather than as waiting. */
.pls-card--skeleton{pointer-events:none}
.pls-skel{display:block;background:var(--pls-border-soft,#eef1f7);border-radius:var(--pls-radius-sm)}
.pls-skel--cover{aspect-ratio:16/9;width:100%;border-radius:0}
.pls-skel--badge{width:64px;height:14px;margin-bottom:10px}
.pls-skel--line{height:1em;margin:.25em 0}
.pls-skel--line-2{width:70%}
.pls-skel--meta{width:45%;height:12px}