/* ── Pulsar Theme — Entry Content Typography ─────────────────────────
   The typography shared by single posts and ordinary pages. Pulled out of
   single.css so a page does not load the whole of it just to set its text. */

/* --- Page header (h1) + wrapper --- */
.pls-page__header{padding:20px 0 24px}
.pls-page__title{font-size:clamp(26px,4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.7px;margin:0 0 .6em}
.pls-entry-content--page{max-width:800px}
/* The featured image on a page: archive.css is not loaded there, so the
   .pls-page__hero rule is repeated here to keep some air between the picture
   and the first line of text, which would otherwise touch it. */
.pls-page__hero{margin:0 0 32px;border-radius:var(--pls-radius);overflow:hidden}
.pls-page__hero .pls-img{width:100%;display:block}

/* --- Floating elements clear --- */
.pls-entry-content figure,
.pls-entry-content iframe{clear:right}
/* A table clears BOTH sides: next to a float it would have to fit its columns
   into what is left, and half a table is not a smaller table but an unreadable
   one. The heading above it comes down with it. */
.pls-entry-content table,
.pls-entry-content figure.wp-block-table,
.pls-entry-content :is(h2,h3):has(+ figure.wp-block-table),
.pls-entry-content :is(h2,h3):has(+ table){clear:both}
/* A quote clears the same way, and for the same reason: it is a framed block
   with a rule down its side, and squeezed into what is left beside a picture it
   loses the frame — the bar ends up under the photo and the text starts on a
   line of its own. A blockquote is either the width of the column or it is not
   a blockquote. */
.pls-entry-content blockquote:not(.alignleft):not(.alignright),
.pls-entry-content figure.wp-block-pullquote:not(.alignleft):not(.alignright){clear:both}

/* --- Base typography --- */
.pls-entry-content{font-size:var(--pls-article-size);line-height:var(--pls-article-lh);color:var(--pls-ink);min-width:0;max-width:100%}
/* Headings written by the author. One carrying a class of the theme belongs to
   a component — the card of a shortcode — and keeps its own type. */
.pls-entry-content h1:not([class*="pls-"]){font-size:var(--pls-entry-h1);margin:1.6em 0 .5em;letter-spacing:-.5px}
.pls-entry-content h2:not([class*="pls-"]){font-size:var(--pls-entry-h2);margin:2em 0 .5em;letter-spacing:-.4px}
.pls-entry-content h3:not([class*="pls-"]){font-size:var(--pls-entry-h3);margin:1.8em 0 .5em;letter-spacing:-.3px}
.pls-entry-content h4:not([class*="pls-"]){font-size:var(--pls-entry-h4);margin:1.5em 0 .5em}
.pls-entry-content p{margin:0 0 1.2em}
.pls-entry-content a{color:var(--pls-brand)}
.pls-entry-content a:hover{color:var(--pls-brand-dark)}
.pls-entry-content img{border-radius:calc(13px * var(--pls-r));margin:1.5em 0}

/* Center-aligned images */
img.aligncenter,.aligncenter img{display:block;margin-left:auto !important;margin-right:auto !important}
figure.aligncenter,.wp-block-image.aligncenter,p.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}
/* When aligncenter img is wrapped in <a> (inline) or in headings/p, center the parent chain. */
a:has(> img.aligncenter){display:block;text-align:center}
p:has(img.aligncenter),h1:has(img.aligncenter),h2:has(img.aligncenter),h3:has(img.aligncenter),h4:has(img.aligncenter),h5:has(img.aligncenter),h6:has(img.aligncenter){text-align:center}
.pls-entry-content p[style*="text-align:center"] img,
.pls-entry-content p[style*="text-align: center"] img,
.pls-entry-content [style*="text-align:center"] > img,
.pls-entry-content [style*="text-align: center"] > img{display:block;margin-left:auto !important;margin-right:auto !important}
/* Left/right aligned images: text wraps beside them.
   An AVIF/WebP plugin wraps the <img> in a <picture>, which is a block, so the
   float has to go on whatever element is actually in the flow — picture, figure
   or anchor — and not on the image alone. */
.pls-entry-content img.alignleft,
.pls-entry-content picture:has(img.alignleft),
.pls-entry-content figure.alignleft,
.pls-entry-content a:has(> img.alignleft){float:left;margin:.3em 1.5em 1em 0;max-width:50%}
.pls-entry-content img.alignright,
.pls-entry-content picture:has(img.alignright),
.pls-entry-content figure.alignright,
.pls-entry-content a:has(> img.alignright){float:right;margin:.3em 0 1em 1.5em;max-width:50%}
/* A float that sits right before a heading starts level with it: the values
   below are the heading's own margin converted to the font size of the figure,
   so they line up rather than nearly line up. */
