/* Reuse converter design tokens and theme for all editorial pages. */
.editorial-skip { position: absolute; top: 8px; left: 16px; z-index: 10; padding: 10px 14px; border-radius: 8px; color: var(--card); background: var(--ink); transform: translateY(-160%); }
.editorial-skip:focus { transform: translateY(0); }
.editorial-main { padding: 26px 0 54px; }
.editorial-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.editorial-breadcrumb a:hover { text-decoration: underline; }
.editorial-hero { padding: 35px 0 38px; max-width: 850px; }
.editorial-hero h1 { font-size: clamp(32px, 4.5vw, 50px); line-height: 1.12; max-width: 820px; }
.editorial-lede { max-width: 750px; color: var(--muted); font-size: 17px; line-height: 1.75; margin-bottom: 0; }
.editorial-date { font-size: 12px; line-height: 1.6; margin: 20px 0 0; color: var(--muted); }
.editorial-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 42px; align-items: start; }
.editorial-toc { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); position: sticky; top: 24px; }
.editorial-toc > p { color: var(--ink); font-size: 12px; font-weight: 750; margin-bottom: 12px; }
.editorial-toc ol { padding-left: 18px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.editorial-toc li + li { margin-top: 11px; }
.editorial-toc a:hover { color: var(--mint-dark); text-decoration: underline; }
.editorial-content { min-width: 0; max-width: 775px; }
.editorial-section { padding: 0 0 32px; scroll-margin-top: 24px; }
.editorial-section + .editorial-section { border-top: 1px solid var(--line); padding-top: 28px; }
.editorial-section h2, .editorial-contact h2, .editorial-hub-notes h2 { font-size: 25px; line-height: 1.25; margin-bottom: 17px; }
.editorial-section h3 { font-size: 18px; line-height: 1.4; margin-bottom: 12px; }
.editorial-section p, .editorial-section li, .editorial-contact p, .editorial-contact li, .editorial-hub-notes p { color: var(--muted); font-size: 15px; line-height: 1.85; }
.editorial-section p:last-child { margin-bottom: 0; }
.editorial-section a, .editorial-contact a, .editorial-related a, .editorial-hub-notes a, .editorial-all a, .editorial-context a { color: var(--mint-dark); text-decoration: underline; text-underline-offset: 3px; }
.editorial-section ul, .editorial-contact ul { padding-left: 22px; }
.editorial-section li + li, .editorial-contact li + li { margin-top: 9px; }
.worked-example { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.worked-example .conversion-formula { margin: 14px 0 20px; }
.editorial-note { margin-top: 22px; padding: 18px 20px; border-left: 3px solid var(--mint-dark); border-radius: 0 10px 10px 0; background: var(--result); color: var(--muted); font-size: 13px; line-height: 1.8; }
.editorial-table-wrap { overflow-x: auto; margin: 20px 0; }
.editorial-table-wrap table { width: 100%; min-width: 350px; }
.editorial-table-wrap tbody th { text-align: left; font-weight: 600; border-top: 1px solid var(--line); background: var(--card); }
.editorial-table-wrap caption { text-align: left; font-weight: 600; color: var(--ink); }
.editorial-section .editorial-source { font-size: 12px; }
.editorial-figure { margin: 22px 0; border: 1px solid var(--line); border-radius: 15px; background: var(--card); overflow: hidden; }
.editorial-figure svg { display: block; width: 100%; height: auto; }
.editorial-shape { fill: var(--mint); stroke: var(--mint-dark); stroke-width: 2; }
.editorial-cutout { fill: var(--paper); stroke: var(--muted); stroke-width: 2; stroke-dasharray: 7 5; }
.editorial-dimension { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.editorial-svg-text { fill: var(--ink); font: 19px var(--font); }
.editorial-figure figcaption { padding: 13px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.editorial-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.editorial-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.editorial-card:hover { border-color: var(--mint-dark); }
.editorial-card-kicker { color: var(--mint-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.editorial-card h2 { font-size: 25px; line-height: 1.2; margin-bottom: 13px; }
.editorial-card p { font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 20px; }
.editorial-card-action { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--mint-dark); }
.editorial-home .editorial-card h2 { font-size: 23px; }
.editorial-all { font-size: 13px; margin: 22px 0 0; }
.editorial-hub-notes { max-width: 780px; margin: 38px 0 0; padding-top: 30px; border-top: 1px solid var(--line); }
.editorial-related { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); font-size: 14px; line-height: 1.7; }
.editorial-related > span { font-size: 11px; color: var(--muted); }
.editorial-method p { font-size: 13px; }
.editorial-contact { max-width: 790px; }
.editorial-contact section { padding: 0 0 26px; }
.editorial-contact section + section { padding-top: 26px; border-top: 1px solid var(--line); }
.editorial-email { overflow-wrap: anywhere; font-size: clamp(17px, 3vw, 25px); font-weight: 650; }
.editorial-context { width: min(100%, 850px); margin: 0 auto 32px; padding: 20px 23px; border: 1px solid var(--line); border-radius: 14px; background: var(--result); }
.editorial-context p { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 7px; }
.editorial-context a { font-size: 14px; line-height: 1.7; }
@media (max-width: 900px) { .editorial-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; } .editorial-toc { position: static; } .editorial-toc ol { columns: 2; column-gap: 30px; } .editorial-toc li { break-inside: avoid; } .editorial-content { max-width: none; } }
@media (max-width: 600px) { .editorial-main { padding-top: 18px; } .editorial-hero { padding: 28px 0; } .editorial-lede { font-size: 15px; } .editorial-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; } .editorial-card { padding: 22px; } .editorial-card h2 { font-size: 24px; } .editorial-toc ol { columns: auto; } .editorial-section h2 { font-size: 23px; } .editorial-section p, .editorial-section li, .editorial-contact p, .editorial-contact li { font-size: 14px; } .worked-example { padding: 17px; } .editorial-table-wrap table { font-size: 12px; } .editorial-figure figcaption { font-size: 11px; } .editorial-home .editorial-card h2 { font-size: 23px; } }

@media (min-width: 601px) and (max-width: 760px) { .topbar { height: auto; min-height: 84px; flex-wrap: wrap; gap: 8px 16px; padding-block: 14px 8px; } .header-actions { margin-left: auto; } .nav-links { order: 3; width: 100%; flex-wrap: wrap; gap: 6px 20px; } .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px; } }