/*
Theme Name: Hanna
Author: Hanna
Description: Fast magazine theme for home, cleaning, kitchen and garden tips. Three-column home with endless feed, next article loads under the current one, mega menu, top commenters, category tiles, live chat, reactions, quick read, comments with mood bar. Three colour skins.
Version: 1.31.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Update URI: false
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hanna
Tags: blog, news, three-columns, custom-menu, custom-logo, custom-colors, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Tokens, skins, schemes
   ========================================================================== */
/* Inter (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted: no request to a font CDN. Split by script, so a page only downloads the alphabets it uses. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Arial resized to Inter's metrics: when Inter arrives the text does not move, so the swap costs no layout shift. */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
:root{
	--hn-accent:#ff4936;
	--hn-accent-2:#ff8a3d;
	--hn-accent-ink:#fff;
	--hn-ink:#191a1b;
	--hn-text:#151516;
	--hn-ink-2:#4a4d55;
	--hn-ink-3:#666a75;
	--hn-line:#e6e7eb;
	--hn-bg:#fff;
	--hn-bg-2:#f5f6f8;
	--hn-bg-3:#eceef2;
	--hn-radius:10px;
	--hn-radius-sm:8px;
	--hn-wrap:800px;
	--hn-wrap-wide:1300px;
	--hn-gap:16px;
	--hn-font-body:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	--hn-font-head:var(--hn-font-body);
	--hn-title-scale:1;
	--hn-body-size:1rem;
	--hn-lh:1.6;
	--hn-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 28px -14px rgba(16,24,40,.22);
	--hn-header-h:72px;
}
/* The three skins. An editor's own accent (Customizer) overrides all of them. */
/* --hn-accent / --hn-accent-2: lines, dots, bars — anything that is not text.
   --hn-acc-text: accent-coloured text, 4.5:1 or better on the page background.
   --hn-acc-solid / --hn-acc-solid-2: backgrounds under white text, 4.5:1 or
   better against white. Lighthouse audits every one of these pairs. */
:root,[data-hn-skin="coral"]{--hn-accent:#ff4936;--hn-accent-2:#ff8a3d;--hn-acc-text:#c8341c;--hn-acc-solid:#d63a1f;--hn-acc-solid-2:#d0471a}
[data-hn-skin="ocean"]{--hn-accent:#1565d8;--hn-accent-2:#19b6d2;--hn-acc-text:#1565d8;--hn-acc-solid:#1565d8;--hn-acc-solid-2:#0b7285}
[data-hn-skin="forest"]{--hn-accent:#14845b;--hn-accent-2:#9bc53d;--hn-acc-text:#127a54;--hn-acc-solid:#14845b;--hn-acc-solid-2:#4d7c0f}

@media (prefers-color-scheme:dark){
	:root[data-hn-scheme="auto"]{
		color-scheme:dark;
		--hn-ink:#eceef1;--hn-text:#dfe2e6;--hn-ink-2:#b6bbc1;--hn-ink-3:#9aa0a6;
		--hn-line:#2b2f34;--hn-bg:#121417;--hn-bg-2:#1a1d21;--hn-bg-3:#23272c;
		--hn-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.7);
	}
	:root[data-hn-scheme="auto"][data-hn-skin="coral"]{--hn-acc-text:#ff6b57}
	:root[data-hn-scheme="auto"][data-hn-skin="ocean"]{--hn-acc-text:#6ea8ff}
	:root[data-hn-scheme="auto"][data-hn-skin="forest"]{--hn-acc-text:#3fbf8a}
}
:root[data-hn-scheme="dark"]{
	color-scheme:dark;
	--hn-ink:#eceef1;--hn-text:#dfe2e6;--hn-ink-2:#b6bbc1;--hn-ink-3:#9aa0a6;
	--hn-line:#2b2f34;--hn-bg:#121417;--hn-bg-2:#1a1d21;--hn-bg-3:#23272c;
	--hn-shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px -14px rgba(0,0,0,.7);
}
:root[data-hn-scheme="dark"][data-hn-skin="coral"]{--hn-acc-text:#ff6b57}
:root[data-hn-scheme="dark"][data-hn-skin="ocean"]{--hn-acc-text:#6ea8ff}
:root[data-hn-scheme="dark"][data-hn-skin="forest"]{--hn-acc-text:#3fbf8a}

/* Day/night switch: both sides stay lit, the knob slides to the one that is on. */
.hn-scheme{position:relative;display:inline-flex;align-items:center;flex:none;padding:3px;border:1px solid var(--hn-line);border-radius:999px;background:var(--hn-bg-2);cursor:pointer;line-height:0}
.hn-scheme__knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--hn-bg);box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .18s ease}
.hn-scheme[aria-pressed=true] .hn-scheme__knob{transform:translateX(24px)}
.hn-scheme__side{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--hn-ink-3);transition:color .18s ease}
.hn-scheme[aria-pressed=false] .hn-scheme__side:first-of-type,
.hn-scheme[aria-pressed=true] .hn-scheme__side:last-of-type{color:var(--hn-ink)}
@media (prefers-reduced-motion:reduce){.hn-scheme__knob{transition:none}}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media (pointer:fine){
	html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--hn-accent) 40%,var(--hn-line)) transparent}
	::-webkit-scrollbar{width:12px;height:12px}
	::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
	::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--hn-accent) 40%,var(--hn-line));border-radius:999px;border:3px solid var(--hn-bg)}
	::-webkit-scrollbar-thumb:hover{background:var(--hn-accent)}
}
body{
	margin:0;background:var(--hn-bg);color:var(--hn-text);
	font-family:var(--hn-font-body);font-size:var(--hn-body-size);line-height:var(--hn-lh);
	-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
	display:flex;flex-direction:column;min-height:100vh;
}
#hn-main{flex:1 0 auto}
img,video,iframe,svg{max-width:100%;height:auto}
img{display:block}
a{color:var(--hn-acc-text);text-decoration:none}
:focus-visible{outline:3px solid var(--hn-accent);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--hn-font-head);color:var(--hn-ink);font-weight:600;line-height:1.3;letter-spacing:-.02em;margin:1.5em 0 .5em;text-wrap:pretty}
p,ul,ol,blockquote,figure,table{margin:0 0 1.15em}
figure{margin-inline:0}
hr{border:0;border-top:1px solid var(--hn-line);margin:2em 0}
blockquote{border-left:2px solid var(--hn-line);padding:.2em 0 .2em 1.1em;margin-left:0;color:var(--hn-ink-2)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
pre{background:var(--hn-bg-2);padding:1em;border-radius:var(--hn-radius-sm);overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid var(--hn-line);padding:.5em .7em;text-align:start}

.hn-wrap,.hn-wrap--wide{width:100%;max-width:calc(var(--hn-wrap-wide) + 36px);margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.hn-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--hn-bg);color:var(--hn-ink);padding:12px 18px}
.hn-skip:focus{left:0}
.hn-grad{background:linear-gradient(90deg,var(--hn-accent),var(--hn-accent-2))}

/* ==========================================================================
   3. Top bar, header, mega menu, drawer, search
   ========================================================================== */
.hn-topbar{background:linear-gradient(90deg,var(--hn-acc-solid),var(--hn-acc-solid-2));color:#fff;font-size:12.5px}
.hn-topbar .hn-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:32px}
.hn-topbar ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.hn-topbar a{color:#fff}
.hn-topbar__note{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hn-header{position:sticky;top:0;z-index:40;background:var(--hn-bg);border-bottom:1px solid var(--hn-line)}
.hn-header__bar{position:relative;display:flex;align-items:center;gap:22px;min-height:var(--hn-header-h)}
.hn-logo{display:inline-flex;align-items:center;gap:9px;flex:none;font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--hn-ink);white-space:nowrap}
.hn-logo__mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:16px;font-weight:700;background:linear-gradient(135deg,var(--hn-acc-solid),var(--hn-acc-solid-2))}
.hn-logo img,.hn-logo .custom-logo{max-height:44px;width:auto;max-width:min(46vw,240px);object-fit:contain}

.hn-menu{display:none;align-self:stretch;margin:0 auto}
.hn-menu__list{display:flex;align-items:stretch;gap:26px;height:100%;list-style:none;margin:0;padding:0}
.hn-menu__list>li{position:static;display:flex;align-items:center}
.hn-menu__list>li>a{position:relative;display:flex;align-items:center;gap:6px;height:100%;font-size:15px;font-weight:500;color:var(--hn-ink);white-space:nowrap}
.hn-menu__list>li>a::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:var(--hn-accent);transform:scaleX(0);transition:transform .2s}
.hn-menu__list>li:hover>a::after,.hn-menu__list>.current-menu-item>a::after,.hn-menu__list>.current-menu-ancestor>a::after,.hn-menu__list>.current-post-ancestor>a::after{transform:none}
.hn-menu__list>.menu-item-has-children>a::before,.hn-menu__list>.hn-mi>a::before{content:"";order:2;width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.55}
/* Ordinary dropdowns. */
.hn-menu__list>li:not(.hn-mi){position:relative}
.hn-menu .sub-menu{position:absolute;left:-14px;top:100%;min-width:220px;list-style:none;margin:0;padding:8px;background:var(--hn-bg);border:1px solid var(--hn-line);border-radius:0 0 var(--hn-radius) var(--hn-radius);box-shadow:var(--hn-shadow);z-index:50;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.hn-menu .sub-menu a{display:block;padding:8px 10px;border-radius:6px;color:var(--hn-ink);font-size:14.5px}
.hn-menu .sub-menu a:hover{background:var(--hn-bg-2)}
/* Mega panel: as wide as the header, under it. The item stretches to the full
   bar height so there is no gap for the pointer to fall through, opening waits
   .12s so a pointer passing by does not flash it, closing fades so a diagonal
   move still reaches it. */
.hn-mega{position:absolute;left:0;right:0;top:100%;display:grid;grid-template-columns:320px 1fr 1fr;gap:26px;padding:18px 22px 22px;background:var(--hn-bg);border:1px solid var(--hn-line);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.12);z-index:50;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.hn-menu__list>li:hover>.hn-mega,.hn-menu__list>li:focus-within>.hn-mega,.hn-menu__list>li:hover>.sub-menu,.hn-menu__list>li:focus-within>.sub-menu{visibility:visible;opacity:1;transform:none;transition-delay:.12s,.12s,0s}
.hn-mega__head{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:0;font-weight:600;font-size:16px;color:var(--hn-ink)}
/* A mega item's own sub-items live in the panel's head row, not in a second dropdown on top of it. */
.hn-menu .hn-mi>.sub-menu{display:none}
.hn-mega__sub{margin-left:14px;padding:3px 10px;border:1px solid var(--hn-line);border-radius:20px;font-size:13px;font-weight:500;color:var(--hn-ink)}
.hn-mega__sub:hover{border-color:var(--hn-accent);color:var(--hn-acc-text)}
.hn-mega__head b{font-style:italic;font-weight:800;letter-spacing:-2px;color:var(--hn-acc-text)}
.hn-mega__big{position:relative;display:block;height:260px;border-radius:var(--hn-radius);overflow:hidden;color:#fff;background:var(--hn-bg-3)}
.hn-mega__big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hn-mega__big::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.82))}
.hn-mega__big>span{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:flex;flex-direction:column;gap:6px}
.hn-mega__big b{font-weight:600;font-size:16px;line-height:1.3}
.hn-mega__big time{font-size:13px;opacity:.85}
.hn-mega__big .hn-cat{align-self:flex-start;color:#fff;background:rgba(255,255,255,.18);padding:3px 8px;border-radius:4px}
.hn-mega .hn-timeline{margin:0}

.hn-tools{display:flex;align-items:center;gap:12px;margin-left:auto;color:var(--hn-ink-2)}
.hn-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--hn-ink);flex:none}
.hn-iconbtn:hover{background:var(--hn-bg-2)}
.hn-iconbtn svg{width:20px;height:20px}
.hn-follow{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 15px;border:1px solid var(--hn-line);border-radius:999px;color:var(--hn-ink);font-size:13.5px;font-weight:500;white-space:nowrap}
.hn-follow svg{color:var(--hn-acc-text)}
.hn-follow:hover{border-color:var(--hn-accent)}

@media (min-width:1000px){
	.hn-burger{display:none!important}
	.hn-menu{display:block}
}
@media (max-width:999px){
	.hn-header__bar{gap:10px;min-height:60px}
	.hn-follow span{display:none}
	.hn-follow{padding:0 10px}
}

/* reading progress: scaled by app.js */
.hn-progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--hn-accent),var(--hn-accent-2));will-change:transform;pointer-events:none}
body:not(.single-post) .hn-progress{display:none}

/* slide-in menu */
.hn-drawer{position:fixed;inset:0 auto 0 0;width:min(86vw,340px);background:var(--hn-bg);z-index:60;transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;padding:14px;padding-left:max(14px,env(safe-area-inset-left));padding-bottom:max(14px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--hn-line)}
/* Closed = visibility:hidden too: iOS 26 Safari tints its bottom toolbar from a fixed
   element touching the bottom edge, off screen or not — a white band over the chat. */