.pls-entry-content div.wp-block-image:has(+ h2:not([class*="pls-"])) figure:is(.alignleft,.alignright),
.pls-entry-content figure:is(.alignleft,.alignright):has(+ h2:not([class*="pls-"])){margin-top:2.7em}
.pls-entry-content div.wp-block-image:has(+ h3:not([class*="pls-"])) figure:is(.alignleft,.alignright),
.pls-entry-content figure:is(.alignleft,.alignright):has(+ h3:not([class*="pls-"])){margin-top:2em}
/* Inside a wrapper, the image drops its float and margins: only the wrapper floats. */
.pls-entry-content picture img.alignleft,.pls-entry-content picture img.alignright,
.pls-entry-content a>img.alignleft,.pls-entry-content a>img.alignright,
.pls-entry-content figure.alignleft img,.pls-entry-content figure.alignright img{float:none;margin:0;max-width:100%}
@media (max-width:640px){
  .pls-entry-content img.alignleft,.pls-entry-content picture:has(img.alignleft),
  .pls-entry-content figure.alignleft,.pls-entry-content a:has(> img.alignleft){margin:.2em 1em .6em 0}
  .pls-entry-content img.alignright,.pls-entry-content picture:has(img.alignright),
  .pls-entry-content figure.alignright,.pls-entry-content a:has(> img.alignright){margin:.2em 0 .6em 1em}
}

/* Figures + captions */
.pls-entry-content figure{margin:1.5em 0}
/* The video player centres itself when it does not take the whole
   width (a narrower one, say): the specificity is raised here to beat the
   figure rule above, which would otherwise zero the side margins. */
.pls-entry-content figure.pls-video{margin-left:auto;margin-right:auto}
.pls-entry-content figcaption{font-size:13px;color:var(--pls-mute);text-align:center;margin-top:8px;font-style:italic}
/* A caption belongs to its picture, so the picture drops the margin below it:
   images carry 1.5em of air for when they sit in the flow of the text, and
   inside a figure that air fell between the photo and the line describing it,
   which then read as a stray sentence. The margin of the figure still spaces
   the whole thing from the text around it. */
.pls-entry-content figure:has(figcaption) img{margin-bottom:0}

/* Blockquote */
.pls-entry-content blockquote{border-left:3px solid var(--pls-brand);padding:12px 20px;margin:1.5em 0;background:var(--pls-brand-soft);border-radius:0 var(--pls-radius-sm) var(--pls-radius-sm) 0;font-size:inherit;color:var(--pls-ink2)}
.pls-entry-content blockquote p{margin:0}
.pls-entry-content blockquote p:not(:last-child){padding-bottom:.75em}

/* Lists */
.pls-entry-content ul,.pls-entry-content ol{margin:0 0 1.2em;padding-left:1.8em;list-style-position:outside}
.pls-entry-content ul{list-style:disc}
.pls-entry-content ol{list-style:decimal}
.pls-entry-content ol>li::marker{font-weight:700}
.pls-entry-content strong,.pls-entry-content b{font-weight:700}
.pls-entry-content li{padding-bottom:.83em}
.pls-entry-content li:last-child{padding-bottom:0}
/* A nested list lives inside the item that introduces it, so by default it
   starts hard against that line while its own items keep the airier spacing of
   a top level list — the two gaps end up the wrong way round. Here it gets a
   little air above the first child and a tighter step between them, and no
   margin below, since the parent item already carries it. */
.pls-entry-content li>ul,
.pls-entry-content li>ol{margin:.55em 0 0}
.pls-entry-content li li{padding-bottom:.42em}

