/* ── NIAMAVREME BLOG ──────────────────────────────────────────────────────
Everything the blog needs that the main site's design system does not
already carry. Built entirely on its tokens -- no literal colours, radii or
type families below -- so a palette change resynced from the main site
reaches this file too.
fonts / tokens / base / layout are loaded before this and paint the header,
the footer and the container. What follows is only the article furniture:
the page head, the post grid, the article body, the sidebar and pagination. */
/* ── PAGE HEAD ────────────────────────────────────────────────────────────
The blue band under the nav, matching the one the main site puts above a
listing so the two feel like the same section of the site. */
.nv-head{background:var(--blue-dk);color:var(--white);padding:26px 0 28px}
.nv-head h1{font-family:var(--fs);font-size:1.9rem;line-height:1.2;margin:0;text-wrap:balance}
.nv-head p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:.95rem;max-width:70ch}
/* ── THE TWO-COLUMN SHELL ─────────────────────────────────────────────────
Same 248px sidebar the offer listing uses, so the blog lines up with it.
min-width:0 on the results column because a grid item defaults to
min-width:auto and will not shrink below its content -- a long unbroken URL
in a post would otherwise push the page sideways. */
.nv-wrap{display:grid;grid-template-columns:1fr 300px;gap:32px;padding-block:32px 48px}
.nv-wrap > .nv-content{grid-column:1;min-width:0}
.nv-wrap > .nv-side{grid-column:2;min-width:0}
/* ── POST GRID ────────────────────────────────────────────────────────────
auto-fill rather than a fixed count: the same grid serves the archive, the
search results and the home listing, and those have different counts. */
.nv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.nv-card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r12);
box-shadow:var(--sh1);overflow:hidden;display:flex;flex-direction:column;
transition:box-shadow var(--t),transform var(--t)}
.nv-card:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.nv-card-media{display:block;aspect-ratio:3/2;background:var(--g100);overflow:hidden}
.nv-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t)}
.nv-card:hover .nv-card-media img{transform:scale(1.04)}
.nv-card-body{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1;gap:9px}
.nv-card-title{font-family:var(--fs);font-size:1.06rem;line-height:1.3;margin:0;text-wrap:pretty}
.nv-card-title a{color:var(--text);text-decoration:none}
.nv-card-title a:hover{color:var(--blue)}
.nv-card-ex{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.nv-card-meta{margin-top:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
font-size:.79rem;color:var(--muted);padding-top:4px}
.nv-card-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex-shrink:0}
/* Category chips. Colour-coded by nothing -- one accent, used sparingly, is
the site's habit; a per-category palette would compete with the artwork. */
.nv-cats{display:flex;flex-wrap:wrap;gap:6px}
.nv-cat{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;padding:3px 9px;border-radius:100px;text-decoration:none;
background:var(--blue-lt);color:var(--blue-dk);transition:background var(--t)}
.nv-cat:hover{background:var(--g200)}
/* ── ARTICLE ─────────────────────────────────────────────────────────────
65ch is the readable measure; the sidebar is dropped on a single post so the
column can reach it without the page becoming enormously wide. */
.nv-article-hero{margin:0 0 22px;border-radius:var(--r16);overflow:hidden;background:var(--g100)}
.nv-article-hero img{width:100%;height:auto;display:block}
.nv-prose{font-size:1.02rem;line-height:1.72;color:var(--text)}
/* No reading measure here, deliberately. There was a max-width:68ch on
.nv-prose, which capped pictures at the reading width as well -- about
550px -- so a 1024px photograph rendered at half its size. Moving that cap
onto the text freed the pictures but left the other half of the problem:
in an ~890px column, 68ch of text is ~590px, so every paragraph ended with
300px of blank column beside it.
The COLUMN is the measure now. The sidebar bounds it, which is what keeps
the line length from running away; if it ever needs tightening, narrow
.nv-wrap's first track rather than capping the text again. */
.nv-prose > * + *{margin-top:1.1em}
.nv-prose h2,.nv-prose h3,.nv-prose h4{font-family:var(--fs);line-height:1.28;margin-top:1.7em;text-wrap:balance}
.nv-prose h2{font-size:1.5rem}
.nv-prose h3{font-size:1.22rem}
.nv-prose h4{font-size:1.06rem}
.nv-prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.nv-prose a:hover{color:var(--orange)}
.nv-prose img,.nv-prose iframe,.nv-prose video{max-width:100%;height:auto;border-radius:var(--r12);display:block}
.nv-prose figure{margin-inline:0}
.nv-prose figcaption{font-size:.84rem;color:var(--muted);margin-top:7px;text-align:center}
.nv-prose blockquote{margin-inline:0;padding:2px 0 2px 18px;border-left:3px solid var(--orange);
color:var(--muted);font-family:var(--fs);font-size:1.08rem}
.nv-prose ul,.nv-prose ol{padding-left:1.35em}
.nv-prose li + li{margin-top:.4em}
.nv-prose code{background:var(--g100);padding:1px 5px;border-radius:var(--r4);font-size:.92em}
.nv-prose pre{background:var(--g100);padding:14px 16px;border-radius:var(--r8);overflow-x:auto}
.nv-prose pre code{background:none;padding:0}
.nv-prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}
.nv-prose th,.nv-prose td{border:1px solid var(--g200);padding:8px 10px;text-align:left}
.nv-prose hr{border:0;border-top:1px solid var(--g200)}
/* ── WORDPRESS ALIGNMENT CLASSES ──────────────────────────────────────────
The editor writes these into post content and a theme has to style them --
without any rules an "align right" image is simply a block sitting wherever
its own width leaves it, which is what it was doing: 292px in a 350px column,
pushed right, with a dead gutter beside it and no room for text to wrap.
The author's chosen width is respected on a wide screen, where floating is
what they meant. It cannot survive a phone: a float only earns its keep when
text can sit next to it, and at 350px nothing can. */
.nv-prose .aligncenter{margin-inline:auto;text-align:center}
.nv-prose .alignnone{margin-inline:0}
.nv-prose .alignleft{float:left;margin:.3em 1.4em .9em 0;max-width:50%}
.nv-prose .alignright{float:right;margin:.3em 0 .9em 1.4em;max-width:50%}
/* The paragraph after a float must not start beside its tail. */
.nv-prose > *::after{content:'';display:table;clear:both}
/* alignwide/alignfull have no wider canvas to break into here -- the column IS
the page -- so they read as "as wide as possible", which is the column. */
.nv-prose .alignwide,.nv-prose .alignfull{width:100%;max-width:100%;margin-inline:0}
@media(max-width:640px){
.nv-prose .alignleft,
.nv-prose .alignright,
.nv-prose .aligncenter{float:none;margin:0 auto;max-width:100%}
/* !important because the editor writes the size as an INLINE style on the
(figure.is-resized), and inline beats any selector. This is the one
place in the theme that needs it. */
.nv-prose .is-resized img,
.nv-prose img.alignleft,
.nv-prose img.alignright,
.nv-prose img.aligncenter{width:100%!important;height:auto!important}
}
.nv-article-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
color:rgba(255,255,255,.72);font-size:.88rem;margin-top:12px}
.nv-article-meta .avatar{border-radius:50%;flex-shrink:0}
/* ── AUTHOR ───────────────────────────────────────────────────────────────
The byline is a link wherever it appears, and it leads to author.php. */
.nv-byline{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.nv-byline:hover{color:var(--blue)}
.nv-article-meta .nv-byline:hover{color:var(--white);text-decoration:underline}
/* Identity block in the page head band: portrait, then name and count beside
it, both left-aligned against the avatar's right edge and vertically centred
on it. align-items:center rather than start, so a one-line name sits on the
portrait's axis instead of at its top. */
.nv-author-id{display:flex;align-items:center;gap:18px;margin-top:6px}
.nv-author-id > div{min-width:0}
.nv-author-id h1{margin:0}
.nv-author-id p{margin:5px 0 0;color:rgba(255,255,255,.72);font-size:.92rem}
/* The rules sit on the inner : the plugin owns that tag and strips any
class we pass, so the span is the only stable hook. */
.nv-author-av{display:block;flex-shrink:0;width:110px;height:110px}
.nv-author-av img{width:100%;height:100%;object-fit:cover;display:block;
border-radius:50%;border:3px solid rgba(255,255,255,.28)}
@media(max-width:560px){
/* Still a row, not a stack. The portrait comes down to 88px and the name is
allowed to wrap beside it -- 88 + 16 leaves ~246px, enough for a Cyrillic
full name over two lines. min-width:0 on the text column is what permits
that wrap: a flex item's automatic minimum is its content, so without it
the name would push the row wider than the screen instead of breaking. */
.nv-author-id{gap:16px}
.nv-author-av{width:88px;height:88px}
.nv-head .nv-author-id h1{font-size:1.32rem;line-height:1.2}
.nv-author-id p{font-size:.86rem}
}
/* The bio closes the same block, under the portrait and name rather than in a
card of its own. Full width instead of squeezed into the column beside the
portrait: at 390px that column is ~246px, which breaks 400 characters of
prose into a ragged ribbon. */
.nv-author-bio{margin-top:16px;max-width:70ch;color:rgba(255,255,255,.78);
font-size:.95rem;line-height:1.65}
.nv-author-bio p{margin:0}
.nv-author-bio p + p{margin-top:.8em}
.nv-author-bio a{color:var(--white);text-decoration:underline}
.nv-article-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--g200)}
/* ── SIDEBAR ─────────────────────────────────────────────────────────────
Widgets reuse .nv-card, so anything a plugin registers inherits the card
without knowing about it -- see the before_widget wrapper in functions.php. */
.nv-side .widget{padding:16px 18px;margin-bottom:18px}
.nv-side .widget-title{font-family:var(--fs);font-size:1.02rem;margin:0 0 11px;color:var(--text)}
.nv-side ul{list-style:none;margin:0;padding:0}
.nv-side li{padding:7px 0;border-bottom:1px solid var(--g100)}
.nv-side li:last-child{border-bottom:0}
.nv-side a{color:var(--text);text-decoration:none;font-size:.92rem}
.nv-side a:hover{color:var(--blue)}
/* ── RECENT POSTS ─────────────────────────────────────────────────────────
A thumbnail, a title and a date. The list rules above give every .nv-side li
a divider and padding, which is right for a plain link list and wrong here --
these rows are two columns, so the anchor becomes the grid and the row keeps
only its separator. */
.nv-recent li{padding:0}
.nv-recent li + li{margin-top:2px}
.nv-recent-item{display:grid;grid-template-columns:56px 1fr;gap:11px;align-items:start;
padding:9px 0;text-decoration:none}
.nv-recent-thumb{display:block;width:56px;height:56px;border-radius:var(--r8);
overflow:hidden;background:var(--g100)}
.nv-recent-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* min-width:0 or a long unbroken title stretches the 1fr track and pushes the
date out of the card. */
.nv-recent-text{min-width:0;display:flex;flex-direction:column;gap:4px}
.nv-recent-title{font-size:.9rem;line-height:1.32;font-weight:600;color:var(--text);
text-wrap:pretty;transition:color var(--t)}
.nv-recent-item:hover .nv-recent-title{color:var(--blue)}
.nv-recent-date{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted)}
.nv-recent-date svg{flex-shrink:0;opacity:.8}
.nv-side .search-field{width:100%;padding:9px 12px;border:1px solid var(--g200);
border-radius:var(--r8);font-family:var(--f);font-size:.94rem;color:var(--text)}
.nv-side .search-field:focus{outline:2px solid var(--blue);outline-offset:1px}
.nv-side .search-submit{margin-top:8px;width:100%;padding:9px 12px;border:none;cursor:pointer;
border-radius:var(--r8);background:var(--orange);color:var(--white);
font-family:var(--f);font-weight:700;font-size:.92rem;transition:background var(--t)}
.nv-side .search-submit:hover{background:var(--orange-dk)}
/* ── PAGINATION ──────────────────────────────────────────────────────────── */
.nv-pager{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.nv-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:38px;height:38px;padding:0 12px;border-radius:var(--r8);
border:1px solid var(--g200);background:var(--white);color:var(--text);
text-decoration:none;font-weight:600;font-size:.92rem;transition:background var(--t),border-color var(--t)}
.nv-pager .page-numbers:hover{background:var(--g100)}
.nv-pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:var(--white)}
.nv-pager .dots{border-color:transparent;background:none}
/* ── EMPTY STATE / 404 ───────────────────────────────────────────────────── */
.nv-empty{text-align:center;padding:52px 20px}
.nv-empty h2{font-family:var(--fs);font-size:1.4rem;margin:0 0 8px}
.nv-empty p{color:var(--muted);margin:0 0 18px}
.nv-btn{display:inline-block;background:var(--orange);color:var(--white);text-decoration:none;
font-weight:700;padding:11px 22px;border-radius:var(--r8);transition:background var(--t)}
.nv-btn:hover{background:var(--orange-dk)}
/* Visible only to screen readers, and to anyone who tabs to the skip link. */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-reader-text:focus{position:fixed;top:10px;left:10px;z-index:1000;width:auto;height:auto;
clip-path:none;padding:10px 16px;border-radius:var(--r8);
background:var(--blue-dk);color:var(--white);font-weight:700}
@media(max-width:900px){
/* The sidebar goes under the posts rather than beside them. Below this
width the 300px column leaves the cards too narrow to hold a 3:2 image
and a title without the title taking four lines. */
.nv-wrap{grid-template-columns:1fr;gap:26px;padding-block:22px 34px}
.nv-wrap > .nv-content,.nv-wrap > .nv-side{grid-column:1}
.nv-head{padding:20px 0 22px}
.nv-head h1{font-size:1.5rem}
}
@media(max-width:560px){
.nv-grid{grid-template-columns:1fr;gap:16px}
.nv-prose{font-size:1rem}
.nv-head h1{font-size:1.3rem}
}
/* ── OFFERS FROM THE MAIN SITE ────────────────────────────────────────────
Only the band around the cards. The cards themselves are .offer-card from
the copied home.css -- the same markup and the same rules the main site
paints, so they are identical by construction rather than by resemblance.
Nothing here may restyle them; anything that needs to change belongs
upstream in the niamavreme repo and comes back on the next resync.
That rule was worth writing down because breaking it went wrong immediately.
An earlier version put two cards per row on phones, reasoning that three
full-width cards make a longer tail than the article above them. But the card
is DESIGNED full-width at that size: its badge, its price and its button are
sized against the whole screen, and at 169px they came out enormous, spilling
over the artwork. The layout below is the main site's own -- one column on a
phone -- and the internals fit because they were drawn to. */
/* No border-top any more: the section heading below carries its own rule, and
the two together read as a double underline with the title trapped between. */
.nv-offers{margin-top:38px}
@media(min-width:901px){
/* auto-FIT, not the stock auto-FILL, at the stock 280px minimum.
.offers-grid is sized for the main site, where it spans the page. Here it
sits in an 868px column beside the sidebar, which fits exactly two tracks
(3x280 plus two 20px gaps is 880 -- twelve pixels too wide), so the four
offers land as 2x2 rather than 3+1 with one card stranded on its own row.
The minimum was 240px while the strip rendered three; at four that gave
three 276px columns and the fourth wrapped alone -- the same defect the
240px was introduced to fix, one card further along.
auto-fit rather than a hard repeat(2) because the strip does not always
render four: when a post has genuinely related offers it shows only
those, which may be one, and a fixed pair would leave an empty column
beside it. Only the container is touched; the cards keep every rule they
arrived with. */
.nv-offers .offers-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
/* The account slot. blog.js swaps its contents between the signed-out links
and the signed-in chip, so the wrapper -- not its children -- has to be the
flex child that takes the free space. layout.css puts margin-left:auto on
.hd-links and .hd-user, which sat one level too deep once they moved inside
here, leaving Вход/Регистрация beside the logo instead of at the right edge. */
.hd-account{display:flex;align-items:center;gap:10px;margin-left:auto}
/* ── FEATURED CAROUSEL ───────────────────────────────────────────────────
Sticky posts at the top of the listing: image on one side, the post's own
words on the other. Built on the same tokens as .nv-card, at the scale a
hero gets -- it is the card idea enlarged, not a second design.
It sits INSIDE the listing column, beside the sidebar -- not across the
page -- so every size here is set against a ~700px column rather than the
full width.
The track is a scroll-snap strip, not a transform carousel. The browser
then owns the physics: a touch drag, a trackpad flick and the arrow
buttons all move it the same way, keyboard focus scrolls it into view by
itself, and with JS absent it degrades to a strip a reader can still swipe
rather than a stack of slides piled on top of each other. */
/* Sits above .nv-wrap, which supplies the 32px below it -- so this only needs
to space itself from the page head. */
.nv-feat{margin:26px 0 0}
.nv-feat-frame{position:relative}
.nv-feat-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;border-radius:var(--r16);overflow-y:hidden}
.nv-feat-track::-webkit-scrollbar{display:none}
/* The slide is the PHOTOGRAPH, with everything else laid over it. aspect-ratio
rather than a fixed height so the frame keeps its shape as the column
narrows -- the sidebar means this is never the full page width. */
/* A letterbox, not the 16/9 this had when it lived in the 868px listing
column: at the full 1200px container width 16/9 is a 675px-tall photograph,
which pushes everything else off the first screen. 8/3 puts it at 450px and
leaves the first category section in view. max-height holds it in check on
very wide monitors, where even this gets tall. */
.nv-feat-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;
aspect-ratio:8/3;min-height:300px;max-height:480px;border-radius:var(--r16);
overflow:hidden;background:var(--blue-dk);isolation:isolate}
.nv-feat-media{position:absolute;inset:0;display:block}
.nv-feat-media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform 6s ease}
.nv-feat-slide:hover .nv-feat-media img{transform:scale(1.04)}
/* The scrim. Two stops rather than a flat wash: the type sits in the middle of
the frame, and a even overlay dark enough to carry white text there made the
whole photograph muddy. */
.nv-feat-media::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(10,26,45,.30) 0%,rgba(10,26,45,.58) 45%,rgba(10,26,45,.72) 100%)}
.nv-feat-body{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;gap:14px;padding:32px 64px}
.nv-feat-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
color:var(--orange);text-decoration:none}
.nv-feat-eyebrow:hover{color:var(--white)}
.nv-feat-title{font-family:var(--fs);font-size:2.3rem;line-height:1.2;margin:0;
font-weight:700;text-wrap:balance;max-width:26ch}
.nv-feat-title a{color:var(--white);text-decoration:none;
text-shadow:0 2px 18px rgba(0,0,0,.45)}
.nv-feat-title a:hover{text-decoration:underline;text-underline-offset:4px}
.nv-feat-rule{display:block;width:64px;height:2px;background:rgba(255,255,255,.55)}
.nv-feat-cta{display:inline-block;padding:10px 26px;border:1px solid rgba(255,255,255,.85);
color:var(--white);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;transition:background var(--t),color var(--t),border-color var(--t)}
.nv-feat-cta:hover{background:var(--white);color:var(--blue-dk);border-color:var(--white)}
/* Bottom right, over the photograph. */
.nv-feat-meta{position:absolute;right:18px;bottom:14px;z-index:1;
display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end;
font-size:.78rem;color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nv-feat-meta .nv-byline{color:inherit}
.nv-feat-meta .nv-byline:hover{color:var(--white);text-decoration:underline}
.nv-feat-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
/* The avatar is styled by element, NOT by the class passed to get_avatar():
WordPress rendered it as `avatar avatar-32 photo` and dropped the custom
class, so a rule hung on .nv-feat-av matched nothing. */
.nv-feat-meta img{width:28px;height:28px;border-radius:50%;display:block;
object-fit:cover;border:2px solid rgba(255,255,255,.7)}
.nv-feat-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.92);color:var(--blue-dk);
box-shadow:0 3px 14px rgba(0,0,0,.28);transition:background var(--t),color var(--t)}
.nv-feat-nav:hover{background:var(--white);color:var(--blue)}
.nv-feat-nav.prev{left:14px}
.nv-feat-nav.next{right:14px}
.nv-feat-nav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nv-feat-nav[hidden]{display:none}
/* Over the image, not under it: the frame is now edge to edge, and dots below
it left a strip of page that belonged to nothing. */
.nv-feat-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;
display:flex;justify-content:center;gap:7px}
.nv-feat-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
border:0;cursor:pointer;padding:0;transition:background var(--t),width var(--t)}
.nv-feat-dot.on{background:var(--white);width:22px;border-radius:100px}
.nv-feat-dot:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* The frame here is only ~275px narrower than the desktop one, so the ratio
has to widen with it or the hero grows as the screen shrinks: 16/9 put this
at 520px against the wide layout's 450, and 2/1 still left it 13px taller.
21/9 lands at ~397px -- shorter than desktop, as a narrower screen should
be. */
@media(max-width:1000px){
.nv-feat-slide{aspect-ratio:21/9}
.nv-feat-title{font-size:1.8rem}
}
@media(max-width:760px){
.nv-feat-slide{aspect-ratio:4/3;min-height:0;max-height:none}
.nv-feat-body{padding:24px 22px;gap:11px}
.nv-feat-title{font-size:1.28rem;max-width:100%}
.nv-feat-cta{padding:8px 18px;font-size:.74rem}
.nv-feat-nav{display:none}
/* Still over the photograph -- the slide's other children are absolute, so
going static here would drop it in flow at the TOP of the frame. Centred
and lifted clear of the dots instead. */
.nv-feat-meta{left:0;right:0;bottom:36px;justify-content:center}
}
/* ── BACK TO TOP ─────────────────────────────────────────────────────────
Ported unchanged from the main site's layout.css so the control is the same
object on both properties: white disc, hairline border, soft blue-tinted
shadow, filling with blue on hover.
Hidden state is opacity + visibility, NOT display:none: visibility keeps it
out of the tab order while still allowing the fade, and a page whose JS
never runs simply never shows it -- no dead button, no layout shift. */
.to-top{position:fixed;right:16px;bottom:18px;z-index:400;
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--white);border:1px solid var(--g200);color:var(--blue-dk);
box-shadow:0 4px 16px rgba(0,42,84,.16);cursor:pointer;padding:0;
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity 180ms ease,transform 180ms ease,visibility 0s 180ms,
background var(--t),color var(--t),border-color var(--t)}
.to-top.is-on{opacity:1;visibility:visible;transform:none;
transition:opacity 180ms ease,transform 180ms ease,visibility 0s 0s,
background var(--t),color var(--t),border-color var(--t)}
.to-top:hover{background:var(--blue-dk);color:var(--white);border-color:var(--blue-dk)}
.to-top:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.to-top svg{display:block}
@media(min-width:901px){
.to-top{right:24px;bottom:24px}
}
@media(prefers-reduced-motion:reduce){
.to-top{transition:none}
}
/* ── AUTHOR BIO, under the article ───────────────────────────────────────
Sits between the tags and the offers strip on a single post. Quiet by
design: a card the reader meets after the piece is finished, not a second
headline competing with it.
No font-size on the name. The bio wrapper is set a step down and its