:root{
  --biology:#336f59;--decision:#2a527f;--discovery:#48999c;--materials:#c8a32c;
  --execution:#be682e;--synthesis:#6d6497;--venture:#969e47;
  --field:#f7f5ef;--ink:#151b22;--rule:#b7b9b6;--shadow:0 16px 40px rgba(21,27,34,.12)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--field);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.site-header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(18px,4vw,64px);background:rgba(247,245,239,.95);border-bottom:1px solid rgba(21,27,34,.14);backdrop-filter:blur(14px)}
.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--biology);color:#fff;font-family:Georgia,serif}
.brand strong{font-family:Georgia,serif;font-size:20px;color:#164b39}
.brand small{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:9px}
.site-header nav{display:flex;gap:20px}.site-header nav a{color:inherit;text-decoration:none;font-size:14px}
.hero{min-height:70vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:40px;align-items:center;padding:clamp(58px,8vw,112px) clamp(20px,6vw,90px);border-bottom:1px solid var(--rule)}
.hero-copy{max-width:790px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:800;color:var(--biology)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;margin-top:0}
h1{font-size:clamp(48px,7vw,98px);line-height:.96;letter-spacing:-.045em;color:#173f33;margin-bottom:28px}
h2{font-size:clamp(34px,4.3vw,58px);line-height:1.04;color:#173f33}
h3{font-size:23px}
.lede{font-size:clamp(18px,2vw,25px);line-height:1.55;max-width:760px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}
.button{border:1px solid var(--biology);border-radius:999px;padding:12px 18px;background:transparent;color:var(--biology);text-decoration:none;font-weight:700;cursor:pointer}
.button.primary{background:var(--biology);color:#fff}.button.small{padding:10px 16px}
.hero-art{min-height:500px;background:url('assets/botanical-crystal.jpeg') center/contain no-repeat;mix-blend-mode:multiply}
.explorer-section,.lenses-section{padding:80px clamp(16px,4vw,62px)}
.section-heading{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:28px}.section-heading>p{max-width:620px;line-height:1.6}
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin-bottom:18px;padding:16px;border:1px solid var(--rule);background:rgba(255,255,255,.58);border-radius:18px}
.controls label{display:grid;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#40504a}
.controls select,.controls input{min-width:210px;border:1px solid #aab0ac;background:#fff;border-radius:10px;padding:11px;font:inherit;text-transform:none;letter-spacing:0}
.search-label{flex:1}.search-label input{width:100%}
.table-frame{overflow:auto;padding:18px;border:1px solid var(--rule);border-radius:22px;background:rgba(255,255,255,.72);box-shadow:var(--shadow)}
.periodic-table{display:grid;gap:6px;min-width:1120px}
.layout-standard{grid-template-columns:repeat(18,minmax(58px,1fr));grid-auto-rows:minmax(72px,auto)}
.layout-category{grid-template-columns:repeat(10,minmax(78px,1fr))}
.layout-period{grid-template-columns:repeat(18,minmax(58px,1fr))}
.layout-sequence{grid-template-columns:repeat(14,minmax(70px,1fr))}
.element{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:74px;padding:7px;border:1px solid rgba(21,27,34,.2);border-radius:9px;background:#fff;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.element:hover,.element:focus{transform:translateY(-3px);box-shadow:0 8px 20px rgba(21,27,34,.17);outline:2px solid var(--decision)}
.element .z{font-size:10px}.element .symbol{font:700 26px Georgia,serif}.element .name{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.element .weight{font-size:8px;color:#505b58}
.element.dimmed{opacity:.14}.element.matched{outline:3px solid var(--execution);z-index:2}
.element.alkali{background:#f5e0ce}.element.alkaline{background:#efe5b8}.element.transition{background:#dce7ec}.element.post{background:#d7e4dc}
.element.metalloid{background:#c9ded8}.element.nonmetal{background:#d8eadc}.element.halogen{background:#d6e5ef}.element.noble{background:#ddd9ed}.element.inner{background:#eadbd7}
.element.block-s{background:#d9ead3}.element.block-p{background:#d9eaf7}.element.block-d{background:#fff2cc}.element.block-f{background:#e4dfec}
.element.period-1{background:#e9f3ef}.element.period-2{background:#dcece8}.element.period-3{background:#d7e7ef}.element.period-4{background:#e2e7f1}.element.period-5{background:#ece5d7}.element.period-6{background:#f1dfcf}.element.period-7{background:#eadbd7}
.element.weight-known{background:#d9ead3}.element.weight-none{background:#e7e6e6}.element.neutral{background:#fff}
.legend{display:flex;gap:15px;flex-wrap:wrap;padding-top:16px;font-size:12px}.legend span{display:flex;align-items:center;gap:6px}
.swatch{width:13px;height:13px;border-radius:3px;border:1px solid #777}
.swatch.alkali{background:#f5e0ce}.swatch.alakaline,.swatch.alkaline{background:#efe5b8}.swatch.transition{background:#dce7ec}.swatch.post{background:#d7e4dc}
.swatch.metalloid{background:#c9ded8}.swatch.nonmetal{background:#d8eadc}.swatch.halogen{background:#d6e5ef}.swatch.noble{background:#ddd9ed}.swatch.inner{background:#eadbd7}
.swatch.block-s{background:#d9ead3}.swatch.block-p{background:#d9eaf7}.swatch.block-d{background:#fff2cc}.swatch.block-f{background:#e4dfec}
.swatch.period-1{background:#e9f3ef}.swatch.period-2{background:#dcece8}.swatch.period-3{background:#d7e7ef}.swatch.period-4{background:#e2e7f1}.swatch.period-5{background:#ece5d7}.swatch.period-6{background:#f1dfcf}.swatch.period-7{background:#eadbd7}
.swatch.weight-known{background:#d9ead3}.swatch.weight-none{background:#e7e6e6}
.table-status{font-size:12px;color:#57615d;margin:10px 0 0}
.table-notes{max-width:900px;margin-top:14px;border-left:3px solid var(--materials);padding:10px 14px;color:#57615d;font-size:13px;line-height:1.55}
.table-notes summary{cursor:pointer;font-weight:700;color:#40504a}.table-notes p:last-child{margin-bottom:0}
.strip-label{margin:0;align-self:center;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#57615d;text-align:right;padding-right:8px}
.series-placeholder{display:flex;min-height:78px;padding:8px;border:1px dashed rgba(42,82,127,.55);border-radius:12px;background:rgba(42,82,127,.07);color:var(--decision);flex-direction:column;justify-content:center;align-items:center;text-align:center}
.series-placeholder strong{font-family:Georgia,"Times New Roman",serif;font-size:14px}.series-placeholder small{font-size:9px;line-height:1.15;margin-top:3px}
.ready-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}.lens-card{min-height:220px;padding:24px;border:1px solid var(--rule);border-radius:22px;background:rgba(255,255,255,.62)}
.lens-card.active-card{background:#173f33;color:#fff}.lens-card.classification-card{border-top:5px solid var(--decision)}
.lens-card span{display:inline-block;margin-bottom:34px;font-size:10px;text-transform:uppercase;letter-spacing:.15em}.lens-card p{line-height:1.55}
.method-section{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);align-items:center;gap:50px;padding:80px clamp(20px,7vw,110px);background:#edf0e5}
.method-art{height:420px;background:url('assets/shell-phi.jpeg') center/contain no-repeat;mix-blend-mode:multiply}.method-section li{margin:14px 0;line-height:1.6}
.drawer{position:fixed;right:0;top:0;z-index:50;width:min(620px,95vw);height:100vh;padding:68px 30px 34px;background:var(--field);transform:translateX(105%);transition:transform .25s ease;box-shadow:-12px 0 35px rgba(0,0,0,.18);overflow:auto}
.drawer.open{transform:none}.drawer-close{position:absolute;top:18px;right:22px;border:0;background:transparent;font-size:34px;cursor:pointer}
.drawer-header{padding-bottom:22px;border-bottom:1px solid var(--rule)}.drawer-symbol{font:700 84px Georgia,serif;color:var(--biology)}.drawer-header h2{margin-bottom:4px}.drawer-subtitle{margin:0;color:#5c6762}
.drawer-module{padding:24px 0;border-bottom:1px solid var(--rule)}.module-heading h3{margin-bottom:14px}.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fact{position:relative;padding:14px;background:#fff;border:1px solid var(--rule);border-radius:12px}.fact small{display:block;text-transform:uppercase;letter-spacing:.1em;color:#68726e;margin-bottom:4px}.fact strong{font-size:17px}
.tag{display:inline-block;margin-top:8px;font-style:normal;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#6d5717;background:rgba(200,163,44,.2);padding:3px 6px;border-radius:4px}
.context-note{font-size:13px;line-height:1.6;color:#4a5450;background:rgba(200,163,44,.11);border-left:3px solid var(--materials);padding:12px 14px}
.question-module ul{margin:0;padding-left:22px}.question-module li{margin:10px 0;line-height:1.5}
.classification-stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}.classification-stack>div{padding:16px;border:1px solid var(--rule);background:#fff;border-radius:12px}
.classification-stack span{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#68726e}.classification-stack strong{display:block;font:700 24px Georgia,serif;margin:5px 0}.classification-stack p{font-size:13px;line-height:1.4;margin:0;color:#56615d}
.sources-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;color:var(--decision);font-weight:800;text-decoration:none}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(21,27,34,.38)}
.load-error{padding:22px;border:1px solid var(--rule);border-radius:10px;background:#fff;font-size:15px;line-height:1.6;max-width:760px}
.site-footer{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px clamp(18px,4vw,64px);border-top:1px solid var(--rule);background:rgba(247,245,239,.92);color:rgba(21,27,34,.76);font-size:13px}.site-footer p{margin:0}.site-footer p:last-child{color:rgba(21,27,34,.6)}
.reference-page{padding:80px clamp(20px,8vw,140px)}.reference-hero{max-width:900px;margin-bottom:60px}.reference-list{display:grid;gap:18px;max-width:1050px}
.reference-record{padding:28px;border:1px solid var(--rule);border-radius:18px;background:rgba(255,255,255,.68)}.reference-record h2{font-size:34px;margin-bottom:12px}
.reference-type{text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:800;color:var(--biology)}
.reference-record p{line-height:1.65}.text-link{color:var(--decision);font-weight:800}
@media(max-width:850px){
  .site-header nav{display:none}.hero{grid-template-columns:1fr}.hero-art{min-height:280px}.section-heading{display:block}
  .ready-grid{grid-template-columns:1fr}.method-section{grid-template-columns:1fr}.method-art{height:260px}
  .site-footer{align-items:flex-start;flex-direction:column}.classification-stack,.facts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.source-note{margin:14px 0 0;font-size:12px}
.source-note a{color:var(--decision);text-decoration:none}
.source-note a:hover{text-decoration:underline}
.element-summary{font-size:15px;line-height:1.6;color:#4f5a55;margin:0 0 18px}
.lens-facts .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.sources-link{margin-top:18px;font-size:14px}
@media(max-width:620px){.lens-facts .facts{grid-template-columns:1fr}}


.compact-hero{min-height:58vh}
.three-view-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.relationship-card{border-top:5px solid var(--discovery)}
.table-support{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px}
.source-note{font-size:12px;color:var(--decision);text-decoration:none}
.fact p{margin:5px 0 0;color:#66716c;font-size:11px;line-height:1.35}
.compact-module p{line-height:1.6}
.peer-grid{display:flex;gap:8px;flex-wrap:wrap}
.peer-link{display:inline-flex;gap:6px;align-items:baseline;padding:8px 10px;border:1px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer}
.peer-link:hover,.peer-link:focus{border-color:var(--decision);outline:2px solid rgba(42,82,127,.18)}
.peer-link small{color:#66716c}
.more-count,.empty-value{display:inline-flex;align-items:center;padding:8px 10px;color:#66716c;font-size:12px}
.element.relationship-muted{opacity:.18}
.element.same-period{box-shadow:inset 0 0 0 3px #8db7aa;background:#e3f1ed}
.element.same-group{box-shadow:inset 0 0 0 3px #7e9fc2;background:#e3edf6}
.element.atomic-neighbor{box-shadow:inset 0 0 0 3px #d7aa3e;background:#f7eccd}
.element.selected-relation{box-shadow:inset 0 0 0 4px #be682e;background:#f4d9c8;opacity:1}
.element.search-dimmed{opacity:.14}
.element.matched{outline:3px solid var(--execution);opacity:1}
.swatch.selected-relation{background:#f4d9c8;border-color:#be682e}
.swatch.same-period{background:#e3f1ed;border-color:#8db7aa}
.swatch.same-group{background:#e3edf6;border-color:#7e9fc2}
.swatch.atomic-neighbor{background:#f7eccd;border-color:#d7aa3e}
@media(max-width:980px){.three-view-grid{grid-template-columns:1fr}}

.systems-view-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.living-card{border-top:5px solid var(--biology)}
.carbon-card{border-top:5px solid #3f4a45}
.hydrogen-card{border-top:5px solid #7caecb}
.oxygen-card{border-top:5px solid var(--execution)}
.engineering-card{border-top:5px solid var(--materials)}
.occurrence-card{border-top:5px solid var(--venture)}
.translation-card{border-top:5px solid var(--synthesis)}
.element.living-relevant{background:#d9ead3;box-shadow:inset 0 0 0 2px #6d9b82}
.element.carbon-anchor{background:#cad7d1;box-shadow:inset 0 0 0 4px #3f4a45}
.element.carbon-near{background:#e2ebe7}
.element.hydrogen-anchor{background:#dceefa;box-shadow:inset 0 0 0 4px #7caecb}
.element.hydrogen-near{background:#edf6fb}
.element.oxygen-anchor{background:#f2d8ca;box-shadow:inset 0 0 0 4px var(--execution)}
.element.oxygen-near{background:#f8e9e1}
.element.engineering-relevant{background:#efe3b7;box-shadow:inset 0 0 0 2px #c8a32c}
.element.translation-bridge{background:#dfd8ed;box-shadow:inset 0 0 0 3px #6d6497}
.swatch.living-relevant{background:#d9ead3;border-color:#6d9b82}
.swatch.carbon-anchor{background:#cad7d1;border-color:#3f4a45}
.swatch.carbon-near{background:#e2ebe7;border-color:#8da39a}
.swatch.hydrogen-anchor{background:#dceefa;border-color:#7caecb}
.swatch.hydrogen-near{background:#edf6fb;border-color:#b9d8eb}
.swatch.oxygen-anchor{background:#f2d8ca;border-color:#be682e}
.swatch.oxygen-near{background:#f8e9e1;border-color:#df9b76}
.swatch.engineering-relevant{background:#efe3b7;border-color:#c8a32c}
.swatch.translation-bridge{background:#dfd8ed;border-color:#6d6497}
.swatch.neutral{background:#fff;border-color:#aaa}
@media(max-width:900px){.systems-view-grid{grid-template-columns:1fr}}


/* v3.0 workbook-driven coverage additions */


.disabled-element{background:#e4e5e4!important;color:#8a8d8b!important;border-color:#c7c9c7!important;box-shadow:none!important;cursor:default!important;opacity:.62}
.disabled-element:hover,.disabled-element:focus{transform:none!important;box-shadow:none!important;outline:none!important}
.lens-enabled{background:#d9ead3;box-shadow:inset 0 0 0 2px #6d9b82}
.lens-mm{background:#dfd8ed;box-shadow:inset 0 0 0 2px #6d6497}
.relationship-enabled{background:#d9eaf7}
.enabled-swatch{background:#d9ead3;border-color:#6d9b82}
.disabled-swatch{background:#e4e5e4;border-color:#a9adaa}
.lens-card-button{min-height:190px;padding:24px;border:1px solid var(--rule);border-radius:22px;background:rgba(255,255,255,.62);text-align:left;color:inherit;cursor:pointer}
.lens-card-button:hover,.lens-card-button:focus{border-color:var(--decision);outline:2px solid rgba(42,82,127,.16)}
.lens-card-button span{display:block;margin-bottom:24px;text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.lens-card-button h3{font-size:20px;line-height:1.25}
.lens-card-button strong{display:block;margin-top:18px;color:var(--biology)}
.selected-lens-card{background:#173f33;color:#fff}.selected-lens-card strong{color:#d9ead3}
.narrative-module p:last-child{font-size:16px;line-height:1.7}

.narrative-module p{font-size:16px;line-height:1.72}
.narrative-source{display:inline-block;margin-top:10px;color:var(--decision);font-weight:700;text-decoration:none}
.narrative-source:hover,.narrative-source:focus{text-decoration:underline}

.core-facts-module{background:rgba(255,255,255,.36)}
.core-facts-module .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.lens-summary{font-size:15px;line-height:1.65;color:#4f5a55}
@media(max-width:620px){.core-facts-module .facts{grid-template-columns:1fr}}