/* Code blocks */
.pls-entry-content pre{background:var(--pls-band);color:#e4e9f2;padding:20px;border-radius:var(--pls-radius-sm);overflow-x:auto;font-family:var(--pls-font-mono);font-size:14px;line-height:1.6;margin:1.5em 0;max-width:100%;word-break:break-word}
/* The editor's Drop cap. WordPress offers it on any paragraph and implements it
   in wp-block-library, which this theme drops on a page whose blocks it already
   styles — so the option was there and did nothing. Set here as a float rather
   than with `initial-letter`, which browsers still round differently: this way
   the letter sits on the same three lines everywhere. Left out below 480px,
   where a letter this size eats a third of the column. */
.pls-entry-content p.has-drop-cap:not(:focus)::first-letter{float:left;font-size:3.6em;line-height:.84;font-weight:700;
  margin:.02em .1em 0 0;text-transform:uppercase;color:var(--pls-ink)}
.pls-entry-content p.has-drop-cap:not(:focus)::after{content:"";display:table;clear:both}
@media(max-width:480px){
  .pls-entry-content p.has-drop-cap:not(:focus)::first-letter{float:none;font-size:inherit;line-height:inherit;font-weight:inherit;margin:0}
}

/* The editor's Highlight, which WordPress writes as <mark>. Left alone it is
   the browser's own yellow, a colour no theme chose: here it is the brand tint
   the rest of the article already uses, and the text keeps its own colour so
   the contrast never depends on the highlight. */
.pls-entry-content mark{background:color-mix(in srgb, var(--pls-brand) 18%, transparent);color:inherit;padding:0 .2em;border-radius:calc(3px * var(--pls-r))}
.pls-entry-content code{font-family:var(--pls-font-mono);font-size:.9em;background:var(--pls-bg);padding:2px 6px;border-radius:calc(4px * var(--pls-r))}
.pls-entry-content pre code{background:none;padding:0;border-radius:0;font-size:inherit}

/* Tables */

.pls-entry-content table{width:100%;margin:0;border:1px solid var(--pls-border);border-radius:var(--pls-radius-sm);overflow:hidden;font-size:15px;min-width:480px}
.pls-entry-content th{background:var(--pls-bg);font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--pls-border)}
.pls-entry-content td{padding:10px 14px;border-bottom:1px solid var(--pls-border-soft)}

/* HR + iframe */
.pls-entry-content hr{border:none;border-top:1px solid var(--pls-border);margin:2em 0}
.pls-entry-content iframe{max-width:100%;border:1px solid var(--pls-border);border-radius:var(--pls-radius-sm);margin:1.5em 0}
.pls-entry-content .wp-block-embed{margin:1.5em 0}
/* The margin on `figure` is meant for a picture standing alone in the text.
   Several blocks are figures themselves, or hold one, and there that same
   margin lands *inside* the block: the media of a media-text sits in a grid
   cell, so its margin pushes the picture down from the top edge and leaves as
   much again underneath it. The embed does it twice over, once on the figure
   and once on the frame inside. In all these the block already carries the
   spacing, so what is nested in it carries none. */
.pls-entry-content .wp-block-media-text__media,
.pls-entry-content .wp-block-embed figure,
.pls-entry-content .wp-block-embed__wrapper,
.pls-entry-content .wp-block-gallery figure{margin:0}
.pls-entry-content .wp-block-embed iframe{margin:0}
/* And the same one storey down. `img{margin:1.5em 0}` is for a bare image in
   the text, written by the classic editor; inside a figure or a block the
   spacing belongs to the container, and the picture adding its own put 27px
   between the frame and the photograph — above and below, on every block that
   holds one. */
.pls-entry-content figure img,
.pls-entry-content .wp-block-media-text__media img,
.pls-entry-content .wp-block-cover img,
.pls-entry-content .wp-block-gallery img{margin:0}
/* YouTube oEmbed: force 16:9 even when the returned iframe carries an odd
   width and height — 800×600 on a live stream or a premiere, say — which would
   otherwise leave the player stretched or far too tall. YouTube embeds only. */
.pls-entry-content iframe[src*="youtube.com/embed"],
.pls-entry-content iframe[src*="youtube-nocookie.com/embed"],
.pls-entry-content iframe[src*="youtu.be"]{width:100%;height:auto;aspect-ratio:16/9}

/* --- WordPress Gallery ([gallery] shortcode) --- */
.pls-entry-content .gallery{display:grid;gap:8px;margin:1.5em 0}
.pls-entry-content .gallery-columns-1{grid-template-columns:1fr}
.pls-entry-content .gallery-columns-2{grid-template-columns:repeat(2,1fr)}
.pls-entry-content .gallery-columns-3{grid-template-columns:repeat(3,1fr)}
.pls-entry-content .gallery-columns-4{grid-template-columns:repeat(4,1fr)}
.pls-entry-content .gallery-columns-5{grid-template-columns:repeat(5,1fr)}
.pls-entry-content .gallery-columns-6{grid-template-columns:repeat(6,1fr)}
.pls-entry-content .gallery-item{margin:0;text-align:center}
.pls-entry-content .gallery-item img{width:100%;height:auto;display:block;border-radius:var(--pls-radius-sm);cursor:zoom-in;aspect-ratio:1;object-fit:cover;margin:0}
.pls-entry-content .gallery-icon a{display:block}
.pls-entry-content .gallery-caption{font-size:12px;color:var(--pls-mute);margin-top:4px;padding:0 4px}
.pls-entry-content .gallery br{display:none}

