/* AccentCodes — shared stylesheet. Used by homepage and all subpages. */

:root{--paper:#f8f4ec;--paper-dark:#efe8d9;--ink:#1a1612;--ink-soft:#58504a;--ink-faint:#8a8278;--accent:#8b2b1f;--accent-soft:#b84a3c;--accent-ghost:#8b2b1f12;--teal:#2d5f5d;--rule:#d9d0bd;--rule-soft:#e6dfcc;--card:#fffdf7;--sh-sm:0 1px 2px rgba(26,22,18,.04),0 2px 8px rgba(26,22,18,.04);--sh-md:0 4px 16px rgba(26,22,18,.06),0 12px 32px rgba(26,22,18,.04);--sh-lg:0 12px 32px rgba(26,22,18,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter Tight',sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 800px 400px at 10% 0%,rgba(139,43,31,.04),transparent),radial-gradient(ellipse 600px 500px at 95% 20%,rgba(45,95,93,.04),transparent);background-attachment:fixed;overflow-x:hidden}
::selection{background:var(--accent);color:var(--paper)}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 24px}}

header{padding:18px 0 14px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(248,244,236,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:50}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:'Fraunces',serif;font-weight:800;font-size:24px;letter-spacing:-.02em;line-height:1;color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:4px}
@media(min-width:640px){.logo{font-size:28px}}
.logo .dot{color:var(--accent);font-style:italic}
.logo .sub{font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-left:10px;padding-left:10px;border-left:1px solid var(--rule)}
.head-links{display:flex;gap:20px;font-size:14px}
.head-links a{color:var(--ink-soft);text-decoration:none;font-weight:500;transition:color .15s}
.head-links a:hover{color:var(--accent)}
@media(max-width:720px){.head-links,.logo .sub{display:none}}

