/* Opening: two material perspectives, then the full-width element directory. */
.crm-opening{--opening-height:clamp(620px,calc(100svh - var(--header-h)),920px);position:relative;height:var(--opening-height);background:#f3f3f0}
.crm-opening-panel.crm-intro{position:relative;top:0;height:100%;min-height:0;transform:none;opacity:1;clip-path:none;overflow:hidden}
.crm-opening .intro-copy{padding-top:clamp(65px,10vh,120px);padding-bottom:32px;min-width:0;justify-content:center}
.crm-opening .intro-copy h1{font-size:clamp(52px,5.2vw,82px)}
.crm-opening .intro-copy>.eyebrow{margin-bottom:36px}
.crm-opening .intro-footnote{margin-top:auto;padding-top:50px;font-size:9px}
.opening-gallery{position:relative;min-width:0;overflow:hidden;background:#202225}
.opening-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.opening-slide.is-active{opacity:1;z-index:1}
.opening-slide>img{width:100%;height:100%;object-fit:cover;object-position:50% center}
.opening-slide figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:20px;padding:85px 32px 28px;background:linear-gradient(transparent,#000b);color:#eee;font:9px var(--font-mono);letter-spacing:.04em}
.opening-controls{position:absolute;left:28px;right:28px;bottom:82px;z-index:2;display:flex;justify-content:space-between;gap:20px;color:#fff}
.opening-tabs{display:flex;gap:22px}.opening-tabs button,.opening-pause{color:#fff;font-size:11px;padding:9px 0;background:none;border:0;opacity:.65}
.opening-tabs button[aria-pressed=true]{opacity:1;border-bottom:2px solid var(--crm-crimson)}
.opening-tabs button>span{font:9px var(--font-mono);margin-right:8px;color:#d1d1d1}.opening-tabs button:hover,.opening-pause:hover{opacity:1}
.opening-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.crm-page-home .science-heading h2{font:500 clamp(34px,3.5vw,54px)/1.13 var(--font-sans);letter-spacing:-.04em;color:#fff}
.crm-page-home .science-heading h2>span{display:block}.crm-page-home .science-heading h2 em{display:block;font:italic 400 clamp(30px,3.1vw,46px)/1.2 Georgia,serif;color:#cacbd0;margin-top:4px}

/* Mat World state palette: quiet family hues, neutral inspected tile, brand-red interaction. */
.crm-science-stage .periodic-hero-inner{width:calc(100% - 80px);max-width:1760px}
.crm-science-stage .periodic-grid{--atlas-cell:max(50px,calc((100cqw - 102px)/18))}
.crm-science-stage .element-tile{--family:139,167,118;background:rgba(var(--family),.055)}
.crm-science-stage .cat-alkali{--family:166,135,181}.crm-science-stage .cat-alkaline-earth{--family:131,131,175}
.crm-science-stage .cat-transition{--family:124,152,171}.crm-science-stage .cat-post-transition{--family:118,167,167}
.crm-science-stage .cat-metalloid{--family:118,167,143}.crm-science-stage .cat-nonmetal{--family:139,167,118}
.crm-science-stage .cat-halogen{--family:176,171,120}.crm-science-stage .cat-noble-gas{--family:178,153,118}
.crm-science-stage .cat-lanthanoid{--family:180,140,126}.crm-science-stage .cat-actinoid{--family:177,129,141}
.crm-science-stage .periodic-panel:has(.legend-btn:not([data-family=all]).active) .element-tile:not(.dimmed){background:rgba(var(--family),.18)}
.crm-science-stage .element-tile.is-inspected:not(.dimmed){background:#ffffff29;box-shadow:none}
.crm-science-stage .element-tile.is-inspected:before{content:"";display:block;position:absolute;top:6px;right:6px;width:3px;height:3px;background:var(--crm-crimson)}
.crm-science-stage .element-tile:hover:not(.dimmed),.crm-science-stage .element-tile:focus-visible:not(.dimmed){background:rgba(167,32,1,.42);box-shadow:inset 0 -2px var(--crm-crimson);color:#fff}
.crm-science-stage .element-tile.dimmed{opacity:.55}
.crm-science-stage .table-caption .caption-element{color:var(--crm-crimson);font-size:clamp(46px,4vw,70px)}
.crm-science-stage .table-caption .caption-element small{color:#d6d8dd}
.crm-science-stage .periodic-properties dd{color:var(--crm-crimson);font-size:clamp(17px,1.4vw,24px);font-weight:600}
.crm-science-stage .periodic-properties dl{gap:22px 24px}
.crm-science-stage .legend-btn.active{border-bottom-color:var(--crm-crimson)}
.crm-science-stage .element-tile b{font-size:clamp(21px,1.7vw,31px)}
.crm-science-stage .element-tile .atomic-no{font-size:9px}.crm-science-stage .element-tile .element-cn{font-size:clamp(7px,.6vw,10px)}
.crm-science-stage .legend-btn{font-size:10px}.crm-science-stage .table-caption p{font-size:12px}
@media(max-width:1100px){.crm-opening .intro-copy h1{font-size:54px}.opening-controls{left:22px;right:22px}.opening-tabs{gap:14px}.opening-slide figcaption{padding-left:22px;padding-right:22px;font-size:8px}.crm-science-stage .periodic-hero-inner{width:calc(100% - 48px)}}
@media(max-width:700px){
 .crm-opening{--opening-height:auto;height:auto;padding-bottom:0}
 .crm-opening-panel.crm-intro{position:relative;top:auto;height:auto;grid-template-columns:1fr;transform:none;clip-path:none;opacity:1;will-change:auto}
 .crm-opening .intro-copy{padding:48px 24px 26px}.crm-opening .intro-copy h1{font-size:54px}.crm-opening .intro-copy>.eyebrow{margin-bottom:30px}
 .crm-opening .intro-footnote{padding-top:35px;gap:10px;font-size:8px}.opening-gallery{height:400px}.opening-controls{bottom:68px;left:22px;right:22px}
 .opening-tabs button,.opening-pause{font-size:10px}.opening-slide figcaption{font-size:7px;padding:70px 22px 23px;gap:12px}
 .crm-science-stage .periodic-hero-inner{width:calc(100% - 32px)}.crm-science-stage .table-caption p{font-size:10px}
 .crm-science-stage .element-tile b{font-size:21px}.crm-science-stage .periodic-properties dd{font-size:17px}
 .crm-science-stage .table-caption .caption-element{font-size:40px}.crm-science-stage .legend-btn{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.crm-opening{height:var(--opening-height)}.crm-opening-panel.crm-intro{position:relative;top:0;transform:none!important;opacity:1!important;clip-path:none!important;will-change:auto}.opening-slide{transition:none}.opening-pause{display:none}}

.crm-science-stage .legend-btn i.alkali-dot{background:#a687b5}.crm-science-stage .legend-btn i.alkaline-earth-dot{background:#8383af}.crm-science-stage .legend-btn i.transition-dot{background:#7c98ab}.crm-science-stage .legend-btn i.post-transition-dot{background:#76a7a7}.crm-science-stage .legend-btn i.metalloid-dot{background:#76a78f}.crm-science-stage .legend-btn i.nonmetal-dot{background:#8ba776}.crm-science-stage .legend-btn i.halogen-dot{background:#b0ab78}.crm-science-stage .legend-btn i.noble-gas-dot{background:#b29976}.crm-science-stage .legend-btn i.lanthanoid-dot{background:#b48c7e}.crm-science-stage .legend-btn i.actinoid-dot{background:#b1818d}
.crm-science-stage .periodic-panel .element-tile:hover,.crm-science-stage .periodic-panel .element-tile:focus-visible{background:rgba(167,32,1,.20)!important;opacity:1;box-shadow:none}
.crm-science-stage .periodic-panel .element-tile:focus-visible{outline:1px solid var(--crm-crimson);outline-offset:1px}
.crm-science-stage .element-tile.dimmed{opacity:.55!important}.crm-science-stage .periodic-panel .element-tile:hover,.crm-science-stage .periodic-panel .element-tile:focus-visible{opacity:1!important}#element-atlas{scroll-margin-top:8px}