/* Gutenberg gallery
   Core defends each picture's width with `:not(#individual-image)` — an id put
   there only to raise specificity. These rules carry the same guard plus
   `.pls-entry-content`, which wins without an `!important`. */
.pls-entry-content .wp-block-gallery,
.pls-entry-content .wp-block-gallery.has-nested-images{display:grid;gap:8px;margin:1.5em 0;align-items:start}
.pls-entry-content .wp-block-gallery.columns-1{grid-template-columns:1fr}
.pls-entry-content .wp-block-gallery.columns-2{grid-template-columns:repeat(2,1fr)}
.pls-entry-content .wp-block-gallery.columns-3{grid-template-columns:repeat(3,1fr)}
.pls-entry-content .wp-block-gallery.columns-4{grid-template-columns:repeat(4,1fr)}
.pls-entry-content .wp-block-gallery.columns-5{grid-template-columns:repeat(5,1fr)}
.pls-entry-content .wp-block-gallery.columns-6{grid-template-columns:repeat(6,1fr)}
/* Without a `columns-` class the editor means "three across", and says so with
   `columns-default` or with nothing at all. */
.pls-entry-content .wp-block-gallery.columns-default,
.pls-entry-content .wp-block-gallery:not([class*="columns-"]){grid-template-columns:repeat(3,1fr)}

.pls-entry-content .wp-block-gallery .wp-block-image,
.pls-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){margin:0;width:100%;max-width:100%}
/* And one class more again for the `columns-N` widths: core repeats the same
   `:not(#individual-image)` guard *with* the columns class — `(1,4,1)`, exactly
   what the rule above scores — and a tie is won by whoever comes last, which is
   core. Hence the list: `(1,5,1)`, and three across is three across. */
.pls-entry-content .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image),
.pls-entry-content .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image){width:100%}
/* `is-cropped` gets its own copy of every rule in core, one class heavier, so
   the same tie has to be broken again — here and on the img below. */
.pls-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)>a,
.pls-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)>div,
.pls-entry-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>a,
.pls-entry-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image)>div{display:block;width:100%;height:auto}
.pls-entry-content .wp-block-gallery .wp-block-image img,
.pls-entry-content .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img,
.pls-entry-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--pls-radius-sm);cursor:zoom-in;margin:0;flex:none}
/* The first generation of the gallery block — `ul.blocks-gallery-grid`, what a
   buyer's old posts are full of. The `ul` is taken out of the way with
   `display:contents` so the items become cells of the theme's own grid. */
.pls-entry-content .wp-block-gallery:not(.has-nested-images){display:grid;gap:8px;margin:1.5em 0}
.pls-entry-content .wp-block-gallery>.blocks-gallery-grid{display:contents;margin:0;padding:0;list-style:none}
.pls-entry-content .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item{width:auto;max-width:none;margin:0}
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-1 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-2 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-3 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-4 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-5 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-6 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-7 .blocks-gallery-item,
.pls-entry-content .wp-block-gallery:not(.has-nested-images).columns-8 .blocks-gallery-item{width:auto;margin:0}
.pls-entry-content .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figure{margin:0;height:100%}
.pls-entry-content .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--pls-radius-sm);cursor:zoom-in;margin:0}
.pls-entry-content .wp-block-gallery:not(.has-nested-images) .blocks-gallery-item figcaption{position:static;background:none;color:var(--pls-mute);font-size:12px;text-align:center;padding:4px 0 0;text-shadow:none}

/* A gallery saved by an old editor falls back to the classic `[gallery]`
   markup, which in a grid would take one cell: the inner gallery is told to
   span every column and lay itself out with the `.gallery-columns-N` rules. */
.pls-entry-content .wp-block-gallery>.gallery,
.pls-entry-content .wp-block-gallery .gallery{grid-column:1/-1;width:100%;margin:0}

/* The caption of the whole gallery runs under all of the columns, not inside
   the first one. (The caption of a single picture *inside* a gallery is left to
   core, which lays it over the image.) */
.pls-entry-content .wp-block-gallery>figcaption,
.pls-entry-content .wp-block-gallery.has-nested-images>figcaption{grid-column:1/-1;margin:4px 0 0;padding:0 4px;font-size:12px;color:var(--pls-mute);text-align:center}