.hero{padding:40px 0 28px;max-width:800px}
@media(min-width:640px){.hero{padding:56px 0 32px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
.eyebrow::before{content:'';width:20px;height:1px;background:var(--accent)}
h1{font-family:'Fraunces',serif;font-size:clamp(32px,6.5vw,60px);font-weight:400;line-height:1.03;letter-spacing:-.03em;margin-bottom:18px}
h1 em{font-style:italic;font-weight:400;color:var(--accent);font-variation-settings:"opsz" 144}
h1 .accent-demo{display:inline-block;background:var(--accent-ghost);padding:0 8px;border-radius:4px;color:var(--accent);font-style:italic}
.hero-sub{font-size:17px;color:var(--ink-soft);max-width:640px;line-height:1.55;margin-bottom:24px}
@media(min-width:640px){.hero-sub{font-size:19px}}
.quick-ref{display:flex;flex-wrap:wrap;gap:14px 20px;padding:16px 20px;background:var(--card);border:1px solid var(--rule);border-radius:10px;max-width:680px;box-shadow:var(--sh-sm)}
.quick-ref-item{display:flex;align-items:center;gap:10px;font-size:13px}
@media(min-width:640px){.quick-ref-item{font-size:14px}}
.quick-ref-item .os{font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.quick-ref-item .os svg{width:14px;height:14px;flex-shrink:0}
.quick-ref-item .how{color:var(--ink-soft)}
kbd{font-family:'JetBrains Mono',monospace;font-size:11px;padding:2px 6px;background:var(--paper-dark);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;color:var(--ink);font-weight:500;white-space:nowrap}

/* AdSense containers */
.ad-container{margin:28px 0;text-align:center;min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-container .adsbygoogle{display:block;width:100%}
.ad-container-rect{min-height:250px}
/* Dev placeholder styling — only shows when ad fails to load */
.ad-container:empty::before,.ad-container:has(.adsbygoogle[data-ad-status="unfilled"])::before{content:'Ad space';color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
/* In-article ad: extra breathing room + subtle divider so it doesn't visually stack with the top banner ad on mobile */
.ad-in-article{margin-top:44px!important;padding-top:20px;border-top:1px solid var(--rule-soft);position:relative;flex-direction:column}
.ad-in-article::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:48px;height:6px;background:var(--paper);border-radius:0 0 8px 8px}
@media(min-width:640px){.ad-in-article{margin-top:56px!important}}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin-bottom:28px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{background:0;border:0;padding:13px 16px;font-family:'Inter Tight',sans-serif;font-size:14px;font-weight:500;color:var(--ink-soft);cursor:pointer;position:relative;white-space:nowrap;transition:color .15s;display:flex;align-items:center;gap:8px;flex-shrink:0}
@media(min-width:640px){.tab{padding:14px 20px;font-size:15px}}
.tab svg{width:16px;height:16px;flex-shrink:0}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent);font-weight:600}
.tab.active::after{content:'';position:absolute;bottom:-1px;left:12px;right:12px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}

.panel{display:none;animation:fadeIn .25s ease}
.panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Hide hero on non-default panels to de-emphasize on return visits */
body[data-tab="chart"] .hero,
body[data-tab="how"] .hero{display:none}
/* Also tighten top spacing when hero is hidden */
body[data-tab="chart"] .ad-container:first-of-type,
body[data-tab="how"] .ad-container:first-of-type{margin-top:20px}

/* Quick search row (top of ALT Codes panel) */
.quick-search-row{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.quick-search{position:relative;background:var(--card);border:2px solid var(--rule);border-radius:12px;display:flex;align-items:center;padding:0 14px;transition:border-color .15s,box-shadow .15s}
.quick-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ghost)}
.quick-search .qs-icon{color:var(--ink-faint);flex-shrink:0}
.quick-search input{flex:1;border:0;outline:0;padding:14px 10px;font-family:'Inter Tight',sans-serif;font-size:16px;background:transparent;color:var(--ink);min-width:0}
.quick-search input::placeholder{color:var(--ink-faint)}
.quick-search .qs-clear{border:0;background:var(--paper-dark);color:var(--ink-soft);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:none;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.quick-search .qs-clear:hover{background:var(--accent);color:var(--paper)}
.quick-search.has-value .qs-clear{display:flex}

/* Tap-to-copy hint bar */
.tap-hint{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--teal);color:var(--paper);border-radius:10px;font-size:13px;line-height:1.4}
.tap-hint svg{flex-shrink:0;opacity:.9}
.tap-hint strong{font-weight:600}
@media(min-width:640px){.tap-hint{font-size:14px;padding:12px 16px}}

/* Quick search results container — shows inline above language picker when active */
#quick-search-results{margin-bottom:24px}
#quick-search-results[hidden]{display:none}

.section-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.section-head h2{font-family:'Fraunces',serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
@media(min-width:640px){.section-head h2{font-size:28px}}
.section-head .sub{color:var(--ink-soft);font-size:14px}

.lang-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:28px}
@media(min-width:640px){.lang-picker{gap:10px}}
.lang-btn{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--card);border:1px solid var(--rule);border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;transition:all .15s;min-height:44px}
.lang-btn:hover,.lang-btn:focus{border-color:var(--accent-soft);transform:translateY(-1px);box-shadow:var(--sh-sm);outline:none}
.lang-btn.active{border-color:var(--accent);background:var(--accent);color:var(--paper);box-shadow:var(--sh-sm)}
.lang-btn .flag{font-size:20px;line-height:1}
.lang-btn .count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6}

.base-group{margin-bottom:24px;background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.base-header{display:flex;align-items:center;gap:16px;padding:12px 18px;background:linear-gradient(180deg,var(--paper-dark),transparent);border-bottom:1px solid var(--rule-soft)}
.base-letter{font-family:'Fraunces',serif;font-size:32px;font-weight:600;line-height:1;letter-spacing:-.02em;color:var(--accent);min-width:36px}
.base-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.base-label strong{color:var(--ink-soft);font-weight:600}

.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1px;background:var(--rule-soft)}
@media(min-width:480px){.char-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
.char-card{background:var(--card);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;position:relative;transition:background .15s,transform .1s;user-select:none;-webkit-tap-highlight-color:transparent;min-height:90px}
.char-card:hover{background:var(--paper-dark)}
.char-card:active{transform:scale(.98);background:var(--accent-ghost)}
.char-card .glyph{font-family:'Fraunces',serif;font-size:34px;font-weight:400;line-height:1;color:var(--ink)}
.char-card .alt-code{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--accent);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-top:2px}
.char-card .alt-code::before{content:'ALT+';color:var(--ink-faint);font-weight:500}
.char-card .alt-code[data-unicode="1"]::before{content:''}
.char-card .lang-flags{font-size:13px;letter-spacing:.08em;margin-top:3px;line-height:1}
.char-card .case-tag{position:absolute;top:6px;right:6px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);padding:2px 5px;background:var(--paper-dark);border-radius:3px}
.char-card.copied{background:#2d5f5d18}
.char-card .copy-feedback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--teal);color:var(--paper);font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .18s;border-radius:inherit}
.char-card.copied .copy-feedback{opacity:1}
.char-card .copy-feedback::before{content:'✓ ';margin-right:4px}

