/* Shared notebook surfaces and type. Keep layout and interactions in the component styles. */
@font-face {
  font-family: Notebook Lora;
  src: url("../fonts/Lora-Italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
body.bth-design {
  --paper: #faf1de;
  --sheet: #fffaf0;
  --ink: #1c2950;
  --pencil: #505467;
  --rule: #c8bca6;
  --tab: #ffad50;
  --marker: #f8c47c;
  --gutter: clamp(12px, 2.4vw, 32px);
  --binding: 24px;
  --pad: clamp(12px, 1.4vw, 20px);
  --hand: "Notebook Lora", Georgia, serif;
  --bth-ink: var(--ink);
  --bth-blue: #283e72;
  --bth-muted: var(--pencil);
  --bth-line: var(--rule);
  --bth-bg: var(--sheet);
  --bth-color-primary: var(--bth-blue);
  --bth-color-text: var(--ink);
  --bth-color-muted: var(--pencil);
  --bth-color-border: var(--rule);
  color: var(--ink);
  padding-inline-start: var(--binding);
  background-color: var(--paper);
  background-image: linear-gradient(90deg,#98774911 1px,transparent 1px),linear-gradient(#98774911 1px,transparent 1px),radial-gradient(ellipse at 70% 0,#fffaed,transparent 75%);
  background-size: 16px 16px,16px 16px,100% 100vh;
}
body.bth-design::before {
  content:""; pointer-events:none; position:fixed; inset:0 auto 0 0; width:var(--binding); z-index:3;
  background: url("../images/notebook-ring.svg") left 4px / 100% 48px repeat-y;
}
.bth-design :is(h1,h2,h3,.bth-brand-name) {font-family:Georgia,"Times New Roman",serif;color:var(--ink);font-weight:700;letter-spacing:-.025em}
.bth-design .bth-site-header,.bth-design .bth-site-footer {background:#fff8e9c9;border-color:var(--rule)}
.bth-design .bth-header-inner,.bth-design .bth-footer-inner,.bth-design .bth-site-content {max-width:1500px;padding-inline:var(--gutter)}
.bth-design .bth-header-inner {padding-block:7px;gap:14px}
.bth-design .bth-site-content {padding-block:14px 32px}
.bth-design .bth-brand {gap:9px}
.bth-design .bth-brand-mark {width:49px;height:49px}
.bth-design .bth-brand-name {font-size:clamp(18px,2vw,26px);line-height:1.15;color:var(--ink)!important}
.bth-design .bth-brand-name span {font:12px/1.45 Arial,sans-serif;color:var(--pencil)}
.bth-design .bth-primary-menu a {border-radius:5px;color:var(--ink);font-weight:600}
.bth-design .bth-primary-menu :is(a:hover,a[aria-current="page"],.current-menu-item>a),.bth-design .bth-menu-toggle {background:var(--tab);color:var(--ink)}
.bth-design .bth-primary-menu .sub-menu {background:var(--sheet);border-color:var(--rule)}
.bth-design .notebook-title {position:relative;isolation:isolate;text-align:center;padding:8px min(15%,180px) 16px}
.notebook-title::before,.notebook-title::after {content:"";position:absolute;z-index:-1;inset-block:0;width:min(16%,195px);background:center/contain no-repeat;pointer-events:none}
.notebook-title::before {left:1%;background-image:url("../images/notebook-magnet.svg")}
.notebook-title::after {right:0;background-image:url("../images/notebook-glass.svg")}
.bth-design .notebook-title h1 {display:inline-block;position:relative;font:italic 700 clamp(32px,4.5vw,66px)/1.2 var(--hand);margin:0 0 9px;text-wrap:balance}
.notebook-title h1::after {content:"";position:absolute;left:39%;right:2%;bottom:0;height:4px;background:#e58c31;border-radius:70% 20%;transform:rotate(-1deg)}
.bth-design .notebook-title p {margin:0;font-size:clamp(14px,1.25vw,18px);color:var(--pencil)}
.bth-design .bth-periodic-wrap {grid-template-columns:minmax(0,1fr) clamp(240px,23%,335px);gap:var(--pad);margin:0 0 16px}
.bth-table-side {display:flex;flex-direction:column}
.bth-design .bth-periodic-head {display:flex;border:1px solid var(--ink);border-radius:24px;background:var(--sheet);padding:3px;margin:0 auto 6px;width:min(100%,640px)}
.bth-design .bth-periodic-search {background:transparent;border:0;flex:1;min-width:0;padding:4px 10px}
.bth-design .notebook-search-submit {background:var(--tab);border:0;border-radius:20px;color:var(--ink);font-weight:700;padding:7px 16px;white-space:nowrap}
.bth-design .bth-periodic-filters {order:2;gap:3px;border:1px solid var(--rule);border-radius:8px;background:#fff9ecb8;padding:4px;margin-top:4px}
.bth-design .bth-periodic-note {order:3;font-size:12px;color:var(--pencil)}
.bth-design .bth-filter-btn {color:var(--ink);font-size:11px}
.bth-design .bth-filter-btn.is-active {background:#ffe1ad;color:var(--ink)}
.bth-design .bth-periodic-grid {min-width:660px;grid-template-rows:repeat(9,clamp(54px,3.6vw,60px));gap:2px}
.bth-design .bth-periodic-wrap a.bth-element {border:1px solid color-mix(in srgb,var(--tile-bg) 65%,#554629);border-radius:4px;color:var(--ink);background:linear-gradient(150deg,#ffffff38,transparent),var(--tile-bg);padding:6px 1px 2px}
.bth-design .bth-symbol {font:700 clamp(18px,1.55vw,25px)/1 Georgia,serif}
.bth-design .bth-element.is-selected {outline:3px solid #d9741a;outline-offset:-2px}
.bth-design .bth-element-detail {border:1px solid var(--rule);border-radius:12px 18px 12px 7px;background:var(--sheet);padding:var(--pad);box-shadow:3px 3px 0 #d8c8ab}
.bth-design .bth-detail-top {gap:10px;justify-content:flex-start}
.bth-design .bth-detail-tile {display:grid;justify-items:center;border-radius:7px;padding:6px 12px;background:var(--tile-bg);color:var(--ink)}
.bth-detail-tile strong {font:700 32px/1 Georgia,serif}
.bth-design .bth-detail-top :is(h2,h3) {font-size:26px;margin:0}
.bth-design .bth-detail-facts {margin:10px 0;gap:6px}
.bth-design .bth-detail-facts>div {border-bottom:1px solid var(--rule);padding:4px 0}
.bth-design .bth-atom-stage {background:transparent}
.bth-design .bth-atom-viewer {margin:6px auto;max-width:280px}
.bth-design :is(.bth-ui-button,.bth-detail-link,.bp-primary,.bth-lr-button,.bth-post-card__more) {background:var(--tab);color:var(--ink)!important;border-radius:7px;border:1px solid #b47832;font-weight:700;box-shadow:none}
.bth-design :is(.bth-ui-button:hover,.bth-detail-link:hover,.bp-primary:hover) {background:#ffc378}
.bth-design :is(.bth-ui-card,.bth-ed-card,.bth-type-card,.bth-lr-card,.bth-ed-search-card,.bth-lr-filters,.bth-learn-grid>a,.bp-model,.bp-index nav,.bp-related-card,.bp-config-card,.bp-facts,.bth-lookup-result,.bth-content-feedback,.bth-author-box-inner) {background:var(--sheet);border:1px solid var(--rule);border-radius:10px;box-shadow:0 2px 0 #cbbb9b45}
.bth-design :is(.bth-ed-hero,.bth-type-hero,.bth-lr-hero,.bth-single__header) {padding-block:var(--pad);border-color:var(--rule)}
.bth-design :is(.bth-ed-card,.bth-type-card,.bth-lr-card-body,.bth-post-card__body,.bth-learn-grid>a,.bth-ed-search-card) {padding:var(--pad)}
.bth-design :is(.bth-ed-grid,.bth-type-grid,.bth-post-grid,.bth-lr-grid,.bth-learn-grid) {gap:12px}
.bth-design :is(.bth-editorial,.bth-reading,.bp-reading) {color:var(--ink);overflow-wrap:break-word}
.bth-design :is(.bth-editorial,.bth-reading) {background:var(--sheet);border:1px solid var(--rule);padding:clamp(14px,2.4vw,32px);border-radius:10px}
.bth-design :is(.bth-editorial,.bth-reading,.bp-reading) p {color:#343c50;line-height:1.75}
.bth-design :is(.bth-editorial,.bth-reading,.bp-reading) h2 {font:italic 700 clamp(22px,2.4vw,32px)/1.35 var(--hand);text-decoration:underline;text-decoration-color:var(--marker);text-decoration-thickness:.19em;text-underline-offset:.08em}
.bth-design .bth-editorial>:first-child {margin-top:0}
.bth-design :is(th,blockquote,pre,.bth-ui-notice,.bp-secondary,.bth-ui-badge,.bth-submenu-toggle) {background:#f6ead3;color:var(--ink)}
.bth-design :is(input[type="search"],input[type="text"],textarea,select) {color:var(--ink);border-color:var(--rule)}
.bth-design :is(.bth-footer-menu a,.bth-ed-hero p,.bth-type-hero p,.bth-lr-hero p,.bp-intro,.bp-english,.bp-breadcrumb a) {color:var(--pencil)}
.bth-design .bth-profile {--bp-text:var(--ink);--bp-blue:#324e83;--bp-line:var(--rule);--bp-muted:var(--pencil)}
.bth-design .bp-hero {gap:var(--pad);padding-bottom:var(--pad)}
.bth-design .bp-title {font:italic 700 clamp(36px,4vw,58px)/1.12 var(--hand);color:var(--ink)}
.bth-design .bp-title-row,.bth-design .bp-eyebrow {margin-bottom:12px}
/* Keep atomic number, symbol and mass in separate rows at every text size. */
.bth-design .bp-symbol-tile {display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:center;gap:6px;flex:0 0 auto;width:max-content;min-width:92px;height:auto;min-height:116px;padding:10px 12px;box-shadow:none;border:1px solid var(--rule)}
.bth-design .bp-symbol-tile small {position:static;justify-self:start;font-size:12px;line-height:1.2}
.bth-design .bp-symbol-tile strong {font-size:48px;line-height:1;letter-spacing:0}
.bth-design .bp-symbol-tile>span {margin:0;font-size:12px;line-height:1.4;white-space:nowrap;font-variant-numeric:tabular-nums}
.bth-design .bp-title-row {gap:clamp(12px,2vw,24px);align-items:center}
.bth-design .bp-title-row>div:last-child {min-width:0}
.bth-design .bp-title {overflow-wrap:anywhere}
.bth-design .bp-english {overflow-wrap:anywhere}
@media(max-width:480px) {
 .bth-design .bp-symbol-tile {min-width:80px;min-height:104px;padding:8px;gap:5px}
 .bth-design .bp-symbol-tile strong {font-size:40px}
 .bth-design .bp-title {font-size:clamp(28px,8vw,38px);letter-spacing:-.8px}
}
.bth-design .bp-reading-layout {gap:var(--pad)}
.bth-design .bp-model {padding:var(--pad)}
.bth-design .bth-learning-section {margin-top:16px;padding-top:16px}
.bth-design .bth-footer-inner {padding-block:20px 12px;gap:16px}
.bth-design .bth-footer-logo {width:48px;height:48px}
.bth-design :focus-visible {outline-color:#985018}
@media (max-width:1050px) {
  body.bth-design {--binding:14px}
  .bth-design .bth-periodic-wrap {grid-template-columns:minmax(0,1fr)}
  .bth-design .bth-element-detail {position:static;display:grid;grid-template-columns:1fr minmax(180px,240px) 1fr;gap:10px;align-items:center}
  .bth-element-detail .bth-detail-link {grid-column:1/-1;justify-self:center}
}
@media (max-width:760px) {
  body.bth-design {--binding:0px;--gutter:12px}
  .bth-design .bth-header-inner {padding-block:6px}
  .bth-design .bth-brand-mark {width:40px;height:40px}
  .bth-design .notebook-title {padding:9px 0 13px}
  .notebook-title::before,.notebook-title::after {display:none}
  .bth-design .bth-element-detail {display:block}
  .bth-design .bth-periodic-grid {min-width:708px;grid-template-rows:repeat(9,47px)}
  .bth-design .bth-periodic-filters {flex-wrap:wrap}
  .bth-design .bth-filter-btn {min-height:36px}
  .bth-design .bth-periodic-note {margin-block:5px!important}
  .bth-design .bth-detail-facts {grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}
  .bth-design .bth-profile .bp-hero {grid-template-columns:minmax(0,1fr)}
  .bth-design .bth-profile .bp-intro {margin-bottom:12px}
  .bth-design .bp-reading-layout,.bth-design .bth-ed-hero-grid {grid-template-columns:minmax(0,1fr)}
  .bth-design .bth-editorial,.bth-design .bth-reading-width {margin:14px auto}
  .bth-design .bth-menu-toggle {min-height:44px}
}
@media (max-width:370px) {
  body.bth-design {--gutter:8px}
  .bth-design .bth-brand-name {font-size:17px}
  .bth-design .notebook-search-submit {padding-inline:9px}
}

.bth-design :is(.bth-cat-alkali,.bth-ed-type-alkali,.bth-el-alkali) {--tile-bg:#f7bcb3;--tile-ink:#263553}
.bth-design :is(.bth-cat-alkaline,.bth-ed-type-alkaline,.bth-el-alkaline) {--tile-bg:#ffd79f;--tile-ink:#263553}
.bth-design :is(.bth-cat-transition,.bth-ed-type-transition,.bth-el-transition) {--tile-bg:#badbf1;--tile-ink:#263553}
.bth-design :is(.bth-cat-group12,.bth-ed-type-group12,.bth-el-group12) {--tile-bg:#cbd6f1;--tile-ink:#263553}
.bth-design :is(.bth-cat-post-transition,.bth-ed-type-post-transition,.bth-el-post-transition) {--tile-bg:#c6e2bf;--tile-ink:#263553}
.bth-design :is(.bth-cat-metalloid,.bth-ed-type-metalloid,.bth-el-metalloid) {--tile-bg:#ffe49a;--tile-ink:#263553}
.bth-design :is(.bth-cat-nonmetal,.bth-ed-type-nonmetal,.bth-el-nonmetal) {--tile-bg:#c9dfa7;--tile-ink:#263553}
.bth-design :is(.bth-cat-halogen,.bth-ed-type-halogen,.bth-el-halogen) {--tile-bg:#aee0d2;--tile-ink:#263553}
.bth-design :is(.bth-cat-noble,.bth-ed-type-noble,.bth-el-noble) {--tile-bg:#d1bced;--tile-ink:#263553}
.bth-design :is(.bth-cat-lanthanide,.bth-ed-type-lanthanide,.bth-el-lanthanide) {--tile-bg:#d6c8f0;--tile-ink:#263553}
.bth-design :is(.bth-cat-actinide,.bth-ed-type-actinide,.bth-el-actinide) {--tile-bg:#edc9df;--tile-ink:#263553}
.bth-design .bth-filter-color {background:var(--tile-bg,#d6c8af);border:1px solid #7f7769;width:12px;height:12px;border-radius:3px}
.bth-design .bth-periodic-grid {
  grid-template-columns:16px repeat(18,minmax(0,1fr));
  grid-template-rows:18px repeat(9,clamp(54px,3.6vw,60px));
}
.notebook-axis {align-self:center;text-align:center;font:600 11px/1 Arial,sans-serif;color:var(--pencil)}
@media (max-width:760px) {
  .bth-design .bth-periodic-grid {grid-template-rows:18px repeat(9,54px)}
}

/* Archives share a predictable reading rhythm across long and short titles. */
.bth-design .bth-screen--listing > .bth-ui {max-width:1200px}
.bth-design .bth-post-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px}
.bth-design .bth-post-card {min-width:0;transition:box-shadow .15s}
.bth-design .bth-post-card:hover {box-shadow:0 4px 12px #392b1820}
.bth-design .bth-post-card__image {aspect-ratio:16/9;background:#f1e7d4;border-bottom:1px solid var(--rule)}
.bth-design .bth-post-card__image img {display:block;object-fit:contain}
.bth-design .bth-post-card__body {gap:10px;padding:14px}
.bth-design .bth-post-card__body h2 {font:700 20px/1.45 Georgia,serif}
.bth-design .bth-post-card__body h2 a {color:var(--ink)}
.bth-design .bth-post-card__body p {font-size:14px;line-height:1.65;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bth-design .bth-post-card__more {align-self:flex-start;padding:8px 12px;min-height:40px}
.bth-design .bth-ui-pagination {justify-content:center;gap:6px}
.bth-design .bth-ui-pagination .page-numbers {display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);font-size:14px}
.bth-design .bth-ui-pagination .current {background:var(--tab);font-weight:700}
.bth-design .bth-archive-description {color:var(--pencil);line-height:1.75}
@media(min-width:1051px) {
  .bth-design .bth-periodic-wrap {align-items:stretch}
  .bth-design .bth-element-detail {position:relative;top:auto;min-height:0;display:flex;flex-direction:column;gap:8px}
  .bth-design .bth-element-detail .bth-atom-viewer {max-width:220px;margin:auto}
  .bth-design .bth-element-detail .bth-detail-facts {margin:0}
  .bth-design .bth-element-detail .bth-detail-link {margin-top:auto;align-self:flex-start}
}
@media(max-width:900px) {
  .bth-design .bth-post-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {
  .bth-design .bth-post-grid {grid-template-columns:minmax(0,1fr);gap:12px}
}

.bth-home-explore {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.bth-home-explore>div,.bth-home-contents {padding:var(--pad);background:var(--sheet);border:1px solid var(--rule);border-radius:10px}
.bth-home-explore h2,.bth-home-contents h2 {font-size:24px}
.bth-cell-guide-layout {display:grid;grid-template-columns:100px 1fr;gap:16px;align-items:start}
.bth-example-cell {display:flex;flex-direction:column;align-items:center;padding:10px;background:#badbf1;border:1px solid #8a9eb1;border-radius:6px;color:var(--ink)}
.bth-example-cell>span {align-self:flex-start;font-size:13px}
.bth-example-cell>strong {font:700 42px/1.1 Georgia,serif}
.bth-example-cell>small {margin-top:8px}
.bth-cell-guide dl {margin:0 0 12px}
.bth-cell-guide dl>div {margin-bottom:10px}
.bth-cell-guide dt {font-weight:700;font-size:14px}
.bth-cell-guide dd {margin:3px 0 0;font-size:14px;line-height:1.65;color:var(--pencil)}
.bth-family-links {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.bth-family-links>a {display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--rule);border-left:5px solid var(--tile-bg);border-radius:6px;text-decoration:none;color:var(--ink)}
.bth-family-links>a:hover {background:var(--tile-bg)}
.bth-family-links span {font-size:13px;color:var(--pencil)}
.bth-home-contents {margin:20px 0}
.bth-home-contents ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px;list-style:none;margin:0;padding:0}
.bth-home-contents a {display:block;padding:8px 0;line-height:1.5;font-size:14px}
.bth-editorial h2[id] {scroll-margin-top:24px}
@media(max-width:900px) {
 .bth-home-explore {grid-template-columns:1fr}
 .bth-home-contents ul {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {
 .bth-home-contents ul {grid-template-columns:1fr}
 .bth-cell-guide-layout {grid-template-columns:78px 1fr;gap:10px}
 .bth-example-cell {padding:8px 4px}
 .bth-home-explore h2,.bth-home-contents h2 {font-size:22px}
 .bth-family-links a {min-height:70px}
}

/* The shared author component uses the public WordPress profile. */
.bth-design .bth-author-box-card {padding:20px;margin:28px 0;border:1px solid var(--rule);border-top:4px solid var(--marker);background:var(--sheet)}
.bth-design .bth-author-box-inner {padding:0;gap:18px;border:0;box-shadow:none;background:transparent;align-items:flex-start}
.bth-design .bth-author-box-content {min-width:0;flex:1}
.bth-design .bth-author-box-name {font-size:26px;margin:5px 0 10px}
.bth-design .bth-author-box-label {font-size:12px;color:var(--pencil)}
.bth-design .bth-author-box-bio {font-size:15px;line-height:1.75;color:var(--ink)}
.bth-design .bth-author-box-bio p {margin:0 0 10px}
.bth-design .bth-author-box-count {font-size:13px;color:var(--pencil);margin:8px 0 12px}
.bth-design .bth-author-box-avatar {flex:0 0 80px}
.bth-design .bth-author-box-avatar :is(img,.bth-author-box-initial) {width:80px;height:80px;border:2px solid var(--rule);object-fit:cover}
.bth-design .bth-author-recent {border-top:1px solid var(--rule);padding-top:16px;margin-top:16px}
.bth-design .bth-author-recent h4 {font-size:17px;color:var(--ink);margin:0 0 8px}
.bth-design .bth-author-recent ul {list-style:none;margin:0;padding:0}
.bth-design .bth-author-recent li+li {border-top:1px dashed var(--rule)}
.bth-design .bth-author-recent a {display:block;padding:9px 0;font-size:14px;line-height:1.6}
@media(max-width:560px) {
 .bth-design .bth-author-box-card {padding:14px}
 .bth-design .bth-author-box-inner {flex-wrap:wrap;gap:10px}
 .bth-design .bth-author-box-content {flex-basis:100%}
 .bth-design .bth-author-box-avatar {flex-basis:64px}
 .bth-design .bth-author-box-avatar :is(img,.bth-author-box-initial) {width:64px;height:64px}
}

/* Author biography and reading suggestions form one surface. */
.bth-design .bth-author-box-card {padding:24px;border-top:1px solid var(--rule);border-radius:12px}
.bth-design .bth-author-box-card .bth-author-box-inner {border:0;background:transparent;box-shadow:none;border-radius:0;padding:0;gap:20px}
.bth-design .bth-author-box-card .bth-author-box-name {margin:4px 0 12px;font-size:26px}
.bth-design .bth-author-box-card .bth-author-box-bio {max-width:66ch}
.bth-design .bth-author-box-card .bth-author-box-bio p {font-size:15px;line-height:1.7;margin:0 0 10px}
.bth-design .bth-author-box-card .bth-author-box-actions {margin-top:12px}
.bth-design .bth-author-box-card .bth-author-box-btn {padding:8px 14px;font-size:13px}
.bth-design .bth-author-recent {margin-top:22px;padding-top:18px}
.bth-design .bth-author-recent h4 {font:700 20px/1.4 Georgia,serif;margin-bottom:12px}
.bth-design .bth-author-recent ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bth-design .bth-author-recent li,.bth-design .bth-author-recent li+li {border:1px solid var(--rule);border-radius:8px;overflow:hidden;margin:0;min-width:0}
.bth-design .bth-author-recent li>a {display:flex;flex-direction:column;gap:10px;height:100%;padding:12px;text-decoration:none;color:var(--ink)}
.bth-design .bth-author-recent li>a:hover {background:#f6ead3}
.bth-design .bth-author-recent-image {display:block;aspect-ratio:16/9;background:#f1e7d4;border-radius:4px;overflow:hidden}
.bth-design .bth-author-recent-image img {width:100%;height:100%;object-fit:contain;display:block}
.bth-design .bth-author-recent-title {font-size:14px;font-weight:600;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.bth-design .bth-author-recent-read {margin-top:auto;font-size:12px;color:#785022}
@media(max-width:600px) {
 .bth-design .bth-author-box-card {padding:16px}
 .bth-design .bth-author-recent ul {grid-template-columns:1fr}
 .bth-design .bth-author-recent li>a {display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px}
 .bth-design .bth-author-recent li>a:has(.bth-author-recent-image) {grid-template-columns:88px minmax(0,1fr)}
 .bth-design .bth-author-recent-image {grid-row:1/3}
 .bth-design .bth-author-recent-title {font-size:14px;-webkit-line-clamp:3}
 .bth-design .bth-author-recent-read {margin:0}
}

/* Readable supporting text across lookup, articles and learning screens. */
.bth-design :is(.bth-ed-stats span,.bth-type-hero-stats span,.bth-lr-hero-meta span,
.bth-ed-meta,.bth-ed-mass,.bth-type-meta,.bth-type-mass,.bth-ed-count,
.bth-ed-grid-head p,.bth-type-grid-head p,.bth-mass-round,.bth-periodic-note,
.bth-detail-top p,.bth-detail-facts dt,.bth-detail-facts span,
.bp-eyebrow,.bp-english,.bp-english>span,.bp-intro,.bp-hero-tags,
.bp-model-heading,.bp-model-config,.bp-facts>div>span,.bp-facts small,
.bp-particles span,.bp-shells small,.bp-progress>span,.bp-related-card p,
.bth-ui-breadcrumb,.bp-breadcrumb,.bth-post-card__meta,.bth-ui-card__meta) {color:var(--pencil)}
.bth-design .bth-profile .bp-reading .bp-section p {color:var(--pencil)}
.bth-design .bp-facts strong {color:var(--ink)}
.bth-design :is(.bth-ed-quick button,.bth-ed-filters button,.bth-lr-filter-btn,.bth-lr-clear-search,.bth-ed-search-box button) {
 color:var(--ink);background:var(--sheet);border:1px solid var(--rule);border-radius:8px;font-size:13px;min-height:40px
}
.bth-design :is(.bth-ed-quick button,.bth-ed-filters button,.bth-lr-filter-btn):hover,
.bth-design :is(.bth-ed-filters,.bth-lr-filters) button.is-active {background:var(--marker);color:var(--ink);border-color:#98652d}
.bth-design :is(.bth-ed-stats,.bth-type-hero-stats) span {font-size:13px}
.bth-design :is(.bth-ed-mass,.bth-type-mass,.bth-ed-meta,.bth-type-meta) {font-size:13px;line-height:1.5}

/* Shared atom controls use the same paper, ink and orange selection as the theme. */
.bth-design .bth-atom-viewer {color:var(--pencil)}
.bth-design .bth-atom-viewer .bth-atom-controls {gap:6px;margin-top:8px}
.bth-design .bth-atom-viewer .bth-atom-controls button {
 color:var(--ink);background:var(--sheet);border:1px solid #a89678;border-radius:9px;
 min-width:32px;min-height:32px;padding:4px 8px;font:600 16px/1 Arial,sans-serif;box-shadow:0 1px 0 #c8bca650
}

.bth-design .bth-atom-viewer .bth-atom-controls button:not(:disabled):hover {background:var(--tab);color:var(--ink);border-color:#98652d}
.bth-design .bth-atom-viewer .bth-atom-controls button:disabled {opacity:1;color:#65615a;background:#eee7da;border-color:#bfb5a4;box-shadow:none}
.bth-design .bth-atom-viewer :is(.bth-atom-help,.bth-atom-caption) {color:var(--pencil);font-size:12px;line-height:1.6;margin-top:10px}
.bth-design .bth-atom-viewer :is(button,canvas):focus-visible {outline:3px solid #985018;outline-offset:3px}
.bth-design .bp-index nav {padding-top:8px}
.bth-design :is(.bth-detail-facts small,.bth-ed-breadcrumb-inner,.bth-type-breadcrumb,
.bth-el-fact>span,.bth-lr-card p,.bth-lr-tags span,.bth-ui-empty p,
.bth-archive-description,.bth-post-meta,.bth-content-meta) {color:var(--pencil)}

/* Each periodic tile reserves its own row for the atomic number. */
.bth-design .bth-periodic-wrap a.bth-element {
 display:grid;grid-template-rows:11px minmax(0,1fr) 12px;align-items:center;justify-items:center;
 padding:3px 3px 4px;gap:1px
}
.bth-design .bth-element .bth-atomic-number {position:static;justify-self:start;font:600 9px/11px Arial,sans-serif}
.bth-design .bth-element .bth-symbol {line-height:1}
.bth-design .bth-element .bth-name {width:100%;font:600 9px/12px Arial,sans-serif;text-align:center}
@media(max-width:767px) {
 .bth-design .bth-periodic-grid {min-width:1040px;grid-template-rows:18px repeat(9,68px);gap:3px}
 .bth-design .bth-periodic-wrap a.bth-element {grid-template-rows:12px minmax(0,1fr) 14px;padding:4px}
 .bth-design .bth-element .bth-atomic-number {font-size:10px;line-height:12px}
 .bth-design .bth-element .bth-symbol {font-size:25px}
 .bth-design .bth-element .bth-name {font-size:10px;line-height:14px}
}