/* Widgets */
:root { --sf-s-14: 0.875rem; --sf-c-2: hsl(109 70% 65%); --sf-s-40: 2.5rem; --sf-c-line: hsl(9 14% 22%); --sf-c-bg: hsl(9 18% 9%); --sf-c-soft: hsl(9 16% 17%); --sf-s-28: 1.75rem; --sf-s-56: 3.5rem; --sf-c-hero: hsl(9 18% 12%); --sf-s-8: 0.5rem; --sf-c-mute: hsl(9 8% 62%); --sf-s-12: 0.75rem; --sf-s-24: 1.5rem; --sf-s-36: 2.25rem; --sf-c-1d: hsl(49 52% 52%); --sf-s-6: 0.375rem; --sf-s-18: 1.125rem; --sf-c-1: hsl(49 52% 62%); --sf-s-4: 0.25rem; --sf-c-card: hsl(9 16% 14%); --sf-s-2: 0.125rem; --sf-c-fg: hsl(9 12% 92%); --sf-s-10: 0.625rem; --sf-ff-h: 'Kanit', Arial, Helvetica, sans-serif; --sf-ff-b: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --sf-s-16: 1rem; --sf-s-20: 1.25rem; --sf-c-hero-fg: hsl(9 12% 96%) }
* { box-sizing: border-box }
body { color: var(--sf-c-fg) }
body { font-family: var(--sf-ff-b); font-size: 1.125rem; background: var(--sf-c-bg); margin: 0; line-height: 1.55 }
pre { max-width: 100%; overflow-x: auto }
code { overflow-wrap: anywhere }
img { display: block; height: auto; max-width: 100% }
.jf-system-bar { gap: var(--sf-s-10); align-items: center }
.jf-system-bar { background: var(--sf-c-soft); z-index: 20; line-height: 1.35; display: flex; position: sticky; inset-block-start: 0; color: var(--sf-c-fg) }
.jf-system-bar { justify-content: space-between; margin: 0; font-size: .9em; padding-block: 0.5rem; padding-inline: 0.563rem }
.jf-system-bar p, .jf-system-bar span { flex: 1 1 auto; margin: 0 }
/* Lists */
.jf-system-bar a { text-decoration: underline; font-weight: 700; color: var(--sf-c-fg) }
.jf-bar-x { cursor: pointer; color: var(--sf-c-fg); background: transparent; border: 0 }
.jf-bar-x { font-size: 1.1em; padding: var(--sf-s-2) var(--sf-s-4) var(--sf-s-2) var(--sf-s-4); line-height: 1 }
.jf-system-bar[hidden] { display: none }
a { color: var(--sf-c-1) }
a:hover { color: var(--sf-c-1d) }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.2; font-family: var(--sf-ff-h) }
h1,h2,h3,h4 { letter-spacing: -.02em; margin-block-end: .64em }
h1 { font-size: 1.89rem }
h2 { font-size: 1.40rem; margin-top: 1.84em }
h3 { font-size: 1.06rem; margin-block-start: 1.22em }
/* Article */
h2[id],h3[id],.jf-permalink { scroll-margin-block-start: 5.625rem }
.jf-permalink { opacity: .3 }
.jf-permalink { font-weight: 400; text-decoration: none; margin-left: .37em }
h2:hover .jf-permalink,h3:hover .jf-permalink { opacity: .85 }
[data-section="jf-rich-text"] { max-inline-size: 48.75rem }
[data-section="jf-rich-text"] p { margin: 0 0 1.23em }
[data-section="jf-rich-text"] ul,[data-section="jf-rich-text"] ol { padding-left: 1.48em; margin-bottom: 1.13em }
[data-section="jf-rich-text"] li { margin: .4em 0 .4em 0 }
[data-section="jf-rich-text"] table { width: 100%; margin-top: 1.3em; border-collapse: collapse; margin-bottom: 1.3em }
[data-section="jf-rich-text"] table { display: block; font-size: .94em; overflow-x: auto }
[data-section="jf-rich-text"] th,[data-section="jf-rich-text"] td { text-align: left; border: 0.063rem solid var(--sf-c-line) }
/* Content */
[data-section="jf-rich-text"] th,[data-section="jf-rich-text"] td { vertical-align: top; padding-block: 0.563rem; padding-inline: 0.875rem }
[data-section="jf-rich-text"] th { font-weight: 600; background: var(--sf-c-soft) }
[data-section="jf-rich-text"] blockquote { border-radius: 0rem; margin-block: 1.1em; margin-inline: 0; border-inline-start: 0.25rem solid var(--sf-c-2); background: var(--sf-c-card); padding: var(--sf-s-14) 1.375rem var(--sf-s-14) 1.375rem }
[data-section="jf-rich-text"] a sup { line-height: 0; font-size: .7em; vertical-align: super }
[data-section="jf-rich-text"] a:has(>sup) { text-decoration: none }
[data-section="jf-rich-text"] code { background: var(--sf-c-soft); font-size: .92em; padding-block: 0.063rem; border-radius: 0.25rem; padding-inline: 0.313rem }
[data-section="jf-rich-text"] img { margin: .88em 0 .88em 0; border-radius: 0rem }
[data-section="jf-lead-box"] { font-size: 1.06em }
[data-section="jf-lead-box"] { border-left: 0.375rem solid var(--sf-c-1); padding: var(--sf-s-20) 1.313rem }
[data-section="jf-lead-box"] { background: var(--sf-c-soft); margin: 0 0 1.938rem; border-radius: 0rem }
[data-section="jf-lead-box"] p:last-child { margin-bottom: 0 }
/* Blocks */
[data-section="jf-for-against"] { display: grid; column-gap: 1.188rem; margin-inline: 0; grid-template-columns: 1fr 1fr; margin-block: 1.063rem; row-gap: 1.188rem }
[data-section="jf-for-against"]>div { background: var(--sf-c-card); border: 0.063rem solid var(--sf-c-line) }
[data-section="jf-for-against"]>div { border-radius: 0rem; padding: var(--sf-s-14) 1.188rem }
[data-section="jf-for-against"] h3 { margin-block-start: 0 }
[data-section="jf-for-against"] ul { padding-inline-start: 1.23em; margin: 0rem }
[data-section="jf-sources"] { font-size: .9em; margin: 1.938rem 0 0 }
[data-section="jf-sources"] { padding-top: var(--sf-s-18); color: var(--sf-c-mute); border-top: 0.063rem solid var(--sf-c-line) }
[data-section="jf-sources"] ol { padding-left: 1.41em }
[data-section="jf-sources"] li { word-break: break-word; margin-top: .35em; margin-bottom: .35em }
[data-section="jf-sources"] a { color: var(--sf-c-mute) }
[data-section="jf-blockquote-box"] { font-style: italic; border-radius: 0rem; border-inline-start: 0.25rem solid var(--sf-c-2); margin-inline: 0; margin-block: 1.25rem }
/* Reset */
[data-section="jf-blockquote-box"] { background: var(--sf-c-card); padding-block: 1.375rem; padding-inline: 1.625rem; font-size: 1.15em }
[data-section="jf-cta"] { background: var(--sf-c-1); color: #111111; text-align: center; border-radius: 0rem }
[data-section="jf-cta"] { padding: 2.188rem; margin: 2.688rem 0 2.688rem 0 }
[data-section="jf-cta"] h2 { color: inherit; margin-top: 0 }
[data-section="jf-comparison"]>dl { margin: 0.813rem 0; outline: 0.063rem solid hsl(9 14% 22%); background: var(--sf-c-card); display: grid; row-gap: 0.313rem; grid-template-columns: auto 1fr; border-radius: 0rem; padding: var(--sf-s-12) var(--sf-s-14) }
[data-section="jf-comparison"]>dl { outline-offset: -1px; column-gap: 0.938rem }
[data-section="jf-comparison"] dt { font-size: .9em; font-weight: 600; color: var(--sf-c-mute) }
[data-section="jf-comparison"] dd { margin: 0rem }
.jf-btn { text-decoration-line: none; background: var(--sf-c-2) }
.jf-btn { margin-top: 0.688rem; border-radius: 0rem }
.jf-btn { padding-block: 0.688rem; padding-inline: 1.813rem; display: inline-block; font-weight: 600; color: #111111 }
/* Layout */
.jf-btn:hover { filter: brightness(1.08); color: #111111 }
.jf-tiles { display: grid; grid-template-columns: repeat(auto-fill,minmax(15.625rem,1fr)); gap: 1.313rem }
.jf-tiles { margin-block: 1.313rem; margin-inline: 0 }
.jf-item { flex-direction: column; padding: 1.313rem; color: #ffffff; display: flex; border-radius: 0rem; outline: 0.063rem solid hsl(9 14% 22%); background: var(--sf-c-card) }
.jf-item { outline-offset: -1px; gap: var(--sf-s-8) }
.jf-item h2,.jf-item h3 { margin: 0rem; font-size: 1.08em; color: #ffffff }
.jf-item p { color: var(--sf-c-mute); margin: 0rem; font-size: .95em }
.jf-item a { font-weight: 600; text-decoration: none; color: #ffffff }
.jf-cards { row-gap: 1.063rem; column-gap: 1.063rem }
.jf-cards { margin-bottom: var(--sf-s-28); margin-top: var(--sf-s-28) }
.jf-cards { grid-template-columns: repeat(3,minmax(0,1fr)); display: grid }
/* Footer */
.jf-cards .jf-item { overflow: hidden; box-shadow: 0 0.125rem 0.625rem hsl(9 12% 92% / 0.08); padding: 0 }
.jf-cards .jf-item .jf-card-media { padding: 0.438rem; object-fit: contain; aspect-ratio: 4 / 3; max-inline-size: 100%; outline: 0.063rem solid hsl(9 12% 92% / 0.25); inline-size: 100%; background: hsl(9 12% 92% / 0.9) }
.jf-cards .jf-item .jf-card-media { outline-offset: -1px; block-size: auto }
.jf-cards .jf-card-body { display: flex; row-gap: 0.5rem; column-gap: 0.5rem; flex-direction: column; min-inline-size: 0; padding: 1.063rem }
.jf-cards .jf-card-actions { display: flex }
.jf-cards .jf-card-actions { margin-block-start: auto; flex-wrap: wrap; align-items: center; gap: 0.438rem }
.jf-cards .jf-card-onion { font-size: .85em }
.jf-cards .jf-card-onion { line-height: 1.35; color: var(--sf-c-mute) }
.jf-cards .jf-card-onion { min-width: 0; display: block }
.jf-cards .jf-card-onion code { overflow-wrap: anywhere; font-family: inherit; word-break: break-all }
.jf-cards .jf-card-reverse { grid-column: span 1 }
/* Utilities */
.jf-cards-v2 { grid-template-columns: 1fr }
.jf-cards.jf-cards-v2 > .jf-item { display: flex; flex-direction: row; align-items: stretch; text-align: left }
.jf-cards-v2 .jf-card-reverse .jf-card-media { order: 2 }
.jf-cards-v2 .jf-item .jf-card-media { aspect-ratio: 4 / 3; inline-size: min(34%,260px); flex-shrink: 0 }
.jf-cards-v3 { grid-template-columns: 1fr }
.jf-cards.jf-cards-v3 > .jf-item { display: flex; align-items: center; flex-direction: row }
.jf-cards.jf-cards-v3 > .jf-item { text-align: left; padding: var(--sf-s-10) }
.jf-cards.jf-cards-v3 > .jf-item .jf-card-media { inline-size: 6.063rem; border-radius: 53.938rem; flex-shrink: 0; aspect-ratio: 1 / 1; block-size: 6.063rem }
.jf-cards.jf-cards-v3 > .jf-item .jf-card-body { flex: 1 1 auto; padding: var(--sf-s-8) 0.813rem; min-width: 0 }
.jf-cards-v4 { grid-template-columns: 1fr }
.jf-cards.jf-cards-v4 > .jf-item { grid-template-columns: minmax(11.25rem,34%) 1fr; display: grid; text-align: left }
/* Cards */
.jf-cards-v4 .jf-item .jf-card-media { height: 100%; aspect-ratio: 4 / 3 }
.jf-card-lead { margin-bottom: var(--sf-s-16); color: var(--sf-c-mute); max-width: 70ch }
.jf-cards .jf-btn { margin-top: 0; white-space: normal; text-align: center }
.jf-notew,.jf-info-strip,.jf-utility { padding: 0.813rem 1.063rem 0.813rem 1.063rem; display: block; margin: 1.063rem 0; border: 0.063rem solid hsl(9 14% 22% / 0.85); background: var(--sf-c-soft) }
.jf-notew,.jf-info-strip,.jf-utility { border-radius: 0rem; line-height: 1.45; font-size: .88em }
.jf-notew a, .jf-info-strip a, .jf-utility a { font-weight: 600 }
.jf-utility { text-align: center }
.jf-ctx { border-left: 0.313rem solid var(--sf-c-2); margin: 2.063rem 0 }
.jf-ctx { outline: 0.063rem solid hsl(9 14% 22% / 0.9); padding: var(--sf-s-16) var(--sf-s-20); border-radius: 0rem; max-width: 100%; background: var(--sf-c-soft); outline-offset: -1px }
.jf-ctx h2, .jf-ctx h3 { margin-top: 0; font-size: 1.08em }
.jf-ctx p:last-child { margin-bottom: 0 }
/* Global */
.jf-ctx ul { margin: 0; padding-left: 1.22em }
.jf-top-menu .jf-cat-link,.jf-page-end .jf-cat-link,.jf-cat-link { color: #ffffff }
.jf-top-menu .jf-cat-link.jf-cat-link-0,.jf-page-end .jf-cat-link.jf-cat-link-0,.jf-cat-link.jf-cat-link-0 { font-weight: 700; color: #ffffff }
.jf-top-menu .jf-cat-link.jf-cat-link-1,.jf-page-end .jf-cat-link.jf-cat-link-1,.jf-cat-link.jf-cat-link-1 { display: inline-block; background: var(--sf-c-2) }
.jf-top-menu .jf-cat-link.jf-cat-link-1,.jf-page-end .jf-cat-link.jf-cat-link-1,.jf-cat-link.jf-cat-link-1 { color: #111111; border-radius: 0.125rem; font-weight: 600; padding: var(--sf-s-2) 0.563rem var(--sf-s-2) 0.563rem; text-decoration-line: none }
.jf-top-menu .jf-cat-link.jf-cat-link-2,.jf-page-end .jf-cat-link.jf-cat-link-2,.jf-cat-link.jf-cat-link-2 { padding: var(--sf-s-2) var(--sf-s-8) var(--sf-s-2) var(--sf-s-8); display: inline-block }
.jf-top-menu .jf-cat-link.jf-cat-link-2,.jf-page-end .jf-cat-link.jf-cat-link-2,.jf-cat-link.jf-cat-link-2 { text-decoration-line: none; font-weight: 600; color: #ffffff }
.jf-top-menu .jf-cat-link.jf-cat-link-2,.jf-page-end .jf-cat-link.jf-cat-link-2,.jf-cat-link.jf-cat-link-2 { border: 0.094rem solid var(--sf-c-2); border-radius: 0.125rem }
.jf-top-menu .jf-cat-link.jf-cat-link-3,.jf-page-end .jf-cat-link.jf-cat-link-3,.jf-cat-link.jf-cat-link-3 { text-decoration-thickness: 0.125rem; color: #ffffff }
.jf-top-menu .jf-cat-link.jf-cat-link-3,.jf-page-end .jf-cat-link.jf-cat-link-3,.jf-cat-link.jf-cat-link-3 { text-decoration: underline; text-underline-offset: 0.188rem }
.jf-top-menu .jf-cat-link.jf-cat-link-4,.jf-page-end .jf-cat-link.jf-cat-link-4,.jf-cat-link.jf-cat-link-4 { color: #ffffff; font-weight: 600 }
/* Navigation */
.jf-top-menu .jf-cat-link.jf-cat-link-4::before,.jf-page-end .jf-cat-link.jf-cat-link-4::before,.jf-cat-link.jf-cat-link-4::before { margin-right: .36em; color: #ffffff; content: "•" }
.jf-top-menu .jf-cat-link.jf-cat-link-0,.jf-page-end .jf-cat-link.jf-cat-link-0,.jf-cat-link.jf-cat-link-0:hover,.jf-top-menu .jf-cat-link.jf-cat-link-1,.jf-page-end .jf-cat-link.jf-cat-link-1,.jf-cat-link.jf-cat-link-1:hover,.jf-top-menu .jf-cat-link.jf-cat-link-2,.jf-page-end .jf-cat-link.jf-cat-link-2,.jf-cat-link.jf-cat-link-2:hover,.jf-top-menu .jf-cat-link.jf-cat-link-3,.jf-page-end .jf-cat-link.jf-cat-link-3,.jf-cat-link.jf-cat-link-3:hover,.jf-top-menu .jf-cat-link.jf-cat-link-4,.jf-page-end .jf-cat-link.jf-cat-link-4,.jf-cat-link.jf-cat-link-4:hover { opacity: 1 }
.jf-nav-open { color: inherit; border: 0 }
.jf-nav-open { background: none; display: none }
.jf-nav-open { align-items: center; cursor: pointer; height: 1.375rem; width: 1.75rem }
.jf-nav-open span { display: block; block-size: 0.125rem }
.jf-nav-open span { position: relative; background: currentColor; inline-size: 100% }
.jf-nav-open span::before,.jf-nav-open span::after { display: block; background: currentColor; block-size: 0.125rem }
.jf-nav-open span::before,.jf-nav-open span::after { inset-inline-end: 0; position: absolute; inset-inline-start: 0; content: "" }
.jf-nav-open span::before { top: -8px }
.jf-nav-open span::after { bottom: -8px }
/* Responsive */
.jf-dateline { font-size: .9em; display: flex }
.jf-dateline { color: var(--sf-c-mute); flex-wrap: wrap }
.jf-dateline { margin-block-end: var(--sf-s-20); gap: var(--sf-s-8) 1.063rem }
.jf-trail { font-size: .88em; margin-bottom: var(--sf-s-12); color: var(--sf-c-mute) }
.jf-trail a { color: var(--sf-c-mute); text-decoration: none }
.jf-topic { font-size: .76em }
.jf-topic { letter-spacing: .07em; color: var(--sf-c-2) }
.jf-topic { font-weight: 700; margin-block-end: 0.688rem; text-transform: uppercase; display: inline-block }
.jf-figure figcaption { font-size: .85em; color: var(--sf-c-mute); margin: 0.563rem 0 0 }
[data-section="jf-howto"] .jf-figure, [data-section="jf-rich-text"] .jf-figure { margin: var(--sf-s-16) 0 var(--sf-s-6) }
[data-section="jf-howto"] .jf-figure img { inline-size: 100%; border-radius: 0.375rem }
/* Header */
[data-section="jf-next-up"] { margin-top: 2.688rem }
p.jf-topic { margin: 0 0 0.563rem }
.jf-article-header hgroup { margin: 0 }
[data-section="jf-sources"] dl { grid-template-columns: 2.2em 1fr; display: grid; row-gap: 0.438rem; column-gap: 0.563rem }
[data-section="jf-sources"] dt { color: var(--sf-c-mute) }
[data-section="jf-sources"] dd { margin: 0 }
[data-section="jf-sources"] cite { font-style: normal }
[data-section="jf-accordion"] { row-gap: 0.938rem; display: grid; grid-template-columns: repeat(auto-fill,minmax(17.5rem,1fr)); column-gap: 0.938rem }
[data-section="jf-accordion"]>div { background: var(--sf-c-card) }
[data-section="jf-accordion"]>div { padding: var(--sf-s-14) var(--sf-s-18); border-radius: 0rem; outline: 0.063rem solid hsl(9 14% 22%); outline-offset: -1px }
[data-section="jf-accordion"] h3 { font-size: 1.02em; margin: 0 0 var(--sf-s-8) }
/* Typography */
[data-section="jf-howto"] { margin-top: 1.438rem; counter-reset: s; border-left: 0.188rem solid var(--sf-c-line); padding: 0 0 0 1.313rem; margin-bottom: 1.438rem }
[data-section="jf-howto"] dt { font-size: 1.05em; font-weight: 700; margin: 1.188rem 0 var(--sf-s-4); font-family: var(--sf-ff-h) }
[data-section="jf-howto"] dt::before { content: counter(s) ". "; color: var(--sf-c-2); counter-increment: s }
[data-section="jf-howto"] dd { margin: 0rem }
.jf-table-scroll { overflow-x: auto; max-inline-size: 100% }
p,li,dd,td,blockquote,figcaption { overflow-wrap: anywhere }
.jf-inner { margin: 0 auto 0 auto; max-inline-size: 60rem }
.jf-inner { padding-block: 0; padding-inline: 1.125rem }
.jf-page-header { color: #111111; background: var(--sf-c-2); border-bottom: 0.188rem solid var(--sf-c-fg) }
.jf-header-inner { align-items: stretch; display: flex; column-gap: 1.063rem; justify-content: space-between; row-gap: 1.063rem; flex-wrap: wrap }
.jf-logo { text-decoration: none; font-family: var(--sf-ff-h); font-size: 1.8rem; font-weight: 600; color: #111111 }
/* Base */
.jf-logo { padding-block-start: var(--sf-s-18); text-transform: uppercase; padding-block-end: var(--sf-s-18); letter-spacing: .02em }
.jf-top-menu { display: flex }
.jf-top-menu a { padding-block: 0; display: flex; text-transform: uppercase; padding-inline: 1rem; font-size: .85em; color: #111111; border-inline-start: 0.188rem solid var(--sf-c-fg); font-weight: 700; align-items: center; text-decoration: none }
.jf-top-menu a:hover { color: #111111; background: var(--sf-c-fg) }
.jf-nav-open { border: 0; color: #111111; background: none }
.jf-intro { padding-block-start: var(--sf-s-56); padding-block-end: var(--sf-s-56); border-block-end: 0.188rem solid var(--sf-c-fg) }
.jf-intro h1 { text-transform: uppercase }
.jf-intro h1 { max-width: 56.25rem; line-height: .95 }
.jf-intro h1 { font-size: 4rem; margin: 0 0 var(--sf-s-20) }
.jf-intro p { margin: 0rem; padding-inline-start: var(--sf-s-16); max-inline-size: 40rem }
.jf-intro p { font-size: 1.25em; border-left: 0.188rem solid var(--sf-c-fg) }
/* Components */
.jf-article-body { padding: var(--sf-s-40) 0 4.938rem }
.jf-tiles { row-gap: 1.625rem; column-gap: 1.625rem }
.jf-tiles .jf-item { background: var(--sf-c-card); color: inherit; box-shadow: 0.375rem 0.375rem 0 var(--sf-c-fg); text-decoration: none; transition: transform .1s; outline: 0.188rem solid hsl(9 12% 92%); outline-offset: -3px }
.jf-tiles .jf-item:hover { transform: translate(-2px,-2px); box-shadow: 0.5rem 0.5rem 0 var(--sf-c-fg) }
.jf-tiles .jf-item img { aspect-ratio: 16/9; border: 0.188rem solid var(--sf-c-fg); object-fit: cover; width: 100% }
.jf-topic { padding-inline: 0.5rem; background: var(--sf-c-2); outline: 0.125rem solid hsl(9 12% 92%); color: #111111; padding-block: 0.125rem; outline-offset: -2px }
.jf-article-header { border-block-end: 0.188rem solid var(--sf-c-fg); padding-block-end: 1.375rem; margin: 0 0 var(--sf-s-24) }
.jf-article-header h1 { margin: 0.563rem 0 var(--sf-s-12); font-size: 3rem; line-height: 1; text-transform: uppercase }
.jf-strapline { font-size: 1.15em; margin-block-end: 0.688rem }
.jf-two-col { display: grid }
.jf-two-col { align-items: start; column-gap: 2.313rem; row-gap: 2.313rem; grid-template-columns: minmax(0,1fr) 17.5rem }
/* Misc */
.jf-side-column { inset-block-start: 1.25rem; position: sticky }
.jf-contents { box-shadow: 0.375rem 0.375rem 0 var(--sf-c-fg) }
.jf-contents { padding-inline: 1.125rem; border: 0.188rem solid var(--sf-c-fg); padding-block: 1.063rem; background: var(--sf-c-card) }
.jf-contents ol,.jf-contents ul { margin: 0.563rem 0 0; padding-left: 1.38em }
.jf-contents a { text-decoration-line: none; font-weight: 600; color: var(--sf-c-fg) }
.jf-post>.jf-contents { margin: 0 0 1.688rem }
.jf-figure img { box-shadow: 0.375rem 0.375rem 0 var(--sf-c-fg); border: 0.188rem solid var(--sf-c-fg); inline-size: 100% }
.jf-figure { margin-block-end: 1.813rem }
[data-section="jf-rich-text"] th,[data-section="jf-rich-text"] td { border: 0.125rem solid var(--sf-c-fg) }
[data-section="jf-rich-text"] th { background: var(--sf-c-2) }
[data-section="jf-lead-box"] { background: var(--sf-c-soft); box-shadow: 0.375rem 0.375rem 0 var(--sf-c-fg); border: 0.188rem solid var(--sf-c-fg); border-left-width: 0.188rem }
/* Forms */
[data-section="jf-cta"] { box-shadow: 0.375rem 0.375rem 0 var(--sf-c-fg); border: 0.188rem solid var(--sf-c-fg); background: var(--sf-c-2); color: #111111 }
.jf-btn { color: var(--sf-c-card); background: var(--sf-c-fg) }
.jf-btn { outline: 0.188rem solid hsl(9 12% 92%); outline-offset: -3px }
.jf-item { outline: 0.188rem solid hsl(9 12% 92%); outline-offset: -3px }
.jf-page-end { background: var(--sf-c-fg); color: var(--sf-c-bg); padding: var(--sf-s-36) 0 0; border-block-start: 0.188rem solid var(--sf-c-fg) }
.jf-foot-row { row-gap: 1.875rem; grid-template-columns: 1fr 1fr; display: grid }
.jf-foot-row { padding-block-end: var(--sf-s-24); column-gap: 1.875rem }
.jf-foot-row .jf-logo { color: var(--sf-c-bg); padding: 0; font-size: 2.6rem }
.jf-foot-row a { margin-right: 1.063rem; color: var(--sf-c-bg); text-transform: uppercase }
.jf-foot-row a { font-weight: 700; font-size: .85em }
.jf-footer-links { opacity: .8; font-size: .85em; border-top: 0.063rem solid var(--sf-c-mute); padding: 0.813rem 1.313rem 0.813rem 1.313rem }
/* Media */
.jf-two-col.jf-side-left { grid-template-columns: 16.25rem minmax(0,1fr) }
.jf-contents ul { padding-inline-start: 1.03em; margin: 0 }
.jf-visual { margin: 1.625rem auto 0; inline-size: min(21.125rem, 75vw) }
.jf-visual > * { block-size: auto; inline-size: 100%; display: block }
.jf-visual { background-image: linear-gradient(144deg, var(--sf-c-1), transparent 44%), radial-gradient(circle at 3% 64%, var(--sf-c-2), transparent 44%); opacity: 0.5 }
.jf-visual { aspect-ratio: 1.5; border-radius: 0.5rem 3.188rem }
.jf-sponsor-unit { margin: 0; padding: 0.438rem 0.813rem 0.438rem 0.813rem }
.jf-sponsor-unit { background: transparent; justify-content: flex-end; max-inline-size: 100vw; display: flex }
.jf-sponsor-unit { min-inline-size: 0; box-sizing: border-box; inline-size: 100% }
.jf-sponsor-content { row-gap: 0.25rem; inline-size: 100%; display: flex; column-gap: 0.25rem; flex-direction: column; max-inline-size: 100% }
.jf-sponsor-content { align-items: center; min-inline-size: 0; box-sizing: border-box }
/* Widgets */
.jf-sponsor-content.jf-sponsor-side { flex-direction: row; row-gap: 0.563rem; column-gap: 0.563rem }
.jf-sponsor-content.jf-sponsor-side { align-items: center; min-width: 0; width: 100% }
.jf-sponsor-link { min-width: 0; display: block }
.jf-sponsor-link { width: min(29.25rem, 100%); flex: 0 1 auto }
.jf-sponsor-link { max-width: 100%; flex-basis: auto }
.jf-sponsor-image { inline-size: min(29.25rem, 100%); display: block }
.jf-sponsor-image { max-inline-size: 100%; block-size: auto; min-inline-size: 0 }
.jf-sponsor-label { line-height: 1.2; color: inherit; opacity: .75; font-size: .72rem }
.jf-sponsor-side .jf-sponsor-label { white-space: nowrap }
.jf-sponsor-side .jf-sponsor-link { flex: 0 1 auto }
.jf-sponsor-side .jf-sponsor-link { flex-basis: auto; width: min(29.25rem, 100%); min-width: 0 }
/* Lists */
.jf-snackbar { z-index: 90 }
.jf-snackbar { padding: 0.688rem 1.188rem; box-shadow: 0 0.625rem 1.875rem hsl(9 12% 92% / 0.25) }
.jf-snackbar { color: var(--sf-c-bg); left: 50%; border-radius: 63.563rem; font-size: .92em; background: var(--sf-c-fg); transform: translateX(-50%); bottom: 2rem; position: fixed }
.jf-author-photo { background: var(--sf-c-soft); height: 2.25rem; object-fit: cover; width: 2.25rem; border-radius: 50% }
.jf-byline { display: flex; column-gap: 0.563rem; row-gap: 0.563rem; align-items: center }
.jf-byline { font-size: .9em; color: var(--sf-c-mute) }
.jf-pagination { justify-content: center; row-gap: 0.5rem; display: flex; column-gap: 0.5rem }
.jf-pagination { margin-top: 1.688rem; flex-wrap: wrap; margin-bottom: 1.688rem }
.jf-pagination a,.jf-pagination span { display: inline-block; border: 0.063rem solid var(--sf-c-line); min-width: 2.25rem; padding: 0.438rem var(--sf-s-10); text-align: center; text-decoration: none; border-radius: 0rem }
.jf-pagination [aria-current] { border-color: var(--sf-c-1); color: #111111; background: var(--sf-c-1) }
.jf-pagination a:hover { background: var(--sf-c-soft) }
/* Article */
.jf-author-card { gap: 1.063rem }
.jf-author-card { background: var(--sf-c-card); align-items: flex-start; margin-block: 2.25rem; margin-inline: 0; display: flex; padding: 1.188rem; border-radius: 0rem; outline: 0.063rem solid hsl(9 14% 22%); outline-offset: -1px }
.jf-author-card h4 { margin-block-end: var(--sf-s-4) }
.jf-author-card p { color: var(--sf-c-mute); margin: 0; font-size: .94em }
.jf-keywords { display: flex; flex-wrap: wrap }
.jf-keywords { column-gap: 0.313rem; row-gap: 0.313rem }
.jf-keywords a { color: var(--sf-c-fg); padding-inline: 0.563rem; text-decoration-line: none; border-radius: 65.688rem; background: var(--sf-c-soft); padding-block: 0.25rem; font-size: .86em }
.jf-keywords a:hover { background: var(--sf-c-1); color: #111111 }
pre { padding-block: 1rem; font-size: .9em; color: var(--sf-c-fg); overflow: auto; border-radius: 0rem; padding-inline: 0.875rem; background: var(--sf-c-card) }
pre { line-height: 1.5; margin: 1.05em 0 1.05em 0 }
pre code { border-radius: 0 }
/* Content */
pre code { font-size: inherit; background: transparent }
pre code { color: inherit; padding: 0 }
code,kbd,pre { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace }
::selection,::-moz-selection { background: var(--sf-c-2); color: #111111 }
.jf-btn.jf-ghost { outline: 0.063rem solid hsl(49 52% 62%); background: transparent; color: var(--sf-c-1); outline-offset: -1px }
.jf-btn.jf-small { padding: 0.313rem var(--sf-s-12); font-size: .86em }
.jf-trail ol { column-gap: 0.5rem; display: flex; margin: 0; list-style: none; flex-wrap: wrap; padding: 0; row-gap: 0.25rem }
.jf-trail li+li::before { opacity: .5; margin-inline-end: 0.563rem; content: "»" }
.jf-gap-1 { margin-top: var(--sf-s-4) }
.jf-gap-b1 { margin-block-end: var(--sf-s-4) }
.jf-gap-2 { margin-top: 0.438rem }
/* Blocks */
.jf-gap-b2 { margin-block-end: 0.438rem }
.jf-gap-3 { margin-block-start: 0.813rem }
.jf-gap-b3 { margin-block-end: var(--sf-s-12) }
.jf-gap-4 { margin-top: 1.438rem }
.jf-gap-b4 { margin-block-end: 1.375rem }
.jf-gap-5 { margin-block-start: 1.875rem }
.jf-gap-b5 { margin-bottom: 2.063rem }
.jf-gap-6 { margin-block-start: 2.625rem }
.jf-gap-b6 { margin-block-end: 2.75rem }
.jf-two-cols { display: grid; column-gap: 0.875rem; row-gap: 0.875rem; grid-template-columns: repeat(2,1fr) }
.jf-grid-3 { row-gap: 1rem; grid-template-columns: repeat(3,1fr); display: grid; column-gap: 1rem }
/* Reset */
summary { cursor: pointer; list-style: disclosure-closed }
details[open] summary { margin-block-end: 0.438rem }
kbd { font: inherit }
kbd { border: 0.063rem solid var(--sf-c-line); background: var(--sf-c-card); padding: var(--sf-s-2) var(--sf-s-6) }
kbd { border-radius: 0.25rem; font-size: .85em; border-bottom-width: 0.125rem }
mark { background: hsl(109 70% 65% / 0.35); color: inherit }
mark { padding-block: 0; border-radius: 0.125rem; padding-inline: 0.188rem }
small { font-size: .82em }
.jf-lead { font-size: 1.15em; line-height: 1.55 }
.jf-lead { font-weight: 300; color: var(--sf-c-fg) }
blockquote cite { margin-block-start: 0.438rem; color: var(--sf-c-mute); display: block }
/* Layout */
blockquote cite { font-style: normal; font-size: .88em }
.jf-nf { padding: var(--sf-s-28) 0 2.625rem }
.jf-nf code { padding: var(--sf-s-2) var(--sf-s-8) var(--sf-s-2) var(--sf-s-8); background: var(--sf-c-card); border-radius: 0.25rem }
.jf-nf code { outline: 0.063rem solid hsl(9 14% 22%); outline-offset: -1px }
@media only screen and (max-width: 662px){h1,h2,h3 { overflow-wrap: anywhere } .jf-cards { grid-template-columns: 1fr } .jf-cards.jf-cards-v2 > .jf-item,.jf-cards.jf-cards-v4 > .jf-item { display: block } .jf-cards.jf-cards-v2 > .jf-item .jf-card-media,.jf-cards.jf-cards-v4 > .jf-item .jf-card-media { height: auto; width: 100%; aspect-ratio: 16 / 9 } [data-section="jf-for-against"] { grid-template-columns: minmax(0,1fr) } .jf-foot-row nav { flex-wrap: wrap; display: flex } .jf-intro h1 { line-height: 1.05; font-size: 1.55rem } .jf-logo { font-size: 1.7rem } .jf-article-header h1 { font-size: 1.55rem } .jf-two-cols,.jf-grid-3 { grid-template-columns: minmax(0,1fr) }}
@media only screen and (max-width: 749px){table { max-width: 100%; overflow-x: auto; display: block }}
@media only screen and (max-width: 865px){.jf-two-col,.jf-foot-row { grid-template-columns: minmax(0,1fr) } .jf-side-column { position: static }}
@media only screen and (max-width: 787px){.jf-nav-open { align-self: center; display: flex } .jf-top-menu { flex-direction: column; border-block-start: 0.188rem solid var(--sf-c-fg) } .jf-top-menu { display: none; width: 100% } .jf-top-menu a { padding-bottom: var(--sf-s-12); border-left: 0; padding-top: var(--sf-s-12) } [data-menu] .jf-top-menu { display: flex }}
@media only screen and (max-width: 894px){.jf-two-col.jf-side-left { grid-template-columns: minmax(0,1fr) }}
@media only screen and (max-width: 538px){.jf-sponsor-content.jf-sponsor-side { flex-direction: column } .jf-sponsor-link { flex-basis: auto }}
@media (prefers-contrast:more){a { text-decoration: underline } img,video { filter: contrast(1.1) } body { color: #fff }}