/* --- Mobile overrides --- */
@media(max-width:640px){
    /* Three or more across is unreadable on a phone: everything folds to two. */
    .pls-entry-content .wp-block-gallery.columns-3,
    .pls-entry-content .wp-block-gallery.columns-4,
    .pls-entry-content .wp-block-gallery.columns-5,
    .pls-entry-content .wp-block-gallery.columns-6,
    .pls-entry-content .wp-block-gallery.columns-default,
    .pls-entry-content .wp-block-gallery:not([class*="columns-"]),
    .pls-entry-content .gallery-columns-3,
    .pls-entry-content .gallery-columns-4,
    .pls-entry-content .gallery-columns-5,
    .pls-entry-content .gallery-columns-6,
    .pls-entry-content .gallery-columns-7,
    .pls-entry-content .gallery-columns-8,
    .pls-entry-content .gallery-columns-9{grid-template-columns:repeat(2,1fr)}
    .pls-entry-content .wp-block-gallery img{margin:0}
    .pls-entry-content img{margin:1em 0}
    .pls-entry-content iframe{margin:1em 0}
    .pls-entry-content blockquote{padding:10px 14px;margin:1em 0}
    .pls-entry-content h2:not([class*="pls-"]){font-size:calc(var(--pls-entry-h2) * .84);margin:1.5em 0 .5em}
    .pls-entry-content h3:not([class*="pls-"]){font-size:calc(var(--pls-entry-h3) * .9);margin:1.3em 0 .5em}
    .pls-entry-content pre{padding:14px;font-size:13px}
}

/* ── About page history timeline — [pulsar_about_timeline] ───────────
   The look of .pls-timeline in home.css, fitted to static text. It rides on
   entry-content.css, so it works wherever .pls-entry-content is. */

/* ==========================================================================
   Block editor styles (registered in inc/class-blocks.php)
   ========================================================================== */

.is-style-pulsar-highlight{border-left:4px solid var(--pls-brand);background:var(--pls-brand-soft);padding:18px 22px;border-radius:0 calc(12px * var(--pls-r)) calc(12px * var(--pls-r)) 0;font-style:normal}
.is-style-pulsar-highlight cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--pls-ink-soft)}
.is-style-pulsar-rounded img{border-radius:calc(14px * var(--pls-r))}
.is-style-pulsar-checklist{list-style:none;padding-left:0}
.is-style-pulsar-checklist li{position:relative;padding-left:26px;margin-bottom:8px}
.is-style-pulsar-checklist li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:9px;border-left:2px solid var(--pls-brand);border-bottom:2px solid var(--pls-brand);transform:rotate(-45deg)}
.is-style-pulsar-dots{border:0;height:auto;text-align:center;line-height:1}
.is-style-pulsar-dots::before{content:"\2022 \2022 \2022";letter-spacing:.6em;color:var(--pls-border);font-size:18px}
.is-style-pulsar-card{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);padding:22px 24px}

/* ═══════════════════════════════════════════════════════════════════════
   Core blocks the theme styles itself
   With `wp-block-library-theme` and `global-styles` dequeued, core does not
   deliver the colour presets, the font-size presets or the button.
   ═══════════════════════════════════════════════════════════════════════ */

/* The font sizes of the editor, as the variables core is already asking for.
   Declared here rather than as new classes so that anything else reading them
   — a block, a plugin, a pattern — finds them too. */
:root{
    --wp--preset--font-size--small:14px;
    --wp--preset--font-size--medium:17px;
    --wp--preset--font-size--large:22px;
    --wp--preset--font-size--x-large:30px;
}

/* The default editor palette, in the theme's own values where one exists.
   Without these the colour chosen in the editor simply does not arrive. */