.search-results-meta{color:var(--ink-soft);font-size:14px;margin-bottom:14px;text-align:center}
.search-results-meta strong{color:var(--ink);font-family:'Fraunces',serif;font-size:18px}

.chart-builder-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.chart-builder-grid{grid-template-columns:340px 1fr;gap:24px}}
.chart-controls{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:18px}
/* On wide screens, make the sidebar sticky only when it fits — no forced scrollbars */
@media(min-width:900px){
  .chart-controls{position:sticky;top:82px;align-self:start}
}
/* If the sidebar ever exceeds viewport, scroll the whole page not the sidebar */
.chart-controls::-webkit-scrollbar{display:none}
.chart-controls{scrollbar-width:none}
.control-group{margin-bottom:18px}
.control-group:last-child{margin-bottom:0}
.control-group h3{font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--rule-soft);display:flex;align-items:center;justify-content:space-between}
.control-group h3 .hint{font-size:10px;letter-spacing:.05em;color:var(--ink-faint);font-weight:500;text-transform:none;font-style:italic}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:520px){.check-grid{grid-template-columns:1fr}}
.check-row{display:flex;align-items:center;gap:10px;padding:8px 4px;cursor:pointer;font-size:13px;user-select:none;min-height:36px;-webkit-tap-highlight-color:transparent}
.check-row:hover{color:var(--accent)}
.check-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--rule);border-radius:4px;background:var(--paper);cursor:pointer;position:relative;transition:all .15s;flex-shrink:0}
.check-row input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.check-row input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check-row .flag{font-size:16px}
.check-row .count{margin-left:auto;color:var(--ink-faint);font-family:'JetBrains Mono',monospace;font-size:11px}

.dim-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dim-field{display:flex;flex-direction:column;gap:4px}
.dim-field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint)}
.dim-field select,.dim-field input{padding:8px 10px;font-family:inherit;font-size:13px;background:var(--paper);border:1px solid var(--rule);border-radius:6px;color:var(--ink);outline:none;transition:border-color .15s}
.dim-field select:focus,.dim-field input:focus{border-color:var(--accent)}
.dim-field.full{grid-column:1/-1}

.block-list{display:flex;flex-direction:column;gap:8px;min-height:40px;padding:2px}
.block-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;cursor:grab;font-size:13px;transition:border-color .15s,transform .1s,box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:none}
.block-card:hover{border-color:var(--accent-soft)}
.block-card:active{cursor:grabbing}
.block-card.sortable-chosen{border-color:var(--accent);box-shadow:var(--sh-md);background:var(--card);transform:scale(1.02)}
.block-card.sortable-ghost{opacity:.3}
.block-card .grip{color:var(--ink-faint);font-size:18px;line-height:1;cursor:grab;user-select:none}
.block-card .grip::before{content:'⋮⋮';letter-spacing:-1px}
.block-card .block-flag{font-size:16px}
.block-card .block-name{font-weight:600;color:var(--ink)}
.block-card .block-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-faint);padding:2px 6px;background:var(--paper-dark);border-radius:10px}
.block-empty{padding:20px;text-align:center;color:var(--ink-faint);font-size:12px;border:1px dashed var(--rule);border-radius:8px;font-style:italic}

.download-btn{width:100%;display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;margin-bottom:8px;transition:all .15s;min-height:44px;-webkit-tap-highlight-color:transparent}
.download-btn:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.download-btn svg{flex-shrink:0}
.download-btn .ext{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 5px;background:var(--accent);color:var(--paper);border-radius:3px;font-weight:700;letter-spacing:.05em}
.download-btn:hover .ext{background:var(--paper);color:var(--accent)}

