/* pryvpn.com blog (generated by _src/blog.mjs): index, topic pages and articles. Builds on ../shared/pry.css and
 * site.css (same tokens, cards, prose and bands); loaded only on blog pages. No client framework, no web fonts beyond
 * the site's own, and every animation stops with prefers-reduced-motion. */

/* ---------------- cover art: a night scene with the seal, coloured by the article's first topic ---------------- */
.cover { --c1: #1B1F5E; --c2: #3340FF; --c3: #2FB5FF; --seal: #FFFFFF; --line: rgba(255,255,255,.14);
  position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: 20px; color: #fff;
  background: radial-gradient(90% 90% at 88% 8%, color-mix(in srgb, var(--c3) 75%, transparent), transparent 58%),
    radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, var(--c2) 85%, transparent), transparent 62%),
    linear-gradient(140deg, var(--c1), #070920 88%); }
.tone-aqua { --c1: #0A3657; --c2: #1AA3F0; --c3: #5CE1E6; }
.tone-violet { --c1: #28196A; --c2: #5B4BFF; --c3: #B06BFF; }
.tone-indigo { --c1: #151A55; --c2: #3340FF; --c3: #8C96FF; }
.tone-ember { --c1: #3A1630; --c2: #E0463C; --c3: #FF9A3D; }
.tone-seal { --c1: #1B1F5E; --c2: #3340FF; --c3: #2FB5FF; }
.tone-mint { --c1: #0A3A38; --c2: #0FA870; --c3: #3DD69A; }
.tone-teal { --c1: #0A2F44; --c2: #0E8FA7; --c3: #5CE1E6; }
.tone-gold { --c1: #33240E; --c2: #C27A0E; --c3: #F2B23A; }
.cover .cv-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); mask: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); }
.cover .cv-orbit { position: absolute; left: 34%; top: -30%; width: 110%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255,255,255,.18); transform: rotate(-18deg); }
.cover .cv-seal { position: absolute; right: -6%; top: 50%; width: 64%; aspect-ratio: 1; transform: translateY(-50%); opacity: .9; }
.cover .cv-seal .seal .s-ring, .cover .cv-seal .seal .s-track { stroke-width: 7; }
.cover .cv-seal .seal .s-wave { animation: none; }
.cover .cv-ic { position: absolute; right: calc(-6% + 32% - 34px); top: 50%; width: 68px; height: 68px; margin-top: -34px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c3) 80%, #fff), var(--c2) 72%); box-shadow: 0 20px 50px -14px var(--c2), inset 0 1px 0 rgba(255,255,255,.35); }
.cover .cv-ic .i { width: 30px; height: 30px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.cover .cv-tag { position: absolute; left: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font: 600 .74rem var(--f-body); letter-spacing: .01em;
  background: rgba(7,9,32,.45); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cover .cv-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 10px var(--c3); }
.cover.big { aspect-ratio: 5 / 4; border-radius: 30px; box-shadow: 0 50px 100px -40px color-mix(in srgb, var(--c2) 70%, transparent), 0 1px 0 rgba(255,255,255,.4) inset; }
.cover.big .cv-seal { right: 50%; width: 76%; transform: translate(50%, -50%); }
.cover.big .cv-ic { right: 50%; width: 96px; height: 96px; margin: -48px -48px 0 0; }
.cover.big .cv-ic .i { width: 42px; height: 42px; }
.cover.big .cv-seal .seal .s-wave { animation: wave 3.6s var(--ease) infinite; }
.cover.big .cv-tag { left: 20px; bottom: 18px; font-size: .8rem; }
/* dots of topic colour */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c3) 22%, transparent); }

/* ---------------- index hero ---------------- */
.blog-hero .grid { align-items: center; }
.blog-hero h1 { max-width: 14ch; }
.blog-hero-foot { display: grid; gap: 18px; margin-top: 30px; }
.topic-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 12px; border-radius: 999px; text-decoration: none; font-size: .88rem; font-weight: 500;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, color .2s, background .2s; }
.topic-chips a:hover, .topic-chips a[aria-current="page"] { border-color: var(--seal); color: var(--ink); }
.topic-chips a[aria-current="page"] { background: var(--seal-soft); }
.topic-chips small { font: 600 .72rem var(--f-mono); color: var(--ink-3); padding: 1px 7px; border-radius: 999px; background: var(--surface-2); }
.dark-scene .topic-chips a { color: #DCE0FF; }
.feed-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: .88rem; font-weight: 600; text-decoration: none; }
.feed-ic { width: 18px; height: 18px; color: #FFB27A; }
.cover-stack { position: relative; height: clamp(300px, 34vw, 430px); }
.cs-item { position: absolute; width: min(360px, 78%); display: grid; gap: 0; border-radius: 22px; overflow: hidden; background: rgba(13,16,54,.8); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transition: transform .6s var(--ease); }
.cs-item .cover { border-radius: 0; aspect-ratio: 16 / 9; }
.cs-title { padding: 12px 16px 14px; font: 600 .9rem/1.3 var(--f-display); letter-spacing: -.01em; color: #F1F2FF; }
.cs-1 { right: 0; top: 4%; transform: rotate(4deg); z-index: 3; }
.cs-2 { right: 26%; top: 22%; transform: rotate(-5deg); z-index: 2; }
.cs-3 { right: 8%; top: 44%; transform: rotate(-1deg) scale(.94); z-index: 1; opacity: .92; }
.cover-stack:hover .cs-1 { transform: rotate(2deg) translateY(-6px); }
.cover-stack:hover .cs-2 { transform: rotate(-7deg) translateX(-10px); }
@media (max-width: 900px) { .cover-stack { display: none; } .blog-hero h1 { max-width: 18ch; } }

/* ---------------- post cards ---------------- */
.sec-mini { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.sec-mini::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.blog-latest { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 20px; }
.blog-latest + .blog-all { padding-top: 40px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; }
.post-card { display: grid; grid-template-rows: auto 1fr; border-radius: 26px; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.post-card .cover { border-radius: 0; }
.post-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--seal) 50%, var(--line)); box-shadow: 0 30px 60px -30px rgba(51,64,255,.5); }
.post-card:hover .cv-seal { transform: translateY(-50%) rotate(8deg); }
.post-card .cv-seal { transition: transform .8s var(--ease); }
.post-card:focus-visible { outline: none; box-shadow: var(--focus); }
.pc-body { display: grid; gap: 10px; align-content: start; padding: 22px 24px 24px; }
.pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .8rem; color: var(--ink-3); }
.pc-topic { font-weight: 600; color: var(--seal); }
.post-card h3 { font-size: 1.26rem; line-height: 1.2; }
.post-card p { color: var(--ink-2); font-size: .95rem; }
.post-card .go { font-weight: 600; font-size: .9rem; color: var(--seal); margin-top: 4px; }
.post-card .go::after { content: " →"; transition: margin .2s; }
.post-card:hover .go::after { margin-left: 4px; }
/* the newest article, side by side on wide screens */
.post-card.feature { grid-template-rows: none; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.post-card.feature .cover { aspect-ratio: auto; min-height: 340px; }
.post-card.feature .pc-body { align-content: center; gap: 14px; padding: clamp(26px, 4vw, 52px); }
.post-card.feature h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.post-card.feature p { font-size: 1.04rem; max-width: 52ch; }
.post-card.feature .cv-seal { width: 58%; right: 50%; transform: translate(50%, -50%); }
.post-card.feature .cv-ic { right: 50%; margin-right: -34px; }
.post-card.feature:hover .cv-seal { transform: translate(50%, -50%) rotate(8deg); }
@media (max-width: 820px) {
  .post-card.feature { grid-template-columns: minmax(0, 1fr); }
  .post-card.feature .cover { min-height: 0; aspect-ratio: 16 / 10; }
}
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.pager .pg { font-size: .88rem; color: var(--ink-3); }
.pager .btn .i { width: 16px; height: 16px; }
.blog-empty { color: var(--ink-2); font-size: 1.05rem; }
.back-link { margin-top: 30px; }
.back-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.back-link .i { width: 16px; height: 16px; }

/* about the blog (E-E-A-T: who writes, how) and the author box of each article */
.about-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 22px; padding: clamp(24px, 4vw, 40px); border-radius: 30px; background: linear-gradient(150deg, var(--surface), var(--seal-soft)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.about-card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.about-card p { color: var(--ink-2); margin-top: 10px; max-width: 70ch; }
.about-card .ticks { margin-top: 18px; }
.about-mk { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--grad-seal); color: #fff; box-shadow: 0 20px 40px -16px rgba(51,64,255,.7); }
.about-mk .pry-mark { color: #fff; }
.blog-about { padding-top: 20px; }
@media (max-width: 560px) { .about-card { grid-template-columns: minmax(0, 1fr); } .about-mk { width: 56px; height: 56px; border-radius: 18px; } }

/* ---------------- topic page ---------------- */
.topic-hero .kicker { gap: 10px; }
.topic-hero .topic-chips { margin-top: 24px; }

/* ---------------- article ---------------- */
.post-hero { padding-bottom: 36px; overflow: hidden; }
.post-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.post-hero h1 { max-width: 24ch; font-size: clamp(2.1rem, 3.9vw, 3.3rem); }
.post-hero .cover.big { width: 100%; max-width: 380px; justify-self: end; }
.post-topics { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-topics a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; text-decoration: none; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); }
.post-topics a:hover { border-color: var(--seal); color: var(--ink); }
.art-meta .by a { color: inherit; text-decoration: none; }
.art-meta .by a:hover { text-decoration: underline; }
@media (max-width: 900px) { .post-hero-grid { grid-template-columns: minmax(0, 1fr); } .post-hero .cover.big { display: none; } }
.post-prose > :first-child { margin-top: 0; }
.short-answer { margin: 0 0 1.8em; padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--seal); box-shadow: var(--shadow); }
.short-answer b { display: inline-flex; align-items: center; gap: 8px; font: 600 .82rem var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--seal); margin-bottom: 8px; }
:lang(ja) .short-answer b { text-transform: none; letter-spacing: 0; }
.short-answer b .i { width: 16px; height: 16px; }
.short-answer p { margin: 0; color: var(--ink); font-size: 1.08rem; line-height: 1.65; }
.post-prose blockquote { margin: 1.6em 0; padding: 20px 22px; border-radius: 20px; background: var(--seal-soft); color: var(--ink); font-size: 1rem; line-height: 1.6; }
.post-prose blockquote p:last-child { margin-bottom: 0; }
.post-prose blockquote strong:first-child { display: block; margin-bottom: 4px; }
.post-prose code { font: 500 .9em var(--f-mono); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.post-prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.post-prose img { max-width: 100%; height: auto; border-radius: 18px; }
/* in-article figures (diagrams and screenshots from content/blog/assets/<key>/) */
.post-prose .post-fig { margin: 2em 0; padding: 0; text-align: center; }
.post-prose .post-fig img { display: block; margin: 0 auto; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.post-prose .post-fig figcaption { margin-top: 12px; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.post-prose .table-scroll td, .post-prose .table-scroll th { font-size: .94rem; }
.post-prose a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-sources { margin-top: 2.4em; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: .92rem; }
.post-sources h2 { font-size: 1.15rem; margin: 0 0 .6em; }
.post-sources ol { margin: 0; }
.post-sources a { word-break: break-word; }
.post-sources p { margin-top: .8em; color: var(--ink-3); }
.post-mistake { display: flex; gap: 10px; align-items: flex-start; margin-top: 2em; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); font-size: .9rem; color: var(--ink-2); }
.post-mistake .i { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--seal); }
.author-box { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; margin-top: 2em; padding: 24px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 110px; }
.author-box .about-mk { width: 60px; height: 60px; border-radius: 18px; }
.author-box small { font-size: .78rem; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
:lang(ja) .author-box small { text-transform: none; letter-spacing: 0; }
.author-box h2 { font-size: 1.25rem; margin: 4px 0 6px; }
.author-box p { margin: 0 0 8px; font-size: .96rem; }
.author-box a { font-weight: 600; font-size: .92rem; }
.toc .toc-note { font-size: .86rem; color: var(--ink-2); }
.post-deeper + .post-related { padding-top: 0; }
.blog-band .kicker { justify-content: center; color: #AEB5FF; margin-bottom: 14px; }

@media (max-width: 560px) {
  .pc-body { padding: 18px 18px 20px; }
  .post-card.feature .pc-body { padding: 22px 18px 24px; }
  .short-answer { padding: 18px; }
  .author-box { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cover.big .cv-seal .seal .s-wave { animation: none; }
  .post-card, .post-card .cv-seal, .cs-item { transition: none; }
}