.hn-drawer[data-open]{transform:none;visibility:visible;transition:transform .22s ease}
.hn-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.hn-drawer ul{list-style:none;margin:0;padding:0}
.hn-drawer li a{display:block;padding:12px 10px;border-radius:var(--hn-radius-sm);color:var(--hn-ink);font-weight:500}
.hn-drawer li a:hover{background:var(--hn-bg-2)}
.hn-drawer .sub-menu a{padding-left:24px;color:var(--hn-ink-2)}
.hn-drawer .hn-mega{display:none}
.hn-scrim{position:fixed;inset:0;background:rgba(6,10,16,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
.hn-scrim[data-open]{opacity:1;pointer-events:auto}

/* search sheet */
.hn-searchsheet{display:none;border-top:1px solid var(--hn-line);background:var(--hn-bg-2);padding:12px 0}
.hn-searchsheet[data-open]{display:block}
.hn-searchform{display:flex;gap:8px}
.hn-searchform input[type=search]{flex:1;min-width:0;border:1px solid var(--hn-line);background:var(--hn-bg);color:var(--hn-ink);border-radius:999px;padding:11px 16px;font-size:1rem}
.hn-searchform button{border:0;background:var(--hn-acc-solid);color:var(--hn-accent-ink);border-radius:999px;padding:0 20px;font-weight:600;cursor:pointer}

/* WP admin bar */
.admin-bar .hn-header{top:32px}
.admin-bar .hn-tocbar{top:calc(var(--hn-header-real,var(--hn-header-h)) + 32px)}
.admin-bar .hn-body>h2,.admin-bar .hn-body>h3{scroll-margin-top:calc(var(--hn-header-real,var(--hn-header-h)) + 92px)}
@media screen and (min-width:601px) and (max-width:782px){
	.admin-bar .hn-header{top:46px}
	.admin-bar .hn-tocbar{top:calc(var(--hn-header-real,var(--hn-header-h)) + 46px)}
}
@media screen and (max-width:600px){
	.admin-bar .hn-header{top:0}
	.admin-bar .hn-tocbar{top:var(--hn-header-real,var(--hn-header-h))}
}

/* ==========================================================================
   4. Shared bits: category label, flags, author line, widgets
   ========================================================================== */
.hn-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0;color:var(--hn-ink)}
.hn-cat::before{content:"";width:9px;height:6px;border-radius:1px;background:var(--c,var(--hn-accent))}
.hn-flag{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:3px;font-size:10.5px;font-weight:600;text-transform:uppercase;line-height:1.5;color:#fff;background:var(--hn-acc-solid);vertical-align:1px}
.hn-flag--video,.hn-flag--breaking{background:#c42b26}
.hn-flag--tested{background:#15803d}
.hn-flag--hot{background:#c2410c}
.hn-flag--exclusive{background:#5b3fd6}
.hn-flag--pick{background:#1d64c4}
.hn-who{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:13px;font-weight:500;color:var(--hn-ink)}
.hn-who img,.hn-who .hn-avatar{width:28px;height:28px;border-radius:50%;flex:none}
.hn-who b{font-weight:500}
.hn-who time,.hn-who span:last-child{color:var(--hn-ink-3)}
.hn-sep{width:1px;height:12px;background:var(--hn-line)}
.hn-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;line-height:1;flex:none}

.hn-side{min-width:0}
.hn-side[data-hn-sticky]{position:sticky;top:var(--hn-stick,96px);align-self:start}
.admin-bar .hn-side[data-hn-sticky]{top:var(--hn-stick,128px)}
/* Taller than the window (app.js): the column scrolls, its last block sticks. */
.hn-side[data-hn-sticky].is-tall{position:static;align-self:stretch}
.hn-side>.is-stuck{position:sticky;top:var(--hn-stick,96px)}
.hn-widget{margin-bottom:34px}
.hn-wtitle{position:relative;font-size:16.5px;font-weight:600;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--hn-line)}
.hn-wtitle::after{content:"";position:absolute;left:0;bottom:-1px;width:34px;height:2px;background:var(--hn-accent)}

.hn-fans{list-style:none;margin:0;padding:0}
.hn-fans li{margin-bottom:8px;border:1px solid var(--hn-line);border-radius:var(--hn-radius-sm);font-size:14px;transition:border-color .2s}
.hn-fans li:hover{border-color:var(--hn-ink-3)}
.hn-fans__row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:inherit;color:inherit}
.hn-fans__row:hover b{color:var(--hn-acc-text)}
/* A comment opened from a link clears the sticky header and flashes once. */
.hn-comment{scroll-margin-top:140px}
.hn-comment.is-target{animation:hn-flash 2.4s ease}
@keyframes hn-flash{0%,40%{background:color-mix(in srgb,var(--hn-accent) 14%,transparent)}100%{background:transparent}}
.hn-fans b{display:block;font-weight:500;color:var(--hn-ink)}
.hn-fans small{display:block;font-size:13px;color:var(--hn-ink-2)}
.hn-fans__row>span:nth-child(2){flex:1;min-width:0}
.hn-fans__row>svg{flex:none;margin-right:4px}
.hn-fans svg{color:var(--hn-ink-3)}
.hn-fans__pic{position:relative;flex:none}
.hn-fans__pic i{position:absolute;top:-7px;left:-7px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:2px solid var(--hn-bg);border-radius:999px;background:var(--hn-ink);color:var(--hn-bg);font-size:11.5px;font-style:normal;font-weight:700;line-height:1}
.hn-fans__r1 .hn-fans__pic i{background:linear-gradient(135deg,#ffd75e,#e5a100);color:#3d2a00}
.hn-fans__r2 .hn-fans__pic i{background:linear-gradient(135deg,#f1f3f6,#a9b1bc);color:#2b3138}
.hn-fans__r3 .hn-fans__pic i{background:linear-gradient(135deg,#f3b27c,#b5652a);color:#3a1d06}
.hn-fans__r1 svg{color:#e5a100}.hn-fans__r2 svg{color:#9aa3ad}.hn-fans__r3 svg{color:#c07034}
.hn-fans li.hn-fans__r1{border-color:#f1d27a;background:linear-gradient(90deg,rgba(255,215,94,.14),transparent 70%)}
.hn-pet,.hn-fans .hn-avatar{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:none;background:var(--hn-bg-2)}

.hn-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--hn-line)}
.hn-timeline li{position:relative;margin-bottom:22px;font-size:14px;font-weight:600;line-height:1.35}
.hn-timeline li:last-child{margin-bottom:0}
.hn-timeline li::before{content:"";position:absolute;left:-19px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--c,var(--hn-accent));box-shadow:0 0 0 3px var(--hn-bg)}
.hn-timeline time{display:block;margin-bottom:2px;font-size:13px;font-weight:400;color:var(--hn-ink-3)}
.hn-timeline a{color:var(--hn-ink)}
.hn-timeline a:hover{color:var(--hn-acc-text)}

.hn-mvbig{display:block;margin-bottom:18px;text-align:center;color:var(--hn-ink)}
.hn-mvbig__img{display:block;aspect-ratio:16/10;border-radius:var(--hn-radius);overflow:hidden;margin-bottom:12px;background:var(--hn-bg-3)}
.hn-mvbig__img img,.hn-mini__img img,.hn-card__img img,.hn-cover img,.hn-tip__img img{width:100%;height:100%;object-fit:cover}
.hn-mvbig b{display:block;margin:6px 0 4px;font-size:16px;font-weight:600;line-height:1.3}
.hn-mvbig time{font-size:13px;color:var(--hn-ink-3)}
.hn-mini{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:start;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hn-line);color:var(--hn-ink)}
.hn-mini:last-child{border-bottom:0;margin-bottom:0}
.hn-mini__img{display:block;aspect-ratio:1;border-radius:var(--hn-radius-sm);overflow:hidden;background:var(--hn-bg-3)}
.hn-mini b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.hn-mini time{display:block;margin-top:6px;font-size:13px;color:var(--hn-ink-3)}
.hn-mini:hover b,.hn-mvbig:hover b{color:var(--hn-acc-text)}

.hn-cattiles a{--deep:color-mix(in srgb,var(--c,var(--hn-ink)) 45%,#000);position:relative;display:flex;align-items:center;height:96px;margin-bottom:10px;border-radius:10px;overflow:hidden;color:#fff;font-size:17px;font-weight:600;background:var(--deep)}
.hn-cattiles img{position:absolute;top:0;right:0;width:70%;height:100%;object-fit:cover}
.hn-cattiles a::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--deep) 30%,transparent 85%)}
.hn-cattiles span{position:relative;z-index:1;display:block;max-width:88%;padding:0 18px;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hn-cattiles small{display:block;margin-top:6px;font-size:14px;font-weight:400;opacity:.92}
.hn-cattiles a:hover img{transform:scale(1.04)}
.hn-cattiles img{transition:transform .4s}

/* ==========================================================================
   5. Home: three columns, card grid
   ========================================================================== */
.hn-home{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:30px;padding-top:34px;padding-bottom:20px}
.hn-home--r{grid-template-columns:minmax(0,1fr) 300px}
.hn-home--l{grid-template-columns:230px minmax(0,1fr)}
.hn-home--none{grid-template-columns:minmax(0,1fr)}
/* The space a switched-off column leaves goes to the cards. */
.hn-home--l .hn-cards,.hn-home--r .hn-cards{grid-template-columns:repeat(3,1fr)}
.hn-home--none .hn-cards{grid-template-columns:repeat(4,1fr)}
.hn-intro{margin:0 0 26px;font-size:1.05rem;color:var(--hn-ink-2)}
.hn-cards{display:grid;grid-template-columns:1fr 1fr;gap:34px 22px}
.hn-card{min-width:0}
.hn-card__img{position:relative;display:block;aspect-ratio:3/2;border-radius:var(--hn-radius);overflow:hidden;margin-bottom:14px;background:var(--hn-bg-3)}
.hn-card__img img{transition:transform .45s cubic-bezier(.2,.6,.2,1)}
.hn-card__body{padding:0 8px}
.hn-card__kicker{margin:0;line-height:1.4}
.hn-card__title{font-size:16.5px;font-weight:600;line-height:1.3;margin:8px 0 12px}
.hn-card__title a{color:var(--hn-ink)}
.hn-t{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.hn-card__text{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--hn-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){
	.hn-card:hover .hn-card__img img{transform:scale(1.05)}
	.hn-card:hover .hn-t{background-size:100% 1.5px}
}
.hn-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(229,50,45,.92);color:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.hn-play svg{margin-left:3px}
/* Cards fade in as they arrive (app.js, never above the fold). */
.hn-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.hn-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.hn-reveal{opacity:1;transform:none;transition:none}}
.hn-loadmore{display:block;width:max-content;margin:34px auto 0;padding:11px 28px;border:0;border-radius:999px;background:linear-gradient(90deg,var(--hn-acc-solid),var(--hn-acc-solid-2));color:#fff;font-weight:600;cursor:pointer}
.hn-loadmore[data-auto]{background:none;color:var(--hn-ink-3);font-weight:500;padding:8px}
/* The old grids still used by archives, search and the exit panel. */
.hn-grid{display:grid;gap:34px 22px;grid-template-columns:1fr}
@media (min-width:640px){.hn-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.hn-grid--3{grid-template-columns:repeat(3,1fr)}}
.hn-section{margin:28px 0}
.hn-section__head{display:flex;align-items:baseline;gap:10px;margin:0 0 16px}
.hn-section__title{font-size:1.3rem;margin:0}
.hn-section__more{margin-left:auto;font-size:.9rem;font-weight:500}

/* compact list row (What to read next / drawer of related) */
.hn-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--hn-line)}
.hn-row:last-child{border-bottom:0}
.hn-row__media{flex:0 0 96px;border-radius:var(--hn-radius-sm);overflow:hidden;aspect-ratio:1/1;background:var(--hn-bg-3)}
.hn-row__media img{width:100%;height:100%;object-fit:cover}
.hn-row__title{font-size:1.02rem;font-weight:600;margin:0;line-height:1.3;font-family:inherit}
.hn-row__title a{color:var(--hn-ink);text-decoration:none}
.hn-row__meta{font-size:.78rem;color:var(--hn-ink-3);margin-top:4px}
.hn-row__text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--hn-ink-2)}

/* horizontal carousel (Trending stories / Beeps) */
.hn-carousel-wrap{position:relative}
.hn-carousel__btn{position:absolute;top:var(--hn-arrow-top,38%);transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--hn-line);background:var(--hn-bg);color:var(--hn-ink);box-shadow:var(--hn-shadow);cursor:pointer;display:grid;place-items:center}
.hn-carousel__btn:hover{background:var(--hn-bg-2)}
.hn-carousel__btn svg{width:22px;height:22px}
.hn-carousel__btn.is-prev{left:-14px}
.hn-carousel__btn.is-next{right:-14px}
.hn-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;overscroll-behavior-x:contain}
.hn-carousel::-webkit-scrollbar{display:none}
.hn-carousel>*{scroll-snap-align:start}
@media (min-width:700px){.hn-carousel{grid-auto-columns:38%}}
@media (min-width:1000px){.hn-carousel{grid-auto-columns:26%}}
.hn-trend{display:flex;flex-direction:column;border:1px solid var(--hn-line);border-radius:var(--hn-radius);overflow:hidden;background:var(--hn-bg)}
.hn-trend__media{display:block;aspect-ratio:16/9;background:var(--hn-bg-3)}
.hn-trend__media img{width:100%;height:100%;object-fit:cover}
/* Two clamped lines keep every card the same height and stop the headline
   being pushed out of view by a tall image. */
.hn-trend__body{display:flex;flex-direction:column;gap:5px;padding:11px 12px 13px;flex:1}
.hn-trend__title{font-size:.95rem;font-weight:600;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-trend__title a{color:var(--hn-ink);text-decoration:none}
.hn-trend__views{font-size:.74rem;color:var(--hn-ink-3);margin-top:auto;display:flex;gap:6px;align-items:center}

/* ==========================================================================
   6. Article: header, cover, centred text, its own sidebar
   ========================================================================== */
.hn-single{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"next next" "main side";gap:0 40px;padding-top:34px}
.hn-single>.hn-nextup{grid-area:next}
.hn-single>.hn-single__main{grid-area:main;min-width:0}
.hn-single>.hn-side{grid-area:side}
.hn-single--full,.hn-single--full.hn-single--alt{grid-template-columns:minmax(0,880px);grid-template-areas:"next" "main";justify-content:center}
.hn-single+.hn-single,[data-hn-reader]>div>.hn-single{margin-top:46px;padding-top:34px;border-top:1px solid var(--hn-line)}
/* Every other article in the feed: sidebar left, date beside the headline. */
.hn-single--alt{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"next next" "side main"}
.hn-nextup{margin:-52px 0 6px}
.hn-nextup>p{display:flex;justify-content:center;margin:0}
.hn-nextup span{background:var(--hn-bg);padding:4px 14px;border:1px solid var(--hn-line);border-radius:20px;font-size:12px;font-weight:500;color:var(--hn-ink-3)}

.hn-head{display:block}
.hn-date{display:none;margin:0;text-align:center;line-height:1.1;color:var(--hn-ink)}
.hn-single--alt .hn-head{display:grid;grid-template-columns:96px 1fr;gap:0 30px}
.hn-single--alt .hn-date{display:block;align-self:center;padding:6px 26px 6px 0;border-right:2px solid var(--hn-ink)}
.hn-date b{display:block;font-size:46px;font-weight:600;letter-spacing:-.02em}
.hn-date span{font-size:15px;color:var(--hn-ink-2);white-space:nowrap}
.hn-crumbs{margin-bottom:14px;font-size:13.5px;color:var(--hn-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-crumbs a,.hn-breadcrumbs a{color:var(--hn-ink);text-decoration:underline;text-decoration-color:var(--hn-line);text-underline-offset:3px}
.hn-crumbs a:hover{color:var(--hn-acc-text)}
.hn-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.hn-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border:1px solid var(--hn-line);border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase;color:var(--hn-ink)}
.hn-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c,var(--hn-accent))}
.hn-chip--tested::before{background:#1f9d55}
.hn-chip--video::before{background:#e5322d}
.hn-title{font-size:calc(29px * var(--hn-title-scale));font-weight:600;line-height:1.3;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--hn-line)}
.hn-dek{margin:0 0 20px;font-size:16px;color:var(--hn-text)}
.hn-meta{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:15px;color:var(--hn-ink-3)}
.hn-meta img,.hn-meta .hn-avatar{width:54px;height:54px;border-radius:50%;flex:none}
.hn-meta__name{display:block;margin-bottom:2px;font-size:16px;font-weight:600;color:var(--hn-ink)}
.hn-meta__stat{display:inline-flex;align-items:center;gap:5px;margin-left:14px;color:var(--hn-ink-3)}
.hn-meta__stat svg{stroke-width:1.5}
.hn-cover{position:relative;margin:0 0 34px;border-radius:var(--hn-radius);overflow:hidden;aspect-ratio:16/10;background:var(--hn-bg-3)}
.hn-cover figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.hn-content{font-size:17px;line-height:1.65}
.hn-body{font-size:inherit}
.hn-body p a,.hn-body li a{color:var(--hn-acc-text);text-decoration:underline;text-decoration-color:var(--hn-accent);text-decoration-thickness:1px;text-underline-offset:3px}
.hn-body p a:hover,.hn-body li a:hover{text-decoration-thickness:2px}
.hn-body ul,.hn-body ol{padding-left:1.25em}
.hn-body li{margin-bottom:.4em}
.hn-body figcaption{font-size:13px;color:var(--hn-ink-3);text-align:center;margin-top:8px}
.hn-page{max-width:var(--hn-wrap);margin:20px auto 0;font-size:17px;line-height:1.65}
.hn-breadcrumbs{font-size:13.5px;color:var(--hn-ink-2);margin:24px 0 0}

/* ==========================================================================
   7. Top tips strip, footer, back to top
   ========================================================================== */
.hn-topstrip{padding-top:40px}
.hn-topstrip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.hn-tip__img{position:relative;display:block;aspect-ratio:16/10;margin-bottom:14px;border-radius:10px;overflow:hidden;background:var(--hn-bg-3)}
.hn-tip__img img{transition:transform .4s}
.hn-tip:hover .hn-tip__img img{transform:scale(1.04)}
.hn-tip__img b{position:absolute;top:10px;left:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--hn-acc-text);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.hn-tip__kicker{margin:0 0 8px}
.hn-tip__title{margin:0 0 12px;font-size:17px;font-weight:600;line-height:1.4}
.hn-tip__title a{color:var(--hn-ink)}
.hn-tip__title a:hover{color:var(--hn-acc-text)}
.hn-tip .hn-who span{color:var(--hn-ink)}

.hn-footer{margin-top:44px;padding:34px 0 calc(34px + env(safe-area-inset-bottom));background:#111;color:#9a9a9a;font-size:13.5px}
body:has([data-hn-stickybar]) .hn-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.hn-footer__in{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.hn-footer .hn-logo{color:#fff}
.hn-footer__text{max-width:420px;margin-top:12px}
.hn-footer__text p{margin:0 0 .6em}
.hn-footer__links{text-align:right}
.hn-footer nav ul{list-style:none;display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;padding:0;margin:0 0 12px}
.hn-footer a{color:#cfcfcf}
.hn-footer a:hover{color:#fff}
.hn-footer__social{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hn-footer__social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #333;border-radius:50%}
.hn-footer__social svg{width:18px;height:18px}
.hn-footer__optout{margin:0 0 10px}
.hn-footer__copy{margin:0;color:#8a8a8a}
.hn-linkbtn{border:0;background:none;padding:0;font:inherit;font-size:.82rem;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:900px){.hn-footer,body:has([data-hn-stickybar]) .hn-footer{padding-bottom:34px}}
.hn-totop{position:fixed;right:18px;bottom:86px;z-index:35;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hn-accent);border-radius:8px;background:var(--hn-bg);color:var(--hn-acc-text);cursor:pointer}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
	.hn-home--lr{grid-template-columns:minmax(0,1fr) 300px}
	.hn-home--l{grid-template-columns:minmax(0,1fr)}
	.hn-side--left{display:none}
	.hn-home--none .hn-cards{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
	.hn-home,.hn-home--lr,.hn-home--l,.hn-home--r{grid-template-columns:1fr}
	.hn-home--l .hn-cards,.hn-home--r .hn-cards,.hn-home--none .hn-cards{grid-template-columns:1fr 1fr}
	.hn-single,.hn-single--alt{grid-template-columns:1fr;grid-template-areas:"next" "main" "side"}
	.hn-side[data-hn-sticky],.hn-side>.is-stuck{position:static}
	.hn-single--alt .hn-head{display:block}
	.hn-single--alt .hn-date{display:none}
	.hn-topstrip__grid{grid-template-columns:repeat(2,1fr);gap:22px 14px}
	.hn-tip__title{font-size:15px}
	.hn-footer__links{text-align:left}
	.hn-footer nav ul{justify-content:flex-start}
}
@media (max-width:560px){
	.hn-cards{grid-template-columns:1fr}
	.hn-title{font-size:24px}
	.hn-content{font-size:16.5px}
	.hn-topbar__nav{display:none}
}

/* ==========================================================================
   5. Single article
   ========================================================================== */

.hn-body>h2{font-size:calc(1.55rem * var(--hn-title-scale));font-weight:800;scroll-margin-top:calc(var(--hn-header-real,var(--hn-header-h)) + 60px)}
.hn-body>h3{font-size:1.22rem;font-weight:700;scroll-margin-top:calc(var(--hn-header-real,var(--hn-header-h)) + 60px)}
.hn-body img{border-radius:var(--hn-radius-sm)}

/* oEmbeds: the wrapper reserves 16/9 up front (zero layout shift) and the
   player is stretched to fill it — an iframe keeps its own 560x315 otherwise
   and spills past the edge. */
.hn-embed{display:block;position:relative;width:100%;aspect-ratio:16/9;margin:0 0 1.2em;border-radius:var(--hn-radius-sm);overflow:hidden;background:var(--hn-bg-3)}
.hn-embed>iframe,.hn-embed>video,.hn-embed>object,.hn-embed>embed{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0}
/* Core's responsive-embed support adds its own ratio box (a ::before with
   padding-top plus absolutely positioned iframes) around the same embed. Two
   ratio systems nested inside each other is what squashed the player: ours owns
   the ratio, core's is switched off here. */
.wp-block-embed__wrapper:has(.hn-embed)::before{content:none}
.wp-block-embed:has(.hn-embed) .wp-block-embed__wrapper{padding:0;position:static}
.wp-block-embed:has(.hn-embed){margin-block:0 1.2em}
.wp-embed-aspect-4-3 .hn-embed{aspect-ratio:4/3}
.wp-embed-aspect-1-1 .hn-embed{aspect-ratio:1/1}
.wp-embed-aspect-21-9 .hn-embed{aspect-ratio:21/9}
.wp-embed-aspect-9-16 .hn-embed{aspect-ratio:9/16;max-width:420px;margin-inline:auto}
/* A raw <iframe> pasted into the editor (or injected by another plugin) never
   passes through the oEmbed filter, so it keeps width=560 height=315. Scaling
   the width without the height is exactly what squashes the player. */
.hn-body iframe{width:100%;height:auto;aspect-ratio:16/9}
.hn-body figure.wp-block-embed iframe{width:100%}
.hn-body figcaption{font-size:.79rem;color:var(--hn-ink-3);margin-top:6px}
.hn-body ul,.hn-body ol{padding-left:1.25em}
.hn-body li{margin-bottom:.4em}

/* read-more collapse (AP style) */
.hn-collapse{position:relative}
.hn-collapse[data-collapsed]{max-height:var(--hn-collapse-h,60vh);overflow:hidden}
/* The fade has to be opaque well before the clip line, otherwise the last
   visible line of text gets sliced in half. */
/* Reaches solid background well before the cut, so the half-line the crop leaves
   behind is never visible. */
.hn-collapse[data-collapsed]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background:linear-gradient(to bottom,transparent,var(--hn-bg) 52%,var(--hn-bg));pointer-events:none}
.hn-readmore{display:flex;justify-content:center;margin:10px 0 26px;position:relative;z-index:1}
/* While the body is folded the button sits over the faded tail instead of below
   the crop — otherwise it lands against a chopped heading and reads as if it is
   covering the text. */
.hn-collapse[data-collapsed] + .hn-readmore,
.hn-collapse[data-collapsed] ~ .hn-readmore{margin-top:-64px}
.hn-readmore button{display:inline-flex;align-items:center;gap:9px;background:var(--hn-ink);color:var(--hn-bg);border:0;border-radius:999px;padding:14px 26px;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:var(--hn-shadow)}
.hn-readmore button:hover{opacity:.9}
.hn-readmore svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.hn-readmore button[aria-expanded=true] svg{transform:rotate(180deg)}

/* AI summary — Quick Read (NDTV) / Need to know (People) */
.hn-summary{border-radius:var(--hn-radius);padding:2px;margin:20px 0 24px;background:linear-gradient(120deg,var(--hn-accent),var(--hn-accent-2))}
.hn-summary__in{background:var(--hn-bg);border-radius:calc(var(--hn-radius) - 2px);padding:16px 16px 14px}
.hn-summary__head{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:start;font:inherit;color:inherit}
.hn-summary__head[aria-expanded=true]{margin-bottom:10px}
.hn-summary__spark{width:22px;height:22px;flex:none}
.hn-summary__label{font-weight:800;font-size:1.02rem;background:linear-gradient(90deg,var(--hn-accent),var(--hn-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hn-summary__note{font-size:.74rem;color:var(--hn-ink-3);display:block;font-weight:400;margin:10px 0 0}
/* The first point, showing through the closed card. Two lines maximum: this is
   the hook, not the summary — it has to end mid-thought to be worth a tap. */
.hn-summary__peek{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:.88rem;font-weight:400;line-height:1.4;color:var(--hn-ink-2)}
.hn-summary__head[aria-expanded=true] .hn-summary__peek{display:none}
.hn-summary__toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:0;cursor:pointer;color:var(--hn-ink-3);padding:0}
.hn-summary__toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
/* The chevron flips when the card opens. The gift does not — it is a picture of
   a box, not an arrow, and a box turned upside down is just a box upside down. */
.hn-summary__head[aria-expanded=true] .hn-summary__toggle:not(.hn-summary__toggle--gift) svg{transform:rotate(180deg)}
.hn-summary__toggle--gift{color:var(--hn-acc-text)}
.hn-summary__toggle--gift>svg{transition:none}
/* Alive, but not frantic: a pulse every couple of seconds with a shake on top of
   it. Something that moves without stopping reads as a broken element; something
   that moves now and then reads as an invitation. */
.hn-summary__head[aria-expanded=false] .hn-summary__toggle--gift>svg{
	animation:hn-gift-wiggle 2.6s ease-in-out infinite,hn-gift-glow 2.6s ease-in-out infinite;
	transform-origin:50% 85%}
.hn-summary__shut{display:none;line-height:0}
.hn-summary__head[aria-expanded=true] .hn-summary__toggle--gift>svg{display:none}
.hn-summary__head[aria-expanded=true] .hn-summary__shut{display:inline-flex;color:var(--hn-ink-3)}
@keyframes hn-gift-wiggle{
	0%,58%,100%{transform:rotate(0) scale(1)}
	63%{transform:rotate(-12deg) scale(1.16)}
	70%{transform:rotate(11deg) scale(1.16)}
	77%{transform:rotate(-7deg) scale(1.09)}
	84%{transform:rotate(5deg) scale(1.05)}
	91%{transform:rotate(0) scale(1)}}
@keyframes hn-gift-glow{0%,55%,100%{opacity:.85}62%,86%{opacity:1}}
@media (prefers-reduced-motion:reduce){.hn-summary__toggle--gift>svg{animation:none!important}}
/* A line the reveal has not reached yet has no text, so its bullet must not show
   either — three stray markers under the first sentence read as a broken list. */
.hn-summary ul[data-typing] li:empty{display:none}
/* Caret rides the line being typed out; it disappears with the last character. */
.hn-summary li[data-cursor]::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;background:var(--hn-accent);vertical-align:-.14em;animation:hn-caret 1s steps(1) infinite}
@keyframes hn-caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hn-summary li[data-cursor]::after{display:none}}
.hn-summary ul{margin:0;padding-left:1.15em}
.hn-summary li{margin-bottom:.55em;color:var(--hn-ink);font-size:1.01rem;line-height:1.45}
.hn-summary li::marker{color:var(--hn-accent)}
.hn-summary[hidden]{display:none}
.hn-summary__cta{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--hn-line)}
.hn-summary__scroll{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;color:var(--hn-ink);text-decoration:none;line-height:1.3}
.hn-summary__bang{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--hn-acc-solid);color:var(--hn-accent-ink);font-size:.78rem;font-weight:800}
.hn-summary__mins{display:block;margin-top:2px;font-size:.78rem;font-weight:500;color:var(--hn-ink-3)}
.hn-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;line-height:1;letter-spacing:.02em;flex:none}
.hn-summary__down{flex:none;margin-left:auto;display:inline-flex;color:var(--hn-acc-text)}
.hn-summary__down svg{fill:none;stroke:currentColor;stroke-width:2.2;animation:hn-nudge 1.6s ease-in-out infinite}
@keyframes hn-nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){.hn-summary__down svg{animation:none}}
/* The exit ramp for a summary-only reader: next story inside the card they are
   already looking at, not at the bottom of an article they will never reach. */
.hn-hotnext{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:9px;border-radius:var(--hn-radius);background:var(--hn-bg-2);text-decoration:none;color:inherit}
.hn-hotnext:hover{background:var(--hn-bg-3)}
.hn-hotnext__media{flex:none;width:66px;height:50px;border-radius:8px;overflow:hidden;display:block}
.hn-hotnext__media img{width:100%;height:100%;object-fit:cover;display:block}
.hn-hotnext__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hn-hotnext__kicker{font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c2410c}
.hn-hotnext__title{font-family:var(--hn-font-head);font-weight:700;font-size:.94rem;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-hotnext__go{flex:none;margin-left:auto;color:var(--hn-ink-3)}
.hn-hotnext__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.hn-summary__ask{margin:9px 0 0;font-size:.84rem;color:var(--hn-ink-3)}
.hn-summary__ask a{color:var(--hn-acc-text);font-weight:600;text-decoration:none}
.hn-summary__ask a:hover,.hn-summary__scroll:hover span:not(.hn-summary__bang){text-decoration:underline}
/* The recap belongs at the end of the story, so it stays out of sight while the
   body is still folded behind "Read More" — otherwise it lands mid-article,
   right under the fold, and reads like the article stopped there. */
.hn-body[data-collapsed] ~ .hn-summary--plain{display:none}
/* "NEED TO KNOW" variant — square hard-edged box, copied from People.com reference (IMG#13) */
.hn-summary--plain{background:none;padding:0;border:2px solid var(--hn-ink);border-radius:0}
.hn-summary--plain .hn-summary__in{border-radius:0}
.hn-summary--plain .hn-summary__label{background:none;color:var(--hn-ink);-webkit-text-fill-color:currentColor;letter-spacing:.06em;text-transform:uppercase}

/* table of contents — H2 chips (In this story) */
.hn-toc{border:1px solid var(--hn-line);border-radius:var(--hn-radius);margin:0 0 22px;background:var(--hn-bg)}
.hn-toc__btn{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:14px 16px;font-weight:800;font-size:1.05rem;cursor:pointer;text-align:start;font-family:var(--hn-font-head)}
.hn-toc__btn svg{margin-left:auto;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.hn-toc__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.hn-toc ol{list-style:none;margin:0;padding:0 16px 14px}
.hn-toc li{margin:0}
.hn-toc a{display:block;padding:9px 0;color:var(--hn-ink);text-decoration:none;border-top:1px solid var(--hn-line);font-size:1rem}
.hn-toc a:hover{color:var(--hn-acc-text)}
/* sticky H2 tab strip */
/* --hn-header-real is the measured height of whatever is actually sticky
   (JS): with the menu on its own row the header is taller than the logo, and a
   fixed offset would slide this bar underneath it. */
/* Fixed, not sticky, and shown by sliding rather than by display:block. A
   sticky bar that appears mid-scroll adds ~45px to the flow and shoves the
   article down under the finger — that was the judder on mobile. */
.hn-tocbar{position:fixed;left:0;right:0;top:var(--hn-header-real,var(--hn-header-h));z-index:30;background:var(--hn-bg);border-bottom:1px solid var(--hn-line);transform:translateY(-115%);transition:transform .18s ease;will-change:transform}
.hn-tocbar[data-visible]{transform:none}
@media (prefers-reduced-motion:reduce){.hn-tocbar{transition:none}}
/* Same track and the same 16px gutter as the header and the article, so the
   first tab starts exactly under the logo. */
.hn-tocbar__in{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;max-width:var(--hn-wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.hn-tocbar__in::-webkit-scrollbar{display:none}
.hn-tocbar a{flex:none;padding:11px 12px;font-size:.93rem;font-weight:700;color:var(--hn-ink-3);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
/* The marker under the section you are in is the accent, not ink. Three pixels
   of pure black across a tab reads as a bar somebody left there by mistake —
   which is exactly what it was taken for — and it is the only black slab on a
   page whose every other marker is purple. */
.hn-tocbar a[aria-current]{color:var(--hn-ink);border-bottom-color:var(--hn-accent)}

/* inline related card (cronista style) */
/* Beep feed. Phone: vertical, one card per screen, the short-video gesture.
   Desktop: the same cards laid out sideways, because a mouse wheel scrolls the
   page vertically and fighting it feels broken.

   dvh, not vh: on a phone the browser chrome collapses on scroll and vh would
   leave a slice of the next card showing at rest. */
.hn-beepfeed{--hn-beep-h:calc(100dvh - var(--hn-header-real,56px));
	height:var(--hn-beep-h);overscroll-behavior:contain;scrollbar-width:none;background:#0a0c10}
.hn-beepfeed::-webkit-scrollbar{display:none}
.hn-beepslide{position:relative;height:var(--hn-beep-h);scroll-snap-align:start;scroll-snap-stop:always;
	display:flex;align-items:center;justify-content:center;overflow:hidden}

/* Phone: undo the horizontal carousel grid this container also carries, and give
   the feed the screen to itself.

   The page must not scroll behind it: with two scrollable areas stacked, a swipe
   that starts on a card ends up dragging the document, the snap point is lost
   and the gesture feels broken. The rail goes too — a beep is an app screen, not
   an article with a site around it. */
@media (max-width:899px){
	.hn-beepfeed.hn-carousel{display:block;overflow-x:hidden;overflow-y:auto;
		scroll-snap-type:y mandatory;padding-bottom:0;gap:0}
	.single-hn_beep{overflow:hidden;overscroll-behavior:none}
	.single-hn_beep .hn-topbar,
	.single-hn_beep .hn-footer{display:none}
	/* The bar keeps the logo, the theme switch and search — the way out. */
	.single-hn_beep .hn-header{position:static}
	.single-hn_beep .hn-logo{flex:none;overflow:visible}
}
/* Breadcrumb, share row and tag chips stay in the document for crawlers and
   screen readers, but a beep is an app screen — none of that page furniture
   belongs under the feed on any width. */
.single-hn_beep .hn-beepfoot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The card itself: picture, headline, source line, bullets, one way out. Reads
   as a card on the page's own background rather than white text burned over a
   photograph, which is what makes three bullets legible. */
.hn-beepslide{align-items:center;justify-content:center;padding:14px}
.hn-beepcard{display:flex;flex-direction:column;width:100%;max-width:440px;max-height:100%;overflow:hidden;
	background:var(--hn-bg);color:var(--hn-ink);border-radius:22px;box-shadow:0 10px 40px rgba(0,0,0,.28)}
/* The picture is what gives when a card runs long. It shrinks (object-fit:cover
   crops it, nothing distorts) so the text below never has to scroll — on a phone
   an inner scroller eats the up-swipe that is meant to page to the next beep. */
.hn-beepcard__media{margin:12px 12px 0;border-radius:14px;overflow:hidden;background:var(--hn-bg-3);aspect-ratio:16/9;flex:0 1 auto;min-height:0}
.hn-beepcard__media img{width:100%;height:100%;object-fit:cover}
/* min-height:0 is the whole fix for the clipped buttons: a flex child refuses to
   shrink below its content by default, so the text block kept its full height,
   pushed the footer past the card edge and overflow:hidden cut it off. */
/* flex:none, or the shrink gets split between the picture and the text by their
   sizes — the text block is the taller of the two, so it lost the most and the
   buttons went off the bottom edge. All of the give belongs to the picture. */
.hn-beepcard__in{padding:16px 20px 20px;min-height:0;overflow:hidden;flex:none}
.hn-beepcard__title{font-family:var(--hn-font-head);font-size:clamp(1.22rem,4.4vw,1.5rem);line-height:1.22;margin:0 0 8px;color:var(--hn-ink);
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hn-beepcard__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px;font-size:.8rem;color:var(--hn-ink-3)}
.hn-beepcard__cat{font-weight:700;color:var(--hn-ink-2)}
.hn-beepcard__info{position:relative;display:inline-flex;align-items:center;color:var(--hn-ink-3);cursor:help}
.hn-beepcard__info svg{stroke-width:1.8}
/* The tooltip is the same text the title attribute carries, shown where there is
   no hover to trigger the native one. */
.hn-beepcard__tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
	width:max-content;max-width:230px;padding:7px 10px;border-radius:8px;font-size:.72rem;line-height:1.35;
	background:var(--hn-ink);color:var(--hn-bg);opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:2}
.hn-beepcard__info:hover .hn-beepcard__tip,.hn-beepcard__info:focus .hn-beepcard__tip{opacity:1;visibility:visible}
.hn-beepcard__list{margin:0;padding:0;list-style:none;font-size:1rem;line-height:1.5;color:var(--hn-ink-2)}
.hn-beepcard__list li{position:relative;margin:0 0 12px;padding-left:18px;
	display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hn-beepcard__list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--hn-accent)}
.hn-beepcard__body{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem;line-height:1.55;color:var(--hn-ink-2)}
/* Category on one line, date + info icon on the next: no separator left hanging at a line end. */
.hn-beepcard__when{display:flex;flex-basis:100%;align-items:center;gap:7px}
.hn-beepcard__meta>span[aria-hidden="true"]{display:none}
.hn-beepcard__body p{margin:0 0 8px}
.hn-beepcard__foot{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
.hn-beepcard__cta{padding:11px 26px;border-radius:999px;
	background:var(--hn-bg-2);color:var(--hn-acc-text);font-weight:700;font-size:.95rem;text-decoration:none}
.hn-beepcard__cta:hover{background:var(--hn-acc-solid);color:var(--hn-accent-ink)}
.hn-beepcard__share{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:0;border-radius:999px;
	background:var(--hn-bg-2);color:var(--hn-ink-2);font-weight:700;font-size:.9rem;font-family:inherit;cursor:pointer}
.hn-beepcard__share:hover{color:var(--hn-ink)}
.hn-beepcard__share svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Ad slide: the ad centred on its own screen, nothing else competing with it. */
.hn-beepslide--ad{align-items:center;justify-content:center;padding:20px}
.hn-beepslide--ad .hn-ad{width:100%;max-width:440px;margin:0;display:grid;place-items:center}
@media (min-width:900px){
	/* Desktop: the same phone-shaped card, paged sideways with the arrows the
	   carousel script adds. Snap points and the scrollbar-hiding come from
	   .hn-carousel — only the size and the card height are set here.

	   One beep per view, same as the phone — three cards side by side meant three
	   slides were over the 60% mark at once, so every one of them rewrote the
	   address bar and the tab title ended up describing a different card than the
	   URL. A single slide per screen is also what makes the arrows mean "next
	   beep" instead of "scroll a bit". */
	.hn-beepfeed{--hn-beep-h:min(720px,calc(100dvh - 140px));
		max-width:460px;margin:24px auto;padding-inline:0;
		grid-auto-columns:100%;background:transparent}
	/* app.js wraps the feed in .hn-carousel-wrap and hangs the arrows off it.
	   The wrapper is a plain div at full page width, so without this the buttons
	   sit at the window edges while the card is centred hundreds of px inside. */
	.hn-carousel-wrap:has(> .hn-beepfeed){max-width:460px;margin-inline:auto}
	.hn-carousel-wrap > .hn-beepfeed{margin-inline:0}
	/* Clear of the card rather than on top of it — the card has no dead margin to
	   hide a button in. Centred on the card, not on its picture: app.js aims the
	   arrows at the artwork, which on a full-height beep card is near the top. */
	.hn-carousel-wrap:has(> .hn-beepfeed) .hn-carousel__btn{top:50%}
	.hn-carousel-wrap:has(> .hn-beepfeed) .hn-carousel__btn.is-prev{left:-62px}
	.hn-carousel-wrap:has(> .hn-beepfeed) .hn-carousel__btn.is-next{right:-62px}
	/* The slide clips on a phone because the card fills the screen. Here that
	   crop cut the card's own shadow into a rectangle at the slide edge. */
	.hn-beepslide{overflow:visible;padding:6px}
	/* Full slide height, or the frame jumps size on every page depending on how
	   many bullets that beep has. A long one crops its picture instead. */
	.hn-beepcard{max-width:none;height:100%;border:1px solid var(--hn-line);
		box-shadow:0 4px 18px rgba(12,16,24,.09)}
}

/* In-article strip: one block, swiped sideways. Sits in the text column, so it
   gets a rule above and below rather than a card frame — a second bordered box
   inside an article reads as an ad slot. */
.hn-inlinestrip{margin:28px 0;padding:16px 0;border-top:1px solid var(--hn-line);border-bottom:1px solid var(--hn-line)}
.hn-inlinestrip__lbl{margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-acc-text)}
/* Three fixed columns at every width, square thumbnails. Nothing scrolls and
   nothing is hidden behind a gesture — on a phone the three headlines simply run
   narrower and are clamped. */
.hn-inlinegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hn-inlinecard{display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;color:var(--hn-ink)}
.hn-inlinecard__media{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--hn-bg-3)}
.hn-inlinecard__media img{width:100%;height:100%;object-fit:cover}
.hn-inlinecard__title{font-family:var(--hn-font-head);font-weight:700;font-size:.86rem;line-height:1.25;
	display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hn-inlinecard:hover .hn-inlinecard__title{color:var(--hn-acc-text)}
@media (min-width:700px){
	.hn-inlinegrid{gap:18px}
	.hn-inlinecard__title{font-size:.98rem;-webkit-line-clamp:3}
}

.hn-inline{display:flex;gap:12px;align-items:center;border:1px solid var(--hn-line);border-radius:var(--hn-radius);overflow:hidden;margin:26px 0;background:var(--hn-bg-2);text-decoration:none}
.hn-inline__media{flex:0 0 92px;aspect-ratio:1/1;background:var(--hn-bg-3)}
.hn-inline__media img{width:100%;height:100%;object-fit:cover}
.hn-inline__txt{padding:10px 14px 10px 0;font-size:.98rem;color:var(--hn-ink);line-height:1.35}
.hn-inline__kicker{color:var(--hn-acc-text);font-weight:800;margin-right:5px}

/* tag pills — Read More: */
/* FAQ accordion. No JS: <details name> is single-open on its own, and the row
   animation runs on ::details-content where the browser supports it — elsewhere
   it opens instantly, which is the correct fallback for a disclosure. */
.hn-faq{margin:30px 0}
.hn-faq__title{font-family:var(--hn-font-head);font-size:1.32rem;margin:0 0 12px}
.hn-faq__item{border-top:1px solid var(--hn-line);interpolate-size:allow-keywords}
.hn-faq__item:last-of-type{border-bottom:1px solid var(--hn-line)}
.hn-faq__q{display:flex;align-items:center;justify-content:space-between;gap:14px;
	padding:15px 2px;font-family:var(--hn-font-head);font-weight:700;font-size:1.02rem;
	line-height:1.35;color:var(--hn-ink);cursor:pointer;list-style:none}
.hn-faq__q::-webkit-details-marker{display:none}
.hn-faq__q:hover{color:var(--hn-acc-text)}
.hn-faq__q svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.hn-faq__item[open] .hn-faq__q svg{transform:rotate(180deg)}
.hn-faq__a{margin:0;padding:0 2px 16px;color:var(--hn-ink-2);line-height:1.6}
.hn-faq__item::details-content{block-size:0;overflow:hidden;
	transition:block-size .28s ease,content-visibility .28s allow-discrete}
.hn-faq__item[open]::details-content{block-size:auto}
@media (prefers-reduced-motion:reduce){
	.hn-faq__item::details-content{transition:none}
	.hn-faq__q svg{transition:none}
}

.hn-tags{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:24px 0}
.hn-tags__label{font-family:var(--hn-font-head);font-weight:700;font-size:1.05rem;margin-right:2px}
.hn-tag{display:inline-block;border:1.5px solid var(--hn-ink);border-radius:999px;padding:7px 16px;font-size:.92rem;color:var(--hn-ink);text-decoration:none;line-height:1.3}
.hn-tag:hover{background:var(--hn-ink);color:var(--hn-bg)}
.hn-tag--solid{background:var(--hn-bg-3);border-color:transparent}
.hn-tag--accent{border-color:var(--hn-accent);color:var(--hn-acc-text)}
.hn-tag--accent:hover{background:var(--hn-acc-solid);color:var(--hn-accent-ink)}

/* reactions */
.hn-react{border:1px solid var(--hn-line);background:var(--hn-bg-2);border-radius:var(--hn-radius);padding:14px;margin:26px 0}
.hn-react__q{font-weight:700;margin:0 0 12px;font-size:1rem;display:flex;align-items:center;gap:8px}
/* Buttons keep their own size and wrap; stretching five of them across a narrow
   phone made the row look pulled apart. */
.hn-react__list{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
.hn-react__list>li{flex:0 1 92px}
.hn-react__btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:8px 4px;border-radius:var(--hn-radius-sm);width:100%;min-width:0}
.hn-react__btn:hover{background:var(--hn-bg-3)}
.hn-react__btn[aria-pressed=true]{background:var(--hn-bg-3);box-shadow:inset 0 0 0 2px var(--hn-accent)}
.hn-react__emoji{font-size:1.85rem;line-height:1;transition:transform .15s}
.hn-react__btn:hover .hn-react__emoji{transform:scale(1.16)}
.hn-react__lbl{font-size:.75rem;color:var(--hn-ink-3);text-align:center;line-height:1.15}
.hn-react__count{font-size:.74rem;font-weight:700;color:var(--hn-ink-2)}
.hn-react__thanks{font-size:.85rem;color:var(--hn-ink-3);margin:10px 0 0}

/* reaction pill bar (above the lead image) */
.hn-pills{position:relative;margin:0 0 16px}
.hn-pills__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
/* Beats the .hn-react__btn sizing the same element also carries. */
.hn-pills__list>li{flex:0 0 auto}
.hn-pills .hn-pill{flex:0 0 auto;width:auto}
/* flex-direction and flex are reset because the pill also carries .hn-react__btn,
   which stacks its children for the big end-of-article block. */
.hn-pill{display:inline-flex;flex-direction:row;flex:0 0 auto;align-items:center;gap:6px;height:40px;padding:0 13px;border:1px solid var(--hn-line);background:var(--hn-bg-2);border-radius:999px;cursor:pointer;font-size:.85rem;line-height:1;color:var(--hn-ink)}
.hn-pill:hover{border-color:var(--hn-ink-3);background:var(--hn-bg-3)}
.hn-pill__emoji{font-size:1.35rem;line-height:1}
/* Shipped emoji pictures take the size the character had. */
.hn-pill__emoji img,.hn-react__emoji img{display:block;width:1em;height:1em}
.hn-pill__count{font-weight:700;font-variant-numeric:tabular-nums;color:var(--hn-ink-2)}
.hn-pill__count:empty{display:none}
.hn-pill--more{color:var(--hn-ink-3);gap:5px}
.hn-pill__label{font-weight:600}

/* The reader's own reaction: a light tint of the accent with an accent ring.
   A solid accent fill hid the emoji and the count behind it. */
.hn-pill[aria-pressed=true]{background:color-mix(in srgb,var(--hn-accent) 10%,var(--hn-bg));border-color:var(--hn-accent);box-shadow:inset 0 0 0 1px var(--hn-accent);color:var(--hn-acc-text)}
.hn-pill[aria-pressed=true] .hn-pill__count{color:inherit}
/* Voting never locks the row: readers change their mind and the server moves the
   vote instead of counting a second one. */
.hn-pills[data-voted] .hn-pill:not([aria-pressed=true]){opacity:1}

/* Picker floats under the "more" chip rather than pushing the page around. */
.hn-pills__picker{position:absolute;top:calc(100% + 8px);left:0;z-index:20;display:flex;flex-wrap:wrap;gap:4px;max-width:min(420px,92vw);padding:8px;border:1px solid var(--hn-line);border-radius:16px;background:var(--hn-bg);box-shadow:var(--hn-shadow)}
.hn-pills__pick{position:relative;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;cursor:pointer;font-size:1.4rem;line-height:1}
.hn-pills__pick:hover{background:var(--hn-bg-2)}
.hn-pills__pick[aria-pressed=true]{background:var(--hn-bg-3);box-shadow:inset 0 0 0 2px var(--hn-accent)}
.hn-pills__pick .hn-pill__emoji{font-size:1.4rem}
.hn-pills__pick .hn-pill__count{position:absolute;right:2px;bottom:1px;font-size:.65rem;color:var(--hn-ink-3)}

/* share row */
.hn-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:22px 0}
.hn-share__lbl{font-size:.9rem;font-weight:700;color:var(--hn-ink-2);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
/* Filled in each network's own colour so they read as buttons at a glance; X and copy-link use the ink colour. */
.hn-share a,.hn-share button{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:12px;border:0;background:var(--hn-ink);color:var(--hn-bg);cursor:pointer;transition:transform .15s,filter .15s}
.hn-share a:hover,.hn-share button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.hn-share svg{width:24px;height:24px}
.hn-share .is-fb{background:#1877f2;color:#fff}.hn-share .is-wa{background:#25d366;color:#fff}.hn-share .is-tg{background:#2aabee;color:#fff}
.hn-share .is-pin{background:#e60023;color:#fff}.hn-share .is-gn{background:#4285f4;color:#fff}
@media (max-width:699px){.hn-share{gap:8px}.hn-share a,.hn-share button{width:44px;height:44px}.hn-share svg{width:22px;height:22px}}

/* sticky bottom share bar (mobile, cronista) */
.hn-stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--hn-bg);border-top:1px solid var(--hn-line);display:flex;align-items:center;gap:10px;padding:8px 12px;transform:translateY(110%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
/* Hidden bars are also visibility:hidden. iOS 26 Safari tints its toolbar from any
   fixed element touching the bottom edge — even one moved off screen — and painted
   a white band over the page and the chat button. */
.hn-stickybar[data-visible]{transform:none;visibility:visible;transition:transform .22s ease}
.hn-stickybar__title{flex:1;min-width:0;font-size:.85rem;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:900px){.hn-stickybar{display:none}}

/* author box */

/* google news / subscribe CTA */
/* Gradient ring via two background layers: the flat fill is clipped to the
   padding box, the moving gradient to the border box. A pseudo-element with a
   negative z-index would paint over the fill, not behind it. */
/* Beeps banner under the comments. The colour is in the ring, not in the plate —
   same two-layer trick as the Google News card above and the same hues as the
   Quick Read frame, so the two AI blocks on the page read as one family.
   Text sits centred; the arrow is taken out of the flow so it does not pull the
   block off centre. */
/* Beeps banner: a plain card with an icon tile, two lines and a round arrow. */
.hn-beepscta{display:flex;align-items:center;gap:16px;margin:28px 0;padding:16px 18px;border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-bg-2);color:var(--hn-ink);text-decoration:none;transition:border-color .2s,background-color .2s}
.hn-beepscta:hover{border-color:var(--hn-accent);background:var(--hn-bg)}
.hn-beepscta__icon{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--hn-acc-solid),var(--hn-acc-solid-2));color:#fff}
.hn-beepscta__in{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hn-beepscta__title{font-size:17px;font-weight:600;line-height:1.3;color:var(--hn-ink)}
.hn-beepscta__txt{font-size:14.5px;line-height:1.4;color:var(--hn-ink-3)}
.hn-beepscta__go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hn-ink);color:var(--hn-bg);transition:transform .2s}
.hn-beepscta:hover .hn-beepscta__go{transform:translateX(3px)}

/* The moving border is two layers, not an animated background-position: a
   background-position keyframe repaints the whole box every frame on the main
   thread, a translate runs on the compositor. ::before is the gradient ribbon
   (two seamless tiles wide), ::after is the card face that covers all but the
   2px ring. */
.hn-gnews{position:relative;isolation:isolate;overflow:hidden;
	display:flex;align-items:center;gap:12px;padding:16px 18px;margin:24px 0;text-decoration:none;color:var(--hn-ink);
	border-radius:var(--hn-radius)}
.hn-gnews::before{content:"";position:absolute;top:0;left:0;height:100%;width:600%;z-index:-2;
	background:linear-gradient(90deg,#4285f4,#ea4335,#fbbc05,#34a853,#4285f4) 0 0/50% 100% repeat-x;
	animation:hn-slide 8s linear infinite}
.hn-gnews::after{content:"";position:absolute;inset:2px;z-index:-1;
	border-radius:calc(var(--hn-radius) - 2px);background:var(--hn-bg)}
@keyframes hn-slide{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.hn-gnews::before{animation:none}}
/* The Google News mark carries its own colours, so it needs a light plate even
   in dark mode — Google's brand colours on a dark card go muddy. */
.hn-gnews__icon{width:42px;height:42px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px var(--hn-line);display:grid;place-items:center;flex:none}
.hn-gnews__icon svg{width:26px;height:26px}
.hn-gnews__kicker{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-ink-3);font-weight:700}
.hn-gnews__txt{font-weight:800}
.hn-gnews__arrow{margin-left:auto;font-size:1.3rem;color:var(--hn-ink-2)}

.hn-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,14px);z-index:90;max-width:min(92vw,420px);padding:11px 16px;border-radius:12px;background:var(--hn-ink);color:var(--hn-bg);font-size:.9rem;font-weight:600;box-shadow:var(--hn-shadow);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.hn-toast[data-open]{opacity:1;transform:translate(-50%,0)}

/* discovery feed — shown once, at the end of the article. Deliberately small:
   it is a suggestion, not a takeover. */
/* No scrolling inside the sheet: it showed four cards in a box two and a half
   cards tall, so the bottom row was always sliced and the panel read as broken.
   The sheet now shows whole cards only — the rule below drops any past the
   fourth rather than clipping one halfway. */
.hn-feedpanel{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin-inline:auto;max-height:min(74vh,560px);z-index:70;background:var(--hn-bg);border:1px solid var(--hn-line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -6px 28px rgba(8,12,20,.18);transform:translateY(102%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.25,1),visibility 0s .28s;overflow:hidden;overscroll-behavior:contain;padding:0 14px 18px}
/* Cards inside the sheet are a browse list, not the article feed — two per row
   at most, headline-first, so the sheet stays short. */
.hn-feedpanel .hn-grid{grid-template-columns:1fr 1fr;gap:12px}
.hn-feedpanel .hn-grid>:nth-child(n+5){display:none}
.hn-feedpanel .hn-card{gap:7px}
.hn-feedpanel .hn-card__media{aspect-ratio:16/9}
.hn-feedpanel .hn-card__title{font-size:.92rem;line-height:1.28;-webkit-line-clamp:2}
/* Date and read time stay — they are what tells the reader the story is fresh.
   Two title lines instead of three already buys back more height than the meta
   line costs, so the sheet fits without dropping them. */
.hn-feedpanel .hn-card__meta{font-size:.74rem;padding-top:0;margin-top:2px}
.hn-feedpanel .hn-card--hero{grid-column:auto;flex-direction:column}
.hn-feedpanel[data-open]{transform:none;visibility:visible;transition:transform .28s cubic-bezier(.2,.8,.25,1)}
.hn-feedpanel__grip{width:36px;height:4px;border-radius:2px;background:var(--hn-line);margin:9px auto 2px}
.hn-feedpanel__head{display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--hn-bg);padding:6px 0 10px;z-index:1}
.hn-feedpanel__head h2{margin:0;font-size:1rem}
.hn-feedpanel__close{margin-left:auto}
/* On a mouse screen it sits in the corner instead of spanning the viewport. */
@media (min-width:900px){
	.hn-feedpanel{left:auto;right:20px;bottom:20px;margin-inline:0;width:380px;max-height:64vh;border:1px solid var(--hn-line);border-radius:16px;transform:translateY(calc(100% + 24px))}
	.hn-feedpanel .hn-grid{grid-template-columns:1fr}
	.hn-feedpanel .hn-card{flex-direction:row;align-items:flex-start;gap:10px}
	.hn-feedpanel .hn-card__media{flex:0 0 108px}
	.hn-feedpanel .hn-card>div{flex:1;min-width:0}
	.hn-feedpanel__grip{display:none}
}

/* WP Rocket's "lazy rendering" stamps data-wpr-lazyrender on blocks below the
   fold and gives them `content-visibility:auto` with no contain-intrinsic-size.
   An unrendered block then measures zero, so the document keeps changing height
   as you scroll and the end of the article turns into a blank sheet you can
   scroll into. On this theme it lands on the 1px sentinel, one carousel and the
   footer — nothing that pays for the trouble. !important because the plugin
   prints its rule inline in the head, after this file.

   It also matters for the sticky share bar: content-visibility implies
   contain:layout paint, which makes a position:fixed child anchor to the
   contained block instead of the viewport. */
[data-wpr-lazyrender]{content-visibility:visible!important}

/* infinite feed helpers */
.hn-sentinel{height:1px}
.hn-loading{display:flex;justify-content:center;padding:26px 0}
.hn-spinner{width:26px;height:26px;border:3px solid var(--hn-line);border-top-color:var(--hn-accent);border-radius:50%;animation:hn-spin .7s linear infinite}
@keyframes hn-spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   6. Comments
   ========================================================================== */
/* Honeypot. Taken out of the layout rather than display:none — a bot that skips
   hidden inputs would skip the trap too. Nothing focusable, nothing announced. */
.hn-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hn-posted{margin:0 0 18px;padding:13px 15px;border-radius:var(--hn-radius);background:var(--hn-bg-2);border:1px solid var(--hn-line);font-size:.92rem;color:var(--hn-ink-2)}
/* A comment posted without a reload appears in place. It fades in rather than
   snapping into existence, because the page around it does not move and without
   the movement there is nothing to tell the reader their comment arrived. */
.hn-comment--new{animation:hn-comment-in .35s ease}
@keyframes hn-comment-in{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.hn-comment--new{animation:none}}

/* WordPress prints the cancel link inside the reply heading. Left unstyled it
   sits flush against the name it follows — "Antwoord op lila RosaReactie
   annuleren" reads as one broken word. Wrapping puts it on its own line as soon
   as the name is long, which on a phone is always. */
.comment-reply-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 12px}
.comment-reply-title small{font-size:.62em;font-weight:400}
#cancel-comment-reply-link{color:var(--hn-ink-3)}

.hn-cform{margin:22px 0 0;padding-inline:2px}
/* Form fields light up inside their own border instead of the page-wide focus
   outline, which stood 5px out and ran to the screen edge on a phone. */
.hn-comments input:focus-visible,.hn-comments textarea:focus-visible,.comment-form input:focus-visible,.comment-form textarea:focus-visible{outline:0;border-color:var(--hn-accent);box-shadow:inset 0 0 0 1px var(--hn-accent)}
.hn-comments .hn-editor:focus-within,.hn-cform .hn-editor:focus-within{box-shadow:inset 0 0 0 1px var(--hn-accent);border-color:var(--hn-accent)}
.hn-cform__btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 20px;border:0;border-radius:var(--hn-radius);background:var(--hn-acc-solid);color:var(--hn-accent-ink);font-family:var(--hn-font-head);font-size:1.05rem;font-weight:800;cursor:pointer}
.hn-cform__btn svg{fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.hn-cform__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.hn-cform__btn:hover{filter:brightness(1.08)}
.hn-cform__btn[aria-expanded=true]{margin-bottom:6px}
.hn-comments{margin:34px 0 0}
.hn-comments__title{font-size:1.25rem;margin:0 0 14px}
.hn-clist{list-style:none;margin:0;padding:0}
.hn-clist ol{list-style:none;margin:0;padding-left:34px}
.hn-comment{padding:14px 0;border-bottom:1px solid var(--hn-line)}
.hn-comment__head{display:flex;align-items:center;gap:10px}
.hn-comment__avatar img{border-radius:50%}
.hn-comment__author{font-weight:700;font-size:.95rem}
.hn-comment__badge{font-size:.68rem;font-weight:800;background:#d8f3dc;color:#14532d;border-radius:999px;padding:3px 9px;text-transform:none}
.hn-comment__date{font-size:.78rem;color:var(--hn-ink-3)}
.hn-comment__text{margin:8px 0 8px;font-size:.98rem;color:var(--hn-ink)}
.hn-comment__actions{display:flex;align-items:center;gap:8px;font-size:.85rem}
.hn-vote{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:52px;border:1px solid var(--hn-line);background:var(--hn-bg);border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--hn-ink-2);font-size:.82rem;font-weight:700;line-height:1}
.hn-vote:hover{border-color:var(--hn-ink-3)}
/* A count of nothing is not a count. Left in the flow it was an empty box with
   a 6px gap in front of it, which pushed the thumb off centre — that is the
   lopsided pill, not the icon. */
.hn-vote span:empty{display:none}
.hn-vote span{font-variant-numeric:tabular-nums}
/* Agreement is green and disagreement is red once the reader has picked one.
   Both stay grey until then: two coloured buttons side by side on a comment
   nobody has voted on read as a verdict the site has already reached. */
.hn-vote[data-hn-vote=up][aria-pressed=true]{border-color:#2ea043;color:#2ea043;background:color-mix(in srgb,#2ea043 8%,var(--hn-bg))}
.hn-vote[data-hn-vote=down][aria-pressed=true]{border-color:#e5484d;color:#e5484d;background:color-mix(in srgb,#e5484d 8%,var(--hn-bg))}
@media (hover:hover){
	.hn-vote[data-hn-vote=up]:hover{border-color:#2ea043;color:#2ea043}
	.hn-vote[data-hn-vote=down]:hover{border-color:#e5484d;color:#e5484d}
}
/* block, so the 16px box is the glyph and not a line box with a descender gap
   under it — that half-pixel is what made the two thumbs sit at different
   heights next to each other. */
.hn-vote svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.hn-comment__reply{margin-left:auto;font-weight:700;text-decoration:none;color:var(--hn-ink)}
/* Yours to take down. Quiet by default — it sits on every line the reader has
   ever written, and a red button on each of them reads as a warning about the
   comment rather than an offer. */
/* "Pinned", at the far end of the header line. margin-left:auto rather than a
   fixed position, so it sits against the right edge whatever the name beside it
   is doing. */
.hn-comment__pinned{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:none;font-size:.72rem;font-weight:700;color:var(--hn-ink-3)}
.hn-comment__pinned svg{display:block}
.hn-comment.is-pinned{border-radius:var(--hn-radius);background:color-mix(in srgb,var(--hn-accent) 4%,var(--hn-bg));padding:10px 12px;margin-left:-12px;margin-right:-12px}

/* The author's mark: their avatar with a heart on the corner of it. The heart
   carries a ring in the page colour so it stays legible over whatever the
   avatar happens to be — these are photographs, not flat shapes. */
.hn-comment__alike{position:relative;flex:none;display:inline-flex;width:24px;height:24px;margin-right:2px}
.hn-comment__alike img{width:24px;height:24px;border-radius:50%;display:block}
.hn-comment__alike-heart{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#e5484d;color:#fff;box-shadow:0 0 0 2px var(--hn-bg)}
.hn-comment__alike-heart svg{display:block;fill:currentColor}

/* Moderator buttons, quieter than Delete: these are reversible and Delete is
   not, so they have no business shouting louder than it. */
.hn-comment__mod{order:8;padding:2px 0;border:0;background:none;font:inherit;font-size:.85rem;color:var(--hn-ink-3);text-decoration:underline;cursor:pointer}
.hn-comment__mod:hover{color:var(--hn-acc-text)}
.hn-comment__mod:disabled{opacity:.5;cursor:default}

.hn-comment__del{order:9;padding:2px 0;border:0;background:none;font:inherit;font-size:.85rem;color:var(--hn-ink-3);text-decoration:underline;cursor:pointer}
.hn-comment__del:hover{color:#e5484d}
.hn-comments__wipe{display:block;margin:0 0 14px;padding:2px 0;border:0;background:none;font:inherit;font-size:.85rem;color:var(--hn-ink-3);text-decoration:underline;cursor:pointer}
.hn-comments__wipe:hover{color:#e5484d}
/* Waiting for the second tap — see arm(). */
.hn-comment__del.is-armed,.hn-comments__wipe.is-armed{color:#e5484d;font-weight:700}

/* A reply used to be nothing but an indent, which on a phone reads as a
   crooked comment rather than an answer to the one above it. A rail down the
   thread, a tick into each reply and a tint of its own say what it is without a
   word of explanation — and they survive any depth, which a hand-written "in
   reply to X" line would not. */
.hn-clist ol.children{padding-left:20px;margin:0 0 0 16px;border-left:2px solid var(--hn-line)}
.hn-clist ol.children>li{position:relative;margin:10px 0;padding:12px 14px;border-bottom:0;border-radius:var(--hn-radius-sm);background:var(--hn-bg-2)}
.hn-clist ol.children>li::before{content:"";position:absolute;left:-20px;top:30px;width:12px;height:2px;background:var(--hn-line)}
.hn-clist ol.children .hn-comment__avatar img{width:28px;height:28px}
@media (max-width:600px){
	.hn-clist ol.children{padding-left:12px;margin-left:8px}
	.hn-clist ol.children>li::before{left:-12px;width:8px}
}
.hn-comments .comment-respond{margin-top:18px}
.hn-comments label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
.hn-comments input[type=text],.hn-comments input[type=email],.hn-comments input[type=url],.hn-comments textarea{
	width:100%;border:1px solid var(--hn-line);border-radius:var(--hn-radius-sm);padding:11px 13px;font:inherit;background:var(--hn-bg);color:var(--hn-ink);margin-bottom:12px}
.hn-comments textarea{border-radius:22px;padding:14px 18px}

/* The box and its toolbar read as one control: the border lives on the wrapper
   and the textarea inside gives its own up, or the strip looks like a row of
   buttons that happens to be sitting above an unrelated field. */
/* No overflow:hidden. It was here to keep the strip and the textarea inside the
   rounded border, and it did — along with the emoji panel, which opens out of
   the box by definition and was being clipped into invisibility. The corners are
   rounded on the two children instead, which is the same picture and does not
   cut anything off. */
.hn-editor{display:block;border:1px solid var(--hn-line);border-radius:var(--hn-radius);background:var(--hn-bg);margin-bottom:12px}
.hn-editor:focus-within{border-color:var(--hn-ink-3)}
/* One emoji button and nothing else — see hn_comment_toolbar(). */
.hn-editor__bar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:6px 8px;border-bottom:1px solid var(--hn-line);border-radius:var(--hn-radius) var(--hn-radius) 0 0;background:var(--hn-bg-2)}
/* Downward here, unlike the chat. The strip sits at the top of the box, so a
   panel opening upward opens off the top of the comment form. */
/* Upward. The strip sits on top of the box, so a panel dropping out of it lands
   squarely over the field — the reader picked an emoji and could not see where
   it had gone, or what they had already written. Above the strip there is only
   the heading, and covering that costs nothing. */
.hn-editor__bar .hn-emoji__panel{bottom:calc(100% + 6px);top:auto}
.hn-comments .hn-editor textarea{border:0;border-radius:0 0 var(--hn-radius) var(--hn-radius);margin:0;padding:13px 16px;background:none}
.hn-comments .hn-editor textarea:focus{outline:0}

/* Anchored to the button rather than the page, and flipped above it: the form
   sits low enough that a panel opening downwards would hang off the screen. */
.hn-emoji{position:relative;display:inline-flex;margin-left:auto}
.hn-emoji__btn{display:inline-grid;place-items:center;min-width:32px;height:32px;border:0;border-radius:8px;background:none;font-size:1.05rem;line-height:1;cursor:pointer}
.hn-emoji__btn:hover{background:var(--hn-bg-3)}
.hn-emoji__panel{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(310px,calc(100vw - 40px));max-height:min(272px,42vh);overflow-y:auto;padding:8px;border:1px solid var(--hn-line);border-radius:var(--hn-radius-sm);background:var(--hn-bg);box-shadow:var(--hn-shadow)}
.hn-emoji__opt{border:0;background:none;padding:4px 0;font-size:1.15rem;line-height:1.35;border-radius:6px;cursor:pointer}
.hn-emoji__opt:hover{background:var(--hn-bg-3)}
.hn-comments .submit{background:var(--hn-ink);color:var(--hn-bg);border:0;border-radius:999px;padding:12px 26px;font-weight:800;cursor:pointer}

/* Reply-notification opt-in. Printed with [hidden] and unhidden by the script
   only where push actually works, so the attribute has to win over the display
   the rule below sets. */
.hn-notify{display:block;margin:0 0 14px}
.hn-notify[hidden]{display:none}
.hn-notify__row{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--hn-ink-2);cursor:pointer}
.hn-notify__row input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--hn-accent);cursor:pointer}
.hn-notify__fine{display:block;margin:5px 0 0 27px;font-size:.72rem;line-height:1.45;color:var(--hn-ink-3)}
.hn-notify__fine a{color:inherit;text-decoration:underline}
/* Full-strength ink on the raised background rather than a red of its own: this
   has to stay readable in both schemes, and the theme has no error colour that
   is legible on a near-black page and a white one both. */
.hn-notify__warn{display:block;margin:8px 0 0 27px;padding:9px 12px;border-radius:var(--hn-radius-sm);background:var(--hn-bg-3);color:var(--hn-ink);font-size:.76rem;font-weight:600;line-height:1.45}
.hn-notify__warn[hidden]{display:none}

/* Comment privacy policy. Closed by default and quiet: it is there for the
   reader who wants it, not a wall in front of the reader who does not. */
.hn-policy{margin:0 0 18px;font-size:.78rem;color:var(--hn-ink-3)}
.hn-policy__sum{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px}
.hn-policy__sum::-webkit-details-marker{display:none}
.hn-policy__sum::before{content:"›";display:inline-block;font-size:1.1em;line-height:1;transition:transform .15s}
.hn-policy[open] .hn-policy__sum::before{transform:rotate(90deg)}
.hn-policy__body{margin:10px 0 0;padding:12px 14px;border:1px solid var(--hn-line);border-radius:var(--hn-radius-sm);background:var(--hn-bg-2)}
.hn-policy__h{margin:12px 0 3px;font-size:.79rem;font-weight:700;color:var(--hn-ink-2)}
.hn-policy__h:first-child{margin-top:0}
.hn-policy__p{margin:0;line-height:1.5}
.hn-policy__p a{color:var(--hn-ink-2)}
@media (prefers-reduced-motion:reduce){.hn-policy__sum::before{transition:none}}

/* On a page of its own it is a document, not a footnote. */
.hn-policy--page{font-size:1rem;color:var(--hn-ink-2)}
.hn-policy--page .hn-policy__h{font-size:1.1rem;margin:22px 0 6px;color:var(--hn-ink)}
.hn-policy--page .hn-policy__p{margin:0 0 4px}

/* ==========================================================================
   7. Beeps (short news cards)
   ========================================================================== */
.hn-beep{border:1px solid var(--hn-line);border-radius:var(--hn-radius);overflow:hidden;background:var(--hn-bg);display:flex;flex-direction:column}
.hn-beep__media{display:block;aspect-ratio:16/9;background:var(--hn-bg-3)}
.hn-beep__media img{width:100%;height:100%;object-fit:cover}
.hn-beep__body{padding:13px;display:flex;flex-direction:column;gap:7px;flex:1}
.hn-beep__title{font-size:1rem;font-weight:800;margin:0;line-height:1.26;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-beep__txt{font-size:.9rem;color:var(--hn-ink-2);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hn-beep__more{margin-top:auto;font-size:.85rem;font-weight:700;text-decoration:none}

/* ==========================================================================
   7b. Media summary (YouTube-style) + ad slots
   ========================================================================== */
.hn-msum{border:1px solid var(--hn-line);border-radius:var(--hn-radius);background:var(--hn-bg-2);margin:0 0 20px;overflow:hidden}
.hn-msum__btn{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:12px 14px;cursor:pointer;text-align:start;font-size:.94rem}
.hn-msum__spark{color:var(--hn-accent);display:inline-flex;flex:none}
.hn-msum__peek{flex:1;min-width:0;color:var(--hn-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-msum__cta{font-weight:700;flex:none}
.hn-msum__btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.hn-msum__btn[aria-expanded=true] svg{transform:rotate(180deg)}
.hn-msum__btn[aria-expanded=true] .hn-msum__peek{display:none}
.hn-msum__body{padding:0 14px 14px}
.hn-msum__body p{margin:0 0 8px;font-size:.95rem}
.hn-msum__note{font-size:.76rem;color:var(--hn-ink-3)}

.hn-ad{display:block;margin:26px 0;text-align:center;overflow:hidden}
.hn-ad__label{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-ink-3);margin-bottom:6px}
.hn-ad iframe,.hn-ad img{max-width:100%}
.hn-grid>.hn-ad{grid-column:1/-1}
/* The label belongs to a creative, not to the space one might arrive in. It
   stays hidden while the slot is still waiting to load ([data-hn-ad]) and once
   the slot has given up ([data-empty]) — a lone "Advertisement" over several
   hundred pixels of nothing is the most visible bug an ad slot can have.

   Invisible while waiting, not removed: display:none gave the line back its
   height the moment the creative landed and pushed the article down by a label,
   every slot, every page. Gone entirely only once the slot has given up, where
   nothing is arriving to be pushed by. */
.hn-ad[data-hn-ad] .hn-ad__label{visibility:hidden}
.hn-ad[data-empty] .hn-ad__label{display:none}
.hn-ad[data-empty]{margin:0;min-height:0}
/* An empty slot that had a story parked in it is no longer empty space — it
   gets its spacing back, and never the "Advertisement" label, because what is
   on screen is not an ad. */
.hn-ad[data-story]{margin:26px 0}
.hn-adfill{text-align:start}

/* ==========================================================================
   7c. Motion cards (zooming still + player bar)
   ========================================================================== */
/* A card the reader has not reached costs nothing to lay out or paint. The
   stage carries an aspect-ratio, so the reserved height is right and nothing
   shifts when it does come into view. */
.hn-mv{margin:30px 0;clear:both;content-visibility:auto;contain-intrinsic-size:auto 420px}
.hn-mv__kicker{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-ink-3)}
/* Edge to edge on a phone: inside the text column the unit reads as a banner,
   and a banner is the one thing every reader has trained themselves to skip. */
@media (max-width:699px){
	.hn-mv{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
	.hn-mv__kicker{padding-inline:16px}
}
/* The height comes from the picture, not from a fixed frame the text then has
   to squeeze into. The active slide is in flow and sets the stage height; the
   others are stacked underneath it for the crossfade. The earlier version gave
   the photo whatever height the headline left over, which on a two-line
   headline was a slot, not a photograph. */
.hn-mv__stage{position:relative;border-radius:var(--hn-radius);overflow:hidden;background:var(--hn-bg-2)}
/* After the base rule, not with the other phone overrides above it. Same
   specificity, so the one written last wins — and written first, the corners
   the full-bleed card is not supposed to have were rounding anyway, off both
   edges of the screen. */
@media (max-width:699px){.hn-mv__stage{border-radius:0}}
/* pointer-events as well as visibility. The slides sit exactly on top of each
   other, and for the length of the crossfade the one going out is still a link
   under the finger — two overlapping targets, which is what a tap-target audit
   reports and what a tap during those 450ms could actually open. Nothing about
   the picture changes. */
.hn-mv__slide{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none}
.hn-mv__slide[data-active]{position:relative;opacity:1;visibility:visible;pointer-events:auto}
/* Only the picture cross-fades. Text that is half transparent for a moment is text an
   accessibility audit can catch at the wrong moment, so the plate switches at once. */
.hn-mv__slide[data-active] .hn-mv__shot{animation:hn-mv-fade .45s ease both}
@keyframes hn-mv-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hn-mv__slide[data-active] .hn-mv__shot{animation:none}}
.hn-mv__shot{position:relative;flex:none;width:100%;aspect-ratio:var(--hn-mv-ratio,16/9);display:block;overflow:hidden}
/* One image per slide, cropped to the frame. The earlier build laid a blurred
   copy of the same photo underneath to avoid bars — two decoded images per
   slide plus a 26px blur, which is what took the phone score down. Match the
   frame to the photo library instead: the shape is a setting. */
.hn-mv__pic{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transform-origin:52% 42%}
/* Camera moves rotate by slide — push left, push right, pull back, rise. One
   direction on every frame is an effect a reader can name, and an effect you
   can name has stopped working. Transforms only: the compositor animates these
   without repainting the picture. */
.hn-mv__slide[data-active] .hn-mv__pic{animation:hn-mv-zoom var(--hn-mv-dur,10s) linear both}
.hn-mv__slide:nth-of-type(4n+2)[data-active] .hn-mv__pic{animation-name:hn-mv-zoom-b}
.hn-mv__slide:nth-of-type(4n+3)[data-active] .hn-mv__pic{animation-name:hn-mv-zoom-c}
.hn-mv__slide:nth-of-type(4n+4)[data-active] .hn-mv__pic{animation-name:hn-mv-zoom-d}
/* One light sweep across the frame, once per slide. Also transform-only. */
.hn-mv__shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.04) 55%,transparent 64%);transform:translateX(-130%)}
.hn-mv__slide[data-active] .hn-mv__shot::after{animation:hn-mv-sweep 2.1s 1.1s ease-in-out both}
/* Shading under the progress bars and the counter, so white text has something
   to sit on whatever the photograph is doing up there.

   It lives inside .hn-mv__shot, which is why the percentage means what it says:
   38% of the picture. Parked next to the frame instead, it measured against the
   card — photograph plus the headline plate — and its lower edge came out around
   the middle of the photograph. That edge is what readers saw as a line drawn
   across the picture, and it fell right where the player buttons are.

   The fade still finishes at 78% rather than running to the edge: taken all the
   way, the last band of it lands on 1/255 black, which WebKit paints as a
   hairline. Below that stop the box is uniformly transparent and paints nothing
   at all. Both halves of this matter — one puts the edge somewhere harmless, the
   other stops the edge being visible. */
.hn-mv__veil{position:absolute;left:0;right:0;top:0;height:38%;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,0) 78%)}
.hn-mv__meta{position:relative;z-index:2;flex:none;display:flex;flex-direction:column;align-items:flex-start;width:100%}
.hn-mv__chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 -3px 16px;position:relative;z-index:1}
.hn-mv__src{padding:5px 10px;background:#fff;color:#111418;font-size:.72rem;font-weight:800}
/* The headline sits on a plate under the picture, never over it, and it stays
   there for as long as the slide does — it does not fly in, hold and leave.
   Text that is only readable for part of a frame is text most readers never
   read at all, and a card whose words come and go reads as a fault. Text on a
   photograph is legible until the photograph is a white kitchen, and this unit
   picks its own pictures. min-height keeps every slide the same height, so the
   page does not jump when a two-line headline follows a one-line one. */
.hn-mv__plate{width:100%;min-height:104px;padding:14px 16px 15px;background:var(--hn-bg-2);color:var(--hn-ink);display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden}
.hn-mv__title{font-family:var(--hn-font-body);font-size:clamp(1.1rem,4.2vw,1.34rem);font-weight:800;line-height:1.26;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-mv__cta{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;font-weight:800;color:var(--hn-acc-text)}
.hn-mv__cta svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4}
/* Transport on the picture, clear of the text — a player puts it there. */
.hn-mv__bar{position:absolute;right:8px;top:calc(50% - 52px);z-index:2;display:flex;align-items:center;gap:2px}
.hn-mv__btn{display:grid;place-items:center;flex:none;width:46px;height:46px;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 5px rgba(0,0,0,.75))}
.hn-mv__btn svg{width:25px;height:25px}
.hn-mv__btn:hover{background:rgba(255,255,255,.2)}
.hn-mv__ico{display:inline-flex;line-height:0}
.hn-mv__ico--play{display:none}
.hn-mv[data-held] .hn-mv__ico--play{display:inline-flex}
.hn-mv[data-held] .hn-mv__ico--pause{display:none}
/* Segmented bars along the top: the Stories signal that this is a thing you
   swipe, readable before a word of the headline is. */
.hn-mv__segs{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;gap:5px;padding:11px 12px 0}
.hn-mv__seg{flex:1;height:4px;background:rgba(255,255,255,.42);overflow:hidden}
.hn-mv__fill{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.hn-mv__fill[data-done]{transform:scaleX(1)}
.hn-mv__fill[data-run]{animation:hn-mv-fill var(--hn-mv-dur,10s) linear forwards}
.hn-mv__count{position:absolute;top:19px;inset-inline-end:12px;z-index:3;font-size:.72rem;font-weight:700;color:rgba(255,255,255,.9);font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.7)}
/* Live count. Only rendered when the number is real — see hn_social_proof(). */
.hn-mv__live{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:5px;background:rgba(0,0,0,.62);color:#fff;font-size:.71rem;font-weight:700}
.hn-mv__dot{width:6px;height:6px;border-radius:50%;background:#ff3b30;animation:hn-mv-pulse 1.8s ease-in-out infinite}
@keyframes hn-mv-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
/* Off screen, in a background tab, or paused by hand — one state, one rule.
   A unit the reader cannot see costs nothing. */
.hn-mv[data-paused] .hn-mv__fill,.hn-mv[data-paused] .hn-mv__pic,.hn-mv[data-paused] .hn-mv__shot::after{animation-play-state:paused}
@keyframes hn-mv-zoom{from{transform:scale(1.02)}to{transform:scale(1.16) translate3d(-1.2%,-1.4%,0)}}
@keyframes hn-mv-zoom-b{from{transform:scale(1.02)}to{transform:scale(1.16) translate3d(1.4%,-1%,0)}}
@keyframes hn-mv-zoom-c{from{transform:scale(1.17)}to{transform:scale(1.02) translate3d(0,.6%,0)}}
@keyframes hn-mv-zoom-d{from{transform:scale(1.04) translate3d(0,1.4%,0)}to{transform:scale(1.18)}}
@keyframes hn-mv-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hn-mv-sweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@media (min-width:700px){.hn-mv__plate{min-height:112px;padding:16px 20px 17px}.hn-mv__bar{right:14px}}

/* --- Second look, kept as a choice: the headline over the photograph instead
   of under it, and the transport back in a bar along the bottom. Same markup,
   same script — everything below is presentation, so neither look can rot. */
.hn-mv[data-style=overlay] .hn-mv__stage{aspect-ratio:var(--hn-mv-ratio,16/9)}
.hn-mv[data-style=overlay] .hn-mv__slide,.hn-mv[data-style=overlay] .hn-mv__slide[data-active]{position:absolute;display:block}
.hn-mv[data-style=overlay] .hn-mv__shot{position:absolute;inset:0;aspect-ratio:auto}
.hn-mv[data-style=overlay] .hn-mv__veil{height:100%;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.9) 100%)}
.hn-mv[data-style=overlay] .hn-mv__meta{position:absolute;left:0;right:0;bottom:58px;width:auto;padding:0 14px;gap:9px}
.hn-mv[data-style=overlay] .hn-mv__chips{margin:0}
.hn-mv[data-style=overlay] .hn-mv__plate{width:auto;min-height:0;padding:0;background:none;color:#fff;gap:10px;align-items:flex-start}
.hn-mv[data-style=overlay] .hn-mv__title{font-family:var(--hn-font-head);-webkit-line-clamp:3;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hn-mv[data-style=overlay] .hn-mv__cta{padding:9px 18px;border-radius:999px;background:var(--hn-acc-solid);color:var(--hn-accent-ink)}
.hn-mv[data-style=overlay] .hn-mv__bar{top:auto;right:0;left:0;bottom:0;justify-content:flex-start;gap:2px;padding:8px 8px 10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.55))}
.hn-mv[data-style=overlay] .hn-mv__btn{width:40px;height:40px}
.hn-mv[data-style=overlay] .hn-mv__btn svg{width:21px;height:21px}
@media (prefers-reduced-motion:reduce){
	.hn-mv__slide{transition:none}
	.hn-mv__pic,.hn-mv__shot::after,.hn-mv__fill,.hn-mv__dot{animation:none!important}
	.hn-mv__fill{transform:scaleX(1)}
}

/* ==========================================================================
   7d. Feedback card
   ========================================================================== */
.hn-fb{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;width:min(440px,calc(100vw - 24px));transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease,translate .22s ease}
.hn-fb[data-open]{opacity:1;transform:translate(-50%,0);pointer-events:auto}
/* Same travel as the chat disc — see the note there for why it is a translate. */
@media (max-width:899px){
	body:has([data-hn-stickybar]) .hn-fb{bottom:calc(66px + env(safe-area-inset-bottom));translate:0 52px}
	body:has([data-hn-stickybar][data-visible]) .hn-fb{translate:none}
}
.hn-fb__card{position:relative;padding:16px 18px 12px;border:1px solid var(--hn-line);border-radius:var(--hn-radius);background:var(--hn-bg);box-shadow:var(--hn-shadow);text-align:center}
.hn-fb__x{position:absolute;top:6px;inset-inline-end:6px}
.hn-fb__q{margin:0 0 12px;font-size:1.02rem;font-weight:800}
.hn-fb__row{display:flex;gap:10px;justify-content:center}
.hn-fb__row .hn-btn{min-width:104px}
.hn-fb__done{margin:0;font-size:.95rem;color:var(--hn-ink-2)}
.hn-fb__off{display:block;margin:12px auto 0;padding:4px;border:0;background:none;font-size:.74rem;color:var(--hn-ink-3);text-decoration:underline;cursor:pointer}
@media (prefers-reduced-motion:reduce){.hn-fb{transition:none}}

/* ==========================================================================
   8. Footer / misc
   ========================================================================== */
.hn-btn{border:0;border-radius:999px;padding:11px 20px;font-weight:700;cursor:pointer;background:var(--hn-acc-solid);color:var(--hn-accent-ink)}
.hn-btn--ghost{background:var(--hn-bg-2);color:var(--hn-ink)}


/* The row is the <nav> itself (custom markup) or the .nav-links wrapper that
   core's the_posts_pagination adds — never the links themselves, which are
   inline chips. */
.hn-pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--hn-line);border-radius:10px;text-decoration:none;color:var(--hn-ink)}
.hn-pagination .screen-reader-text{display:none}
.hn-pagination--pages{justify-content:flex-start;gap:6px;margin:18px 0}
.hn-pagination--pages .page-numbers-label{align-self:center;font-weight:700;color:var(--hn-ink-3)}
.hn-pagination .current{background:var(--hn-ink);color:var(--hn-bg);border-color:var(--hn-ink)}

.hn-empty{text-align:center;padding:50px 0}
/* One line, never a paragraph: the post title is the last crumb and long titles
   used to wrap the trail onto two or three rows above the headline. */
.hn-breadcrumbs{font-size:.8rem;color:var(--hn-ink-3);margin:10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-breadcrumbs a{color:var(--hn-ink)}
.hn-breadcrumbs a:hover{color:var(--hn-acc-text)}

/* WP core classes */
.alignwide{max-width:min(100%,980px);margin-inline:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.alignleft{float:left;margin:.3em 1.2em .8em 0}
.alignright{float:right;margin:.3em 0 .8em 1.2em}
.aligncenter{margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:.79rem;color:var(--hn-ink-3)}
.sticky .hn-card__title::before{content:"★ ";color:var(--hn-acc-text)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery-item img{border-radius:var(--hn-radius-sm)}

/* ==========================================================================
   9. Chat
   ========================================================================== */
/* Fixed, so it never participates in layout and never shifts anything. Hidden
   until the script has something to put in it — an empty pill that says nothing
   is worse than no pill. z-index sits above the sticky share bar (45) and below
   the feedback panel (60). */
/* Anchored to the corner on every screen size. It used to be a full-width bar
   lying across the article, which is why it had to hide itself on every scroll
   — and a control that keeps vanishing and reappearing is worse than one that
   covers a little. A disc in the corner covers a corner, so it can simply
   stay. */
/* column-reverse, not block flow: the panel is printed after the sticker so a
   script-less page still has the sticker first in the tab order, but it has to
   sit above it on screen. Without this the room hangs off the bottom edge.
   The width is stated rather than shrink-to-fit — a fixed box with left:auto
   sizes itself to its own min-content, and one long word in a message was
   enough to push it past the right edge of a phone. */
.hn-chat{position:fixed;z-index:55;left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 28px));display:flex;flex-direction:column-reverse;align-items:flex-end;pointer-events:none;transition:translate .22s ease,opacity .2s ease,visibility .2s}
.hn-chat>*{pointer-events:auto}
/* Nothing until the reader has finished an article — see inc/chat.php. The
   script takes this off, and takes it off for good once it has: reading on
   through the infinite feed never puts it back, only the cross does. */
.hn-chat.is-waiting{display:none}
/* Out of the way of the comment form — see initChatHush(). Not display:none:
   the disc has to be able to fade back in where it stood, and a display swap
   would re-run the arrive animation as if it had only just earned its place. */
.hn-chat.is-hushed{opacity:0;visibility:hidden}
/* Arrives from the edge rather than blinking into existence. Something that
   appears mid-scroll with no movement reads as a rendering glitch. */
.hn-chat:not(.is-waiting){animation:hn-chat-arrive .4s ease both}
@keyframes hn-chat-arrive{from{transform:translateX(46px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hn-chat:not(.is-waiting){animation:none}}
/* Mobile only: the share bar owns the very bottom of the screen on articles —
   but only while it is actually out. Keyed on the bar merely existing, the disc
   sat 78px up on every article whether the bar was on screen or not, which is
   what made it look like it was hanging in mid-air.
   The travel is a translate, never an animated bottom. bottom is a layout
   property: transitioning it on a fixed element makes iOS re-lay-out and
   repaint the thing on every frame of every scroll direction change, which is
   the stutter that looked like the disc was hopping. translate rides on the
   compositor, on the same .22s the bar itself uses, so the two move as one. */
@media (max-width:899px){
	body:has([data-hn-stickybar]) .hn-chat{bottom:calc(66px + env(safe-area-inset-bottom));translate:0 52px}
	body:has([data-hn-stickybar][data-visible]) .hn-chat{translate:none}
}

/* A disc, and nothing else. It used to grow into a pill carrying the last thing
   said, which meant a third state between "closed" and "open" — one that moved
   on its own every time somebody wrote, covered a strip of the article while it
   was out, and put a second cross on screen that did not do what the first one
   did. Two states are the whole design: a disc in the corner, and the room.
   What the pill was for — somebody is talking — is the count on the rim. */
.hn-chat__bar{position:relative;display:grid;place-items:center;width:58px;height:58px;padding:0;border:1px solid var(--hn-line);border-radius:50%;box-shadow:var(--hn-shadow);transition:box-shadow .2s ease;background:color-mix(in srgb,var(--hn-accent) 8%,var(--hn-bg));border-color:color-mix(in srgb,var(--hn-accent) 32%,var(--hn-line))}
@media (hover:hover){.hn-chat__bar:hover{box-shadow:0 2px 4px rgba(16,24,40,.08),0 14px 28px -14px rgba(16,24,40,.3)}}
/* The disc has nothing to say while the room is on screen. Keyed on the panel
   still being in the document rather than on .is-open, because .is-open comes
   off at the start of the closing fade and the disc would pop back under a
   sheet that is still visible. */
.hn-chat:has(.hn-chat__room:not([hidden])) .hn-chat__bar{display:none}

/* The grey flash on tap is the system's, not ours — and on a round button it
   arrives as a square, which is what made a plain press look like a glitch. */
.hn-chat__open,.hn-chat__collapse,.hn-chat__tab,.hn-chat__like,.hn-chat__replybtn,.hn-chat__me,.hn-chat__send{-webkit-tap-highlight-color:transparent}
.hn-chat__open{display:grid;place-items:center;width:100%;height:100%;border:0;border-radius:50%;background:none;padding:0;font:inherit;color:var(--hn-ink);cursor:pointer}
.hn-chat__emoji{display:block;font-size:1.45rem;line-height:1;animation:hn-chat-wave 5s ease-in-out infinite}
.hn-chat__collapse svg{display:block}

/* On the rim of the disc, hanging off it — a count sitting inside the circle
   reads as part of the icon. Positioned against .hn-chat rather than the bar,
   because the bar clips its own overflow to collapse the pill and would cut
   this in half. The ring in the site's background colour keeps it legible
   whatever it happens to be overlapping. */
/* The greeting, above the log rather than in it. Styled as a note from the
   site, not as a chat bubble: it is not a message anybody sent, and dressing it
   as one invites a reply to a person who is not in the room. */
.hn-chat__hello{flex:none;margin:0;padding:11px 14px;border-bottom:1px solid var(--hn-line);background:var(--hn-bg-2)}
.hn-chat__hello[hidden]{display:none}
.hn-chat__hello-who{display:block;font-size:.72rem;font-weight:800;letter-spacing:.02em;color:var(--hn-acc-text)}
.hn-chat__hello-text{margin:3px 0 0;font-size:.88rem;line-height:1.42;color:var(--hn-ink-2)}
.hn-chat__count{position:absolute;right:-4px;bottom:40px;z-index:2;display:none;place-items:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#c42b26;color:#fff;font-size:.7rem;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--hn-bg);pointer-events:none}
/* The panel carries the messages themselves; a count of unread ones on top of
   it is a number about something the reader is already looking at. */
.hn-chat:has(.hn-chat__room:not([hidden])) .hn-chat__count{display:none}
.hn-chat.is-unread .hn-chat__count{display:grid;animation:hn-chat-badge 1.8s ease-in-out infinite}
@keyframes hn-chat-badge{0%,72%,100%{transform:scale(1)}80%{transform:scale(1.2)}88%{transform:scale(.96)}}

/* Am I actually connected? Green while the polls come back, red once one has
   not — see setLive(). The ring is what keeps a 7px dot visible against a
   header that changes colour with the scheme. */
.hn-chat__live{flex:none;display:inline-grid;place-items:center;width:14px;height:14px}
.hn-chat__dot{width:7px;height:7px;border-radius:50%;background:#2ea043;box-shadow:0 0 0 2px color-mix(in srgb,#2ea043 22%,transparent)}
.hn-chat.is-offline .hn-chat__dot{background:#e5484d;box-shadow:0 0 0 2px color-mix(in srgb,#e5484d 22%,transparent);animation:hn-chat-blink 1.4s ease-in-out infinite}
@keyframes hn-chat-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.hn-chat.is-offline .hn-chat__dot{animation:none}}
/* The count reads as part of the dot, not as a third thing in the row: pulled
   back over the header's 8px gap so the two sit as one "someone is here" mark.
   Digits only — the sentence is in the screen-reader span beside it. */
.hn-chat__crowd{flex:none;margin-left:-4px;font-size:.72rem;font-weight:700;color:var(--hn-ink-3);font-variant-numeric:tabular-nums}
/* The silent half of the room. Quieter than the number beside it — these are
   people who have not said anything, and the count that matters in a chat is
   still the one for people who have. */
.hn-chat__ufo{flex:none;display:inline-flex;align-items:center;gap:3px;margin-left:2px;font-size:.72rem;font-weight:700;color:var(--hn-ink-3);font-variant-numeric:tabular-nums;opacity:.85}
.hn-chat__ufo[hidden]{display:none}

/* The icon shakes itself awake every few seconds. Long gap, short shake: a
   permanent animation in the corner of the screen stops being noticed within a
   minute and starts being irritating a minute later. */
/* A pulse, not a tilt. The rotation read as a badly aligned icon far more often
   than as a wave — an emoji is not symmetrical, so any angle on it looks like a
   mistake rather than a motion. */
@keyframes hn-chat-wave{
	0%,86%,100%{transform:scale(1)}
	89%{transform:scale(1.16)}
	93%{transform:scale(.96)}
	96%{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
	.hn-chat__emoji,.hn-chat.is-unread .hn-chat__count{animation:none}
	.hn-chat,.hn-chat__bar{transition:none}
}

/* svh, not dvh: the small viewport is the one that does not change when a
   mobile browser hides its address bar, so the panel keeps its height instead
   of resizing under the reader on every scroll. */
.hn-chat__room{display:flex;flex-direction:column;width:100%;height:min(62vh,460px);max-height:calc(100svh - 150px);margin-bottom:8px;background:var(--hn-bg);border:1px solid var(--hn-line);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow);overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease}
.hn-chat.is-open .hn-chat__room{opacity:1;transform:none}

/* On a phone the room is a sheet over the site, not a card in a corner. A
   360px panel on a 393px screen is a card with nowhere to sit: it covers the
   article it is floating over anyway, and half of it is spent on the gap. Full
   width, full height, one thing on screen — and the cross puts it back. */
@media (max-width:640px){
	/* Height and top come from the visual viewport, not from the layout one.
	   iOS does not shrink the page when the keyboard opens — it slides the
	   visible area down over an unchanged layout — so a sheet told to be 100%
	   tall stays full-page-tall and ends up half off screen with its own input
	   underneath the keys. The script feeds it the two numbers; the fallbacks
	   are what every other browser needs anyway. */
	/* Geometry hangs off the panel being in the document, not off .is-open.
	   .is-open is the animation state and comes off the moment the cross is
	   pressed, 220ms before the panel is hidden — keyed on it, the sheet
	   snapped back to a corner card above the disc for those 220ms while it
	   was still fading out, which is the jump the reader saw on close. */
	.hn-chat:has(.hn-chat__room:not([hidden])){left:var(--hn-chat-left,0px);right:auto;bottom:auto;top:var(--hn-chat-top,0px);width:var(--hn-chat-vw,100%);height:var(--hn-chat-vh,100dvh);z-index:70;translate:none}
	/* The slide-up is the shut state, not the open one. Written on .is-open it
	   stuck: the sheet came to rest three per cent down the screen, which on a
	   phone is the strip of header still showing above it, and the animation it
	   was meant to be never played at all. */
	.hn-chat__room{transform:translateY(3%)}
	/* The keyboard is padding, not a smaller sheet — see fitSheet(). Whichever
	   is taller, the home-indicator inset or the keys currently covering the
	   bottom of the screen. */
	.hn-chat:has(.hn-chat__room:not([hidden])) .hn-chat__room{height:100%;max-height:none;margin:0;border:0;border-radius:0;padding-bottom:max(env(safe-area-inset-bottom),var(--hn-chat-kb,0px))}
	.hn-chat:has(.hn-chat__room:not([hidden])) .hn-chat__head{padding-top:calc(8px + env(safe-area-inset-top))}
	/* The article carries on scrolling behind a full-screen sheet otherwise, so
	   closing the chat drops the reader somewhere they never scrolled to. */
	body:has(.hn-chat__room:not([hidden])){overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.hn-chat__room{transition:none}}
.hn-chat__head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-bottom:1px solid var(--hn-line)}
/* No scrollbar. There are two rooms — this article's category and the general
   one — and a horizontal scroller appeared only because one category name was
   long enough to push the other tab out. Letting the long one shrink and
   ellipsise is what a reader expects; a scrollbar inside a 58px-tall header is
   a thing nobody finds. */
.hn-chat__tabs{flex:1;display:flex;gap:6px;min-width:0;overflow:hidden}
.hn-chat__tab{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--hn-line);border-radius:999px;background:var(--hn-bg-2);color:var(--hn-ink-2);font:inherit;font-size:.76rem;font-weight:700;padding:4px 11px;cursor:pointer}
.hn-chat__tab[aria-selected=true]{background:var(--hn-acc-solid);border-color:var(--hn-accent);color:var(--hn-accent-ink)}
/* Both tabs shrank at the same rate, so a long category name left the reader
   looking at "Ylein…" — the room they are actually in, unreadable, to make
   space for the one they are not. The selected tab holds its width and the
   other one ellipsises; the cap stops a long selected name from doing the same
   thing in reverse. Only with two of them: a lone tab has the row to itself. */
.hn-chat__tabs:has(.hn-chat__tab+.hn-chat__tab) .hn-chat__tab[aria-selected=true]{flex-shrink:0;max-width:62%}
/* place-items, like its twin on the bar. Without it the drawn cross sits in the
   top-left of the circle instead of the middle — a button with an icon in it
   still has to say where the icon goes. Bigger on a phone: a 28px target is
   under every hit-area guideline there is, and this one closes the chat. */
.hn-chat__collapse{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--hn-bg-2);color:var(--hn-ink-3);cursor:pointer}
@media (max-width:640px){.hn-chat__collapse{width:40px;height:40px}}

/* Two sizes, one button. On a phone the room is already the whole screen, so
   the button is not there at all rather than there and useless. */
.hn-chat__wide{display:none}
@media (min-width:641px){
	.hn-chat__wide{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--hn-bg-2);color:var(--hn-ink-3);cursor:pointer}
	.hn-chat__wide svg{display:block}
	.hn-chat__wide svg:last-child,.hn-chat.is-wide .hn-chat__wide svg:first-child{display:none}
	.hn-chat.is-wide .hn-chat__wide svg:last-child{display:block}
	/* The width lives on the outer element — it is what the panel is measured
	   against — and the height on the room itself. Both stay inside the viewport
	   on a small laptop, which is why neither is a flat number. */
	.hn-chat.is-wide{width:min(920px,calc(100vw - 28px))}
	.hn-chat.is-wide .hn-chat__room{height:min(70vh,620px);max-height:calc(100svh - 110px)}
}

.hn-chat__log{flex:1;overflow-y:auto;overscroll-behavior:contain;list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:16px;font-size:.86rem}
.hn-chat__msg{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.hn-chat__avatar{font-size:1.05rem;line-height:1.3}
.hn-chat__who{display:block;margin-bottom:3px;font-size:.72rem;font-weight:700;color:var(--hn-ink-3)}
/* Block, not the inline span it used to be: inline put the thumb and the reply
   arrow on the same line as the last word of the message, hard against it. */
.hn-chat__text{display:block;line-height:1.45;overflow-wrap:anywhere}
/* Kept quiet by colour, not by opacity. Fading the whole strip to a third took
   the thumb somebody had already pressed down with it, so their own like came
   back looking greyed out and switched off — which is the one state it must
   never look like. A muted background says "secondary" perfectly well. */
.hn-chat__tools{display:inline-flex;gap:6px;margin-top:7px}
.hn-chat__like,.hn-chat__replybtn,.hn-chat__hide{border:0;border-radius:999px;background:var(--hn-bg-2);color:var(--hn-ink-2);font:inherit;font-size:.72rem;font-weight:700;line-height:1;padding:6px 10px;cursor:pointer}
/* Clearing your own line, and clearing all of them. Both only ever change what
   this reader sees — see hiddenSet() — so neither is styled as a destructive
   action. A red button here would promise something it does not do. */
.hn-chat__hide{font-size:.95rem;padding:3px 10px 5px}
.hn-chat__hide:hover{color:#e5484d}
.hn-chat__wipe{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:var(--hn-bg-2);font-size:.85rem;line-height:1;cursor:pointer}
/* Asked, waiting for the second tap. The armed state is the only red in the
   header, which is the whole point of it. */
.hn-chat__wipe.is-armed{background:color-mix(in srgb,#e5484d 18%,var(--hn-bg-2));box-shadow:0 0 0 2px color-mix(in srgb,#e5484d 34%,transparent)}
@media (max-width:640px){.hn-chat__wipe{width:40px;height:40px}}
.hn-chat__like:hover,.hn-chat__replybtn:hover{background:var(--hn-bg-3)}
.hn-chat__like.is-mine{opacity:1;background:var(--hn-acc-solid);color:var(--hn-accent-ink)}
.hn-chat__msg--mine .hn-chat__who{color:var(--hn-acc-text)}
/* Somebody answered you. A tint the width of the line, not a marker in the
   margin — the reader is scrolling a wall of grey text and the thing that has
   to catch the eye is the message itself. */
.hn-chat__msg--tome{padding:7px 9px;margin:0 -9px;border-radius:12px;background:color-mix(in srgb,var(--hn-accent) 11%,transparent)}
.hn-chat__msg--desk .hn-chat__text{font-weight:700}
.hn-chat__empty{color:var(--hn-ink-3);text-align:center;margin:auto 0;padding:20px 10px}

/* flex-end, not center: the box grows upward as the text wraps and the buttons
   have to stay on the line the reader is typing on. Positioned, because the
   emoji panel hangs off the form rather than off the little button that opens
   it — see below. */
.hn-chat__form{position:relative;display:flex;align-items:flex-end;gap:6px;padding:8px;border-top:1px solid var(--hn-line)}
.hn-chat__me{flex:none;width:34px;height:34px;border:1px solid var(--hn-line);border-radius:50%;background:var(--hn-bg-2);font-size:1.05rem;line-height:1;cursor:pointer}
/* Pressed, because the line below it is now the name and not the message. The
   badge itself stays put — moving it would leave nothing saying what changed. */
.hn-chat.is-renaming .hn-chat__me{background:var(--hn-accent);border-color:var(--hn-accent)}
.hn-chat.is-renaming .hn-chat__input{border-color:var(--hn-accent)}
/* One row tall until the text needs a second one, then up to four. resize:none
   because the drag handle a textarea comes with would let the reader pull the
   box over the conversation they are answering. */
.hn-chat__input{flex:1;min-width:0;border:1px solid var(--hn-line);border-radius:18px;background:var(--hn-bg-2);color:var(--hn-ink);font:inherit;font-size:.88rem;line-height:1.4;padding:8px 13px;resize:none;overflow-y:hidden;max-height:96px}
/* 16px exactly, and below the rule it overrides — a media query adds no
   specificity, so the same selector further down the file wins whatever the
   screen size. Under 16px Safari zooms the whole page in the moment the field
   takes focus and never zooms back out, which is what was cutting the sheet
   off at the right edge: a fixed element is laid out in the layout viewport,
   and zooming makes that wider than the screen. */
@media (max-width:640px){.hn-chat__input{font-size:16px}}
/* The picker opens upward, over the log. The room clips its own overflow, which
   is what keeps the panel inside the chat instead of hanging off the page. */
/* static, so the panel below measures itself against the form. Anchored to the
   button it opens from, a 280px panel hanging off a control that sits 240px
   from the left edge of a 360px room starts 34px outside it — and the room
   clips its own overflow, so that is 34px of emoji sliced off. Against the
   form it can only ever be as wide as the room it lives in. */
.hn-chat__form .hn-emoji{position:static;margin-left:0}
.hn-chat__form .hn-emoji__btn{width:34px;height:34px;border-radius:50%;background:var(--hn-bg-2)}
.hn-chat__form .hn-emoji__btn:hover{background:var(--hn-bg-3)}
/* Edge to edge of the form. 180px tall showed four and a half rows and cut the
   fifth in half, which reads as a broken panel rather than a scrollable one. */
.hn-chat__form .hn-emoji__panel{left:8px;right:8px;width:auto;max-height:min(272px,42vh)}
.hn-chat__send{flex:none;border:0;border-radius:999px;background:var(--hn-acc-solid);color:var(--hn-accent-ink);font:inherit;font-size:.82rem;font-weight:700;padding:9px 14px;cursor:pointer}
.hn-chat__send[disabled]{opacity:.5;cursor:default}
/* Lined up with the message field, not with the edge of the form. The countdown
   is about that field, and two pixels out of true reads as a mistake. 48px is
   the avatar button plus the gap in front of it. */
.hn-chat__note{margin:0;padding:0 12px 8px 48px;font-size:.76rem;color:var(--hn-ink-3);min-height:1.2em}
.hn-chat__note[data-error]{color:#b3261e}

/* ==========================================================================
   10. Hanna look for the reader modules
   The modules above keep their behaviour; this block gives them the magazine
   look — soft grey panels, one accent line, names and dates in a row.
   ========================================================================== */

/* Quick read */
.hn-summary{position:relative;padding:0;margin:0 0 20px;border-radius:var(--hn-radius);background:var(--hn-bg-2);overflow:hidden}
.hn-summary::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--hn-accent),var(--hn-accent-2))}
.hn-summary__in{background:none;border-radius:0;padding:18px 20px 16px}
.hn-summary__label{background:none;color:var(--hn-ink);-webkit-text-fill-color:currentColor;font-weight:600;font-size:16px}
.hn-summary__spark{color:var(--hn-acc-text)}
.hn-summary li{font-size:16px}
.hn-summary li::marker{color:var(--hn-acc-text)}
.hn-summary li[data-cursor]::after{background:var(--hn-accent)}
.hn-summary--plain{border:0;background:var(--hn-bg-2)}
.hn-hotnext{background:var(--hn-bg)}
.hn-hotnext__kicker{color:var(--hn-acc-text)}
.hn-hotnext__title{font-family:inherit;font-weight:600}

/* Table of contents */
.hn-toc{border:0;background:var(--hn-bg-2);margin:0 0 24px}
.hn-toc__btn{font-family:inherit;font-weight:600;font-size:16px;padding:14px 18px}
.hn-toc ol{padding:0 18px 14px}
.hn-toc a{font-size:15.5px;border-top-color:var(--hn-line)}
.hn-tocbar__in{max-width:calc(var(--hn-wrap-wide) + 36px)}
.hn-tocbar a{font-weight:500}

/* Read more */
.hn-readmore button{background:linear-gradient(90deg,var(--hn-acc-solid),var(--hn-acc-solid-2));color:#fff;font-weight:600;box-shadow:none}

/* Reactions, tags, share */
.hn-react,.hn-pills{text-align:center}
.hn-react__btn,.hn-pill{border-radius:999px;font-weight:500}
.hn-react__btn[aria-pressed=true],.hn-pill[aria-pressed=true]{border-color:var(--hn-accent);color:var(--hn-acc-text)}
.hn-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:26px 0}
.hn-tag{background:var(--hn-bg-2);border:0;border-radius:4px;padding:3px 10px;color:var(--hn-ink);font-size:14px;font-weight:400}
.hn-tag:hover{background:var(--hn-acc-solid);color:var(--hn-accent-ink)}
.hn-share{justify-content:center}

/* Author box */
.hn-author{display:flex;align-items:flex-start;gap:36px;margin:44px 0}
.hn-author__avatar{flex:none}
.hn-author__avatar img,.hn-author__avatar .hn-avatar{display:block;width:160px;height:160px;border-radius:10px;border:4px solid var(--hn-bg);box-shadow:0 6px 24px rgba(0,0,0,.16);object-fit:cover}
.hn-author__head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.hn-author__name{margin:0;font-size:20px;font-weight:600;line-height:1.3}
.hn-author__name a{color:var(--hn-ink)}
.hn-author__role{background:var(--hn-ink);color:var(--hn-bg);font-size:14px;font-weight:500;line-height:1.45;padding:1px 8px;border-radius:3px}
.hn-author__bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:16px;line-height:1.85;color:var(--hn-ink-2)}
.hn-author__bio[data-open]{display:block;-webkit-line-clamp:unset}
.hn-author__more{margin-top:4px;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:var(--hn-acc-text);text-decoration:underline;text-underline-offset:3px}
.hn-author__links{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:160px;margin:14px 0 0;padding:0;list-style:none}
.hn-author__links a{display:grid;place-items:center;color:var(--hn-ink)}
.hn-author__links a:hover{color:var(--hn-acc-text)}
.hn-author__links svg{width:23px;height:23px}
.hn-postnav{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:44px 0}
.hn-postnav__item{display:flex;align-items:center;gap:24px;padding:15px;border:1px solid var(--hn-line);border-radius:10px;color:var(--hn-ink)}
.hn-postnav__item--next{grid-column:2}
.hn-postnav__item img{flex:none;width:96px;height:96px;border-radius:10px;object-fit:cover}
.hn-postnav__dir{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:16px;color:var(--hn-ink-3)}
.hn-postnav__dir svg{width:16px;height:16px;transform:rotate(90deg)}
.hn-postnav__item--next .hn-postnav__dir svg{transform:rotate(-90deg)}
.hn-postnav__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;font-weight:600;line-height:1.4}
.hn-postnav__item:hover .hn-postnav__title{color:var(--hn-acc-text)}
@media (max-width:699px){
	/* On a phone the box gets a frame so it does not float on the white page. */
	.hn-author{gap:18px;padding:18px;border:1px solid var(--hn-line);border-radius:12px;background:var(--hn-bg-2)}
	.hn-author__avatar img,.hn-author__avatar .hn-avatar{width:88px;height:88px;border-width:3px}
	.hn-postnav{grid-template-columns:1fr;gap:14px}
	.hn-postnav__item--next{grid-column:auto}
	.hn-postnav__item{gap:16px}
	.hn-postnav__item img{width:72px;height:72px}
}

/* Comments: avatar, "name | date" in a row, the text in its own frame */
.hn-comments__title{font-size:20px;font-weight:600}
.hn-comment{padding:10px 0;border-bottom:0}
.hn-comment__head{gap:12px}
.hn-comment__avatar img,.hn-comment__avatar .hn-avatar{width:46px;height:46px;border-radius:50%}
.hn-comment__author{font-size:15px;font-weight:600;padding-right:10px;border-right:1px solid var(--hn-line)}
.hn-comment__date{font-size:13px}
.hn-comment__badge{background:#111;color:#fff;border-radius:3px;padding:1px 6px;font-size:10px;font-weight:600;text-transform:uppercase}
.hn-comment__text{margin:10px 0 6px;padding:18px 20px;border:1px solid var(--hn-line);border-radius:var(--hn-radius);font-size:15px;line-height:1.6;color:var(--hn-text)}
.hn-comment__text p:last-child{margin-bottom:0}
.hn-comment__actions{padding-left:16px}
.hn-comment__reply{font-weight:500;color:var(--hn-ink-3)}
.hn-clist ol{padding-left:36px}
.hn-cform__btn{font-family:inherit;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--hn-acc-solid),var(--hn-acc-solid-2))}
.comment-form textarea,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url]{width:100%;background:var(--hn-bg-2);border:1px solid var(--hn-line);border-radius:6px;padding:10px 12px;font:inherit;font-size:15px;color:var(--hn-ink)}
.comment-form .submit,.comment-form input[type=submit]{border:0;border-radius:999px;padding:11px 26px;font:inherit;font-weight:600;color:#fff;background:linear-gradient(90deg,var(--hn-acc-solid),var(--hn-acc-solid-2));cursor:pointer}

/* FAQ, read next, beeps banner, sticky share bar */
.hn-faq__title,.hn-faq__q{font-family:inherit;font-weight:600}
.hn-row__title{font-family:inherit;font-weight:600}
.hn-beepscta__title,.hn-inlinecard__title,.hn-beepcard__title{font-family:inherit;font-weight:600}
.hn-stickybar__title{font-weight:600}
.hn-btn{font-weight:600}