.chart-preview-wrap{overflow:auto}
.chart-preview-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--ink-faint)}
#chart-preview{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:24px;font-family:'Inter Tight',sans-serif;color:#111;min-height:400px;box-shadow:var(--sh-sm)}
#chart-preview .chart-title{font-family:'Fraunces',serif;font-size:22px;font-weight:600;text-align:center;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:14px;letter-spacing:-.01em}
#chart-preview .chart-sub{text-align:center;font-size:11px;color:#555;margin-bottom:18px;text-transform:uppercase;letter-spacing:.12em}
#chart-preview .chart-block{margin-bottom:18px;page-break-inside:avoid}
#chart-preview .chart-block-title{font-family:'Fraunces',serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#8b2b1f;padding-bottom:4px;margin-bottom:8px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:baseline}
#chart-preview .chart-block-title .flag{font-size:14px}
#chart-preview .chart-row{display:grid;gap:3px}
#chart-preview .chart-cell{padding:5px 3px;text-align:center;border:1px solid #ddd;border-radius:4px;background:#fafafa}
#chart-preview .chart-cell .g{font-family:'Fraunces',serif;font-size:18px;font-weight:500;line-height:1;display:block}
#chart-preview .chart-cell .c{font-family:'JetBrains Mono',monospace;font-size:11px;color:#8b2b1f;margin-top:3px;display:block;font-weight:700}
#chart-preview .chart-footer{margin-top:18px;padding-top:10px;border-top:1px solid #ddd;font-size:9px;color:#666;display:flex;justify-content:space-between}

.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:28px}
@media(min-width:640px){.how-grid{gap:20px}}
.how-card{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:22px}
.how-card h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.how-card ol{padding-left:18px;color:var(--ink-soft)}
.how-card li{margin-bottom:6px;line-height:1.55;font-size:14px}

.video-section{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:22px;margin-bottom:28px}
.video-section h3{font-family:'Fraunces',serif;font-size:22px;margin-bottom:10px}
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px;margin-top:16px}
.video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--rule);padding:16px 0}
.faq-q{font-family:'Fraunces',serif;font-size:17px;font-weight:500;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--ink)}
@media(min-width:640px){.faq-q{font-size:18px}}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';font-family:'Inter Tight',sans-serif;font-size:20px;color:var(--accent);transition:transform .2s;flex-shrink:0}
.faq-item[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{color:var(--ink-soft);margin-top:10px;line-height:1.6;font-size:15px}

/* Footer (unified across all pages) */
footer{margin-top:60px;padding:32px 0 40px;border-top:1px solid var(--rule);background:var(--card)}
.footer-inner{text-align:center;color:var(--ink-soft);font-size:14px}
.footer-tag{margin:0 0 16px;color:var(--ink)}
.footer-links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:0 0 18px}
.footer-links a{color:var(--accent);text-decoration:none;font-weight:500;font-size:14px}
.footer-links a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-fine{color:var(--ink-faint);font-size:12px;margin:0;max-width:640px;margin:0 auto;line-height:1.5}
@media(max-width:480px){.footer-links{gap:14px 18px;font-size:13px}}

.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:10px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:all .25s;z-index:100;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:6px;max-width:calc(100% - 40px)}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.toast .big{font-family:'Fraunces',serif;font-size:20px}