.pls-entry-content .has-black-color{color:#000}
.pls-entry-content .has-white-color{color:#fff}
.pls-entry-content .has-cyan-bluish-gray-color{color:#abb8c3}
/* `:root` in front is not decoration. WordPress ships the two colours of its
   first palette in `wp-admin/css/common.min.css`, written as
   `:root .has-very-light-gray-background-color{background-color:#eee}`, and
   that file is loaded on the front end for anyone signed in — the admin bar
   brings it. At equal weight the later sheet wins, so the theme's own value was
   being overruled and a signed in reader saw a #eee panel on a dark page while
   a visitor saw the right one. One more level here settles it for both. */
:root .pls-entry-content .has-very-light-gray-color{color:#eee}
:root .pls-entry-content .has-very-dark-gray-color{color:#313131}
.pls-entry-content .has-dark-gray-color{color:var(--pls-mute)}
.pls-entry-content .has-pale-pink-color{color:#f78da7}
.pls-entry-content .has-vivid-red-color{color:#cf2e2e}
.pls-entry-content .has-luminous-vivid-orange-color{color:#ff6900}
.pls-entry-content .has-luminous-vivid-amber-color{color:#fcb900}
.pls-entry-content .has-light-green-cyan-color{color:#7bdcb5}
.pls-entry-content .has-vivid-green-cyan-color{color:#00d084}
.pls-entry-content .has-pale-cyan-blue-color{color:#8ed1fc}
.pls-entry-content .has-vivid-cyan-blue-color{color:#0693e3}
.pls-entry-content .has-vivid-purple-color{color:#9b51e0}

.pls-entry-content .has-black-background-color{background-color:#000}
.pls-entry-content .has-white-background-color{background-color:#fff}
.pls-entry-content .has-cyan-bluish-gray-background-color{background-color:#abb8c3}
:root .pls-entry-content .has-very-light-gray-background-color{background-color:var(--pls-bg)}
:root .pls-entry-content .has-very-dark-gray-background-color{background-color:#313131}
.pls-entry-content .has-dark-gray-background-color{background-color:#313131}
.pls-entry-content .has-pale-pink-background-color{background-color:#f78da7}
.pls-entry-content .has-vivid-red-background-color{background-color:#cf2e2e}
.pls-entry-content .has-luminous-vivid-orange-background-color{background-color:#ff6900}
.pls-entry-content .has-luminous-vivid-amber-background-color{background-color:#fcb900}
.pls-entry-content .has-light-green-cyan-background-color{background-color:#7bdcb5}
.pls-entry-content .has-vivid-green-cyan-background-color{background-color:#00d084}
.pls-entry-content .has-pale-cyan-blue-background-color{background-color:#8ed1fc}
.pls-entry-content .has-vivid-cyan-blue-background-color{background-color:#0693e3}
.pls-entry-content .has-vivid-purple-background-color{background-color:#9b51e0}

/* A block that carries a background needs room around the text, which core
   leaves to the theme. */
.pls-entry-content .wp-block-group.has-background{padding:18px 20px;border-radius:var(--pls-radius);margin:1.5em 0}
.pls-entry-content .wp-block-group.has-background>*:first-child{margin-top:0}
.pls-entry-content .wp-block-group.has-background>*:last-child{margin-bottom:0}

/* Buttons: the theme's blue, the theme's radius. Core's own rule is a single
   class, so `.pls-entry-content` in front of it is enough. */
.pls-entry-content .wp-block-buttons{margin:1.5em 0;gap:10px}
.pls-entry-content .wp-block-button__link{background-color:var(--pls-brand);color:#fff;border-radius:var(--pls-radius-sm);padding:11px 20px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;transition:filter .15s ease}
.pls-entry-content .wp-block-button__link:hover{filter:brightness(1.08);color:#fff}
.pls-entry-content .wp-block-button.is-style-outline>.wp-block-button__link{background-color:transparent;color:var(--pls-brand);border:2px solid var(--pls-brand);padding:9px 18px}
.pls-entry-content .wp-block-button.is-style-outline>.wp-block-button__link:hover{background-color:var(--pls-brand-soft);color:var(--pls-brand)}

/* Table cells: core writes `.wp-block-table td` — one class and one element,
   exactly the score of the theme's `.pls-entry-content td` — and a tie is won
   by whoever comes last, which is core. Inside a table block the cells were
   therefore taking core's `border:1px solid` (currentColor: near black) and its
   `.5em` of padding, and the theme's borders never showed. One class more. */
.pls-entry-content .wp-block-table th,
.pls-entry-content .wp-block-table td{padding:10px 14px;border:0;border-bottom:1px solid var(--pls-border-soft)}
.pls-entry-content .wp-block-table th{background:var(--pls-bg);font-weight:600;text-align:left;border-bottom:1px solid var(--pls-border)}
.pls-entry-content .wp-block-table{margin:1.5em 0;overflow-x:auto}
.pls-entry-content .wp-block-table table{border:1px solid var(--pls-border);border-radius:var(--pls-radius-sm);overflow:hidden;border-collapse:separate;border-spacing:0}
.pls-entry-content .wp-block-table tr:last-child td{border-bottom:0}

/* Details: core gives it `cursor:pointer` and stops. */
.pls-entry-content .wp-block-details{margin:1.5em 0;padding:14px 18px;border:1px solid var(--pls-border);border-radius:var(--pls-radius);background:var(--pls-bg)}
.pls-entry-content .wp-block-details summary{font-weight:600;color:var(--pls-ink);list-style:none;position:relative;padding-right:26px}
.pls-entry-content .wp-block-details summary::-webkit-details-marker{display:none}
.pls-entry-content .wp-block-details summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:2px solid var(--pls-mute);border-bottom:2px solid var(--pls-mute);transform:translateY(-70%) rotate(45deg);transition:transform .15s ease}
.pls-entry-content .wp-block-details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.pls-entry-content .wp-block-details>*:not(summary){margin-bottom:0}
.pls-entry-content .wp-block-details>*:nth-child(2){margin-top:10px}

/* Pullquote: core pads it by 4em and centres it, then the theme's rule for a
   plain blockquote draws a blue box inside that padding — two ideas of the same
   element, stacked. The block gets its own look instead. */
.pls-entry-content .wp-block-pullquote{padding:0;margin:2em 0;border-top:2px solid var(--pls-border);border-bottom:2px solid var(--pls-border)}
.pls-entry-content .wp-block-pullquote blockquote{border:0;background:none;border-radius:0;padding:22px 0;margin:0;text-align:center}
.pls-entry-content .wp-block-pullquote blockquote p{font-size:21px;line-height:1.45;font-weight:600;color:var(--pls-ink)}
.pls-entry-content .wp-block-pullquote cite{display:block;margin-top:10px;font-size:13px;font-style:normal;color:var(--pls-mute);text-transform:uppercase;letter-spacing:.04em}
.pls-entry-content .wp-block-pullquote.alignleft,
.pls-entry-content .wp-block-pullquote.alignright{max-width:300px}
.pls-entry-content .wp-block-pullquote.alignleft{float:left;margin:.4em 28px 1em 0}
.pls-entry-content .wp-block-pullquote.alignright{float:right;margin:.4em 0 1em 28px}
/* A pull quote given one of the editor's background colours: the rules above and
   below are the plain version's frame and have nothing to hold once there is a
   panel of colour, and the text would otherwise sit against its edges. The box
   takes the corner radius the rest of the article uses. */
/* A block given a colour from the editor's palette keeps that colour in both
   appearances: it is the author's choice, not the theme's. The words on it
   therefore need an ink chosen for that colour and not for the page — the
   theme's own would put pale text on a pale blue quote in the dark appearance,
   and dark text on a vivid red one in the light.

   The palettes are named one by one rather than matched on "-background-color":
   a class whose colour nothing defines paints nothing, and forcing an ink on a
   block that turned out transparent is how a paragraph ends up dark on dark.
   These are the twelve WordPress itself provides. A colour the author set on
   the text still wins. */
.pls-entry-content :is(.has-white-background-color,.has-cyan-bluish-gray-background-color,.has-pale-pink-background-color,.has-luminous-vivid-amber-background-color,.has-light-green-cyan-background-color,.has-pale-cyan-blue-background-color):not(.has-text-color),
.pls-entry-content :is(.has-white-background-color,.has-cyan-bluish-gray-background-color,.has-pale-pink-background-color,.has-luminous-vivid-amber-background-color,.has-light-green-cyan-background-color,.has-pale-cyan-blue-background-color) :not(a):not(.has-text-color){color:var(--pls-ink-on-light)}
.pls-entry-content :is(.has-black-background-color,.has-vivid-red-background-color,.has-luminous-vivid-orange-background-color,.has-vivid-green-cyan-background-color,.has-vivid-cyan-blue-background-color,.has-vivid-purple-background-color,.has-very-dark-gray-background-color):not(.has-text-color),
.pls-entry-content :is(.has-black-background-color,.has-vivid-red-background-color,.has-luminous-vivid-orange-background-color,.has-vivid-green-cyan-background-color,.has-vivid-cyan-blue-background-color,.has-vivid-purple-background-color,.has-very-dark-gray-background-color) :not(a):not(.has-text-color){color:#fff}
/* The attribution keeps its quieter weight without a second colour to define. */
.pls-entry-content [class*="-background-color"] cite{color:inherit;opacity:.68}

.pls-entry-content .wp-block-pullquote[class*="-background-color"]{border-top:0;border-bottom:0;padding:6px 26px;border-radius:var(--pls-radius-sm)}
.pls-entry-content .wp-block-pullquote[class*="-background-color"] blockquote{padding:20px 0}

/* Quote: the theme's blockquote box already fits it; only the cite was left
   looking like body text. */
.pls-entry-content .wp-block-quote cite,
.pls-entry-content blockquote cite{display:block;margin-top:8px;font-size:13px;font-style:normal;color:var(--pls-mute)}

/* Cover and media & text: core lays them out correctly, they only needed the
   theme's rounding and some air. */
/* `position:relative` is the whole of this rule's importance. Everything the
   Cover block stacks on its picture — the veil below, the gradient overlay, the
   text container — is `position:absolute; inset:0`, and WordPress makes them
   land on the block by giving it a position of its own in `wp-block-library`.
   This theme drops that stylesheet, so the veil escaped the block and settled
   on the nearest positioned ancestor instead: an article with six cover blocks
   was reading through six black gradients, and looked as if a grey film had
   been laid over the page. */
.pls-entry-content .wp-block-cover{position:relative;border-radius:var(--pls-radius);overflow:hidden;margin:1.5em 0}
/* The two background options of the Cover block. WordPress draws them in
   wp-block-library, the sheet this theme drops on a page whose blocks it
   already styles — so "Fixed background" and "Repeat" were offered by the
   editor and did nothing at all. With a fixed background the block paints the
   image on the element itself instead of using the <img>, which is why that one
   is hidden here. Left as a normal cover on touch screens: iOS has never
   supported a fixed attachment, and what it does instead is worse than the
   effect being absent. */
.pls-entry-content .wp-block-cover.has-parallax{background-attachment:fixed;background-size:cover;background-position:center}
.pls-entry-content .wp-block-cover.has-parallax .wp-block-cover__image-background{display:none}
.pls-entry-content .wp-block-cover.has-repeated-background{background-repeat:repeat;background-size:auto}
.pls-entry-content .wp-block-cover.has-repeated-background .wp-block-cover__image-background{display:none}
@media(hover:none),(max-width:782px){
  .pls-entry-content .wp-block-cover.has-parallax{background-attachment:scroll}
}
/* The dim layer of a Cover: core colours it from wp-block-library, which this
   theme does not load, so white text was landing on the photograph. Dark by
   default here, and a Cover with no dim layer gets one from the gradient. */
.pls-entry-content .wp-block-cover .wp-block-cover__background,
.pls-entry-content .wp-block-cover .wp-block-cover__gradient-background{position:absolute;inset:0;z-index:1}
.pls-entry-content .wp-block-cover .has-background-dim{background-color:#000;opacity:.5}
.pls-entry-content .wp-block-cover:not(:has(.has-background-dim))::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 100%);pointer-events:none}
.pls-entry-content .wp-block-cover .wp-block-cover__inner-container{position:relative;z-index:2}
.pls-entry-content .wp-block-cover .wp-block-cover__inner-container :is(p,h1,h2,h3,h4,strong){color:#fff}
.pls-entry-content .wp-block-cover .wp-block-cover__inner-container>*{margin:0 0 .4em}
.pls-entry-content .wp-block-cover .wp-block-cover__inner-container>*:last-child{margin-bottom:0}
.pls-entry-content .wp-block-media-text{margin:1.5em 0;gap:0}
.pls-entry-content .wp-block-media-text .wp-block-media-text__media img{border-radius:var(--pls-radius-sm)}
.pls-entry-content .wp-block-media-text .wp-block-media-text__content>*:first-child{margin-top:0}
.pls-entry-content .wp-block-columns{margin:1.5em 0}
.pls-entry-content .wp-block-column>*:first-child{margin-top:0}

@media(max-width:640px){
    .pls-entry-content .wp-block-pullquote.alignleft,
    .pls-entry-content .wp-block-pullquote.alignright{float:none;max-width:none;margin:1.5em 0}
    .pls-entry-content .wp-block-pullquote blockquote p{font-size:18px}
}
/* Media & text, once it has stacked.
   The block is drawn with no gap and with the first line of the text stripped
   of its top margin: side by side that is right, because the space between the
   picture and the words is the column, not a margin. Stacked, those same two
   rules leave the heading sitting on the photo. The distance comes back as the
   row gap of the grid, which is the one place that does not exist while the two
   are side by side. 600px is WordPress's own breakpoint for the stack, not a
   number of ours: below it the block carries `is-stacked-on-mobile`. */
@media(max-width:600px){
    .pls-entry-content .wp-block-media-text.is-stacked-on-mobile{row-gap:1.2em}
}

/* Images that open in the viewer: the pointer has to say so. Set from the
   script rather than in CSS, because "an image with no link of its own, big
   enough not to be an icon" is a question about the rendered size, which a
   selector cannot ask. */
.pls-entry-content img.pls-zoomable{cursor:zoom-in}
/* These images are tab stops: without a visible ring the keyboard user
   cannot tell which one Enter would open. */
.pls-entry-content img.pls-zoomable:focus-visible{outline:2px solid var(--pls-brand);outline-offset:3px}