@media print{body{background:#fff}header,.tabs,.ad-container,footer,.toast,.hero,.section-head{display:none!important}.panel{display:block!important}#chart-preview{border:none;box-shadow:none}}


/* ═══ Subpage-specific styles (breadcrumbs, facts, notes, FAQ, cross-links) ═══ */

.crumbs{font-size:13px;color:var(--ink-soft);margin:12px 0 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--ink-faint)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}

.subpage-hero{max-width:740px;margin-bottom:36px}
.subpage-hero .eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:14px;text-transform:uppercase}
.subpage-hero .eyebrow .rule{width:36px;height:2px;background:var(--accent)}
.hero-h1{font-family:'Fraunces',serif;font-size:clamp(32px,6vw,52px);line-height:1.05;font-weight:500;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
.hero-tagline{font-family:'Fraunces',serif;font-size:clamp(17px,2.4vw,21px);font-style:italic;font-weight:400;color:var(--ink-soft);margin:0 0 20px;line-height:1.35}
.hero-tagline em{color:var(--accent);font-style:italic;font-weight:500}
.hero-intro{font-size:16px;line-height:1.6;color:var(--ink-soft)}
.hero-intro p{margin:0 0 14px}
.hero-intro strong{color:var(--ink)}
.hero-intro em{color:var(--accent);font-style:italic;font-weight:500}

/* Facts block */
.facts-block{margin:40px 0;padding:24px;background:var(--card);border:1px solid var(--rule);border-radius:14px}
.facts-block h2{font-family:'Fraunces',serif;font-size:22px;font-weight:500;margin:0 0 18px;color:var(--ink)}
.facts-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
@media(min-width:640px){.facts-grid{grid-template-columns:1fr 1fr}}
.fact{margin:0;padding:12px 14px;background:var(--paper);border:1px solid var(--rule-soft);border-radius:10px}
.fact dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin-bottom:4px}
.fact dd{font-size:14px;color:var(--ink);margin:0;line-height:1.4}

/* Long notes block */
.notes-block{margin:40px 0;max-width:740px}
.notes-block h2{font-family:'Fraunces',serif;font-size:26px;font-weight:500;margin:0 0 18px;color:var(--ink)}
.notes-prose{font-size:16px;line-height:1.65;color:var(--ink-soft)}
.notes-prose p{margin:0 0 16px}
.notes-prose strong{color:var(--ink);font-weight:600}
.notes-prose em{color:var(--accent);font-style:italic}
.notes-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* FAQ (native <details>) */
.faq-block{margin:40px 0;max-width:740px}
.faq-block h2{font-family:'Fraunces',serif;font-size:26px;font-weight:500;margin:0 0 18px;color:var(--ink)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden;transition:border-color .15s}
.faq-item[open]{border-color:var(--accent-ghost)}
.faq-q{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15px;color:var(--ink);list-style:none;position:relative;padding-right:44px;line-height:1.4}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--accent);font-weight:400;transition:transform .2s}
.faq-item[open] .faq-q::after{content:'−'}
.faq-a{padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--ink-soft)}
.faq-a strong{color:var(--ink);font-weight:600}
.faq-a em{color:var(--accent);font-style:italic}
.faq-a kbd{background:var(--paper-dark);border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);font-weight:600}

/* Cross-links */
.cross-links-block{margin:40px 0 24px;padding:24px;background:var(--card);border:1px solid var(--rule);border-radius:14px}
.cross-links-block h2{font-family:'Fraunces',serif;font-size:22px;font-weight:500;margin:0 0 14px;color:var(--ink)}
.cross-group-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:14px 0 10px;padding-top:10px;border-top:1px solid var(--rule-soft)}
.cross-group-label:first-of-type{margin-top:0;padding-top:0;border:0}
.cross-links{display:flex;flex-wrap:wrap;gap:8px}
.cross-link{display:inline-flex;align-items:center;padding:8px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:20px;font-size:13px;color:var(--ink);text-decoration:none;transition:all .15s}
.cross-link:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}

/* Homepage "Browse all" internal-linking section */
.browse-block{margin:40px 0;padding:24px;background:var(--card);border:1px solid var(--rule);border-radius:14px}
.browse-block h2{font-family:'Fraunces',serif;font-size:24px;font-weight:500;margin:0 0 8px;color:var(--ink)}
.browse-block .browse-sub{color:var(--ink-soft);margin:0 0 18px;font-size:14px}
.browse-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.browse-grid{grid-template-columns:1fr 1fr}}
.browse-col h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:600;margin:0 0 10px}
.browse-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.browse-col li a{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--paper);border:1px solid var(--rule-soft);border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px;transition:all .15s}
.browse-col li a:hover{border-color:var(--accent);transform:translateX(2px)}
.browse-col .flag{font-size:16px}
.browse-col .count{margin-left:auto;color:var(--ink-faint);font-size:12px}

/* Site footer (legacy .site-footer rules removed — unified footer CSS is above) */