:root { --accent:      #5B9BD5; --accent-lift: #89B8E1; --facet:       #3A5A8C; --duotone:     #2D4A73; --panel:       #22304F; --alt:         #16233F; --ink:         #101B33; --ink-deep:    #0A1226;  --paper:       #F2F5F8; --grey:        #626E82;  --card:        #FFFFFF;
--rule:        #D5DDE7;
--hairline:    #E2E8F0; --muted:       #626E82;
--tint:        #F7F9FB; --on-ink:        rgba(242, 245, 248, 1);
--on-ink-soft:   rgba(242, 245, 248, .78);
--on-ink-2nd:    rgba(242, 245, 248, .62);
--on-ink-quiet:  rgba(242, 245, 248, .45);
--on-ink-faint:  rgba(242, 245, 248, .34);
--edge:          rgba(242, 245, 248, .12);
--edge-strong:   rgba(242, 245, 248, .24); --duo: .82; --font-display: Newsreader, Georgia, 'Times New Roman', serif;
--font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --s-4: 4px;    --s-8: 8px;    --s-12: 12px;  --s-16: 16px;
--s-24: 24px;  --s-32: 32px;  --s-48: 48px;  --s-64: 64px;
--s-96: 96px;  --s-128: 128px; --s-192: 192px; --measure: 1280px;
--gutter: 64px;
--section-y: 96px;
} *, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink-deep);
color: var(--on-ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-lift); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
::selection { background: var(--accent); color: var(--ink); }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--accent); color: var(--ink);
padding: 14px 24px;
font-family: var(--font-mono); font-size: 12px;
letter-spacing: .2em; text-transform: uppercase;
}
.skip-link:focus { left: 0; color: var(--ink); }
.visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}  .display {
font-family: var(--font-display);
font-weight: 300;
font-size: 78px;
line-height: 1.03;
letter-spacing: -.025em;
text-wrap: balance;
margin: 0;
}
.h1 {
font-family: var(--font-display);
font-weight: 300;
font-size: 64px;
line-height: 1.04;
letter-spacing: -.02em;
text-wrap: balance;
margin: 0;
}
.h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 54px;
line-height: 1.07;
letter-spacing: -.02em;
text-wrap: balance;
margin: 0;
}
.h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: 30px;
line-height: 1.2;
margin: 0;
}
.h4 {
font-family: var(--font-display);
font-weight: 400;
font-size: 28px;
line-height: 1.18;
margin: 0;
}
.h5 {
font-family: var(--font-display);
font-weight: 400;
font-size: 27px;
line-height: 1.15;
margin: 0;
} .lede    { font-size: 19px; line-height: 1.6;  margin: 0; }
.body    { font-size: 17px; line-height: 1.65; margin: 0; }
.body-sm { font-size: 15px; line-height: 1.7;  margin: 0; }
.body-xs { font-size: 14px; line-height: 1.7;  margin: 0; }
.measure    { max-width: 52ch; }
.measure-sm { max-width: 46ch; }
.measure-lg { max-width: 70ch; } .label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.label--tight { letter-spacing: .2em; }
.label--wide  { letter-spacing: .16em; }
.label--quiet { color: var(--on-ink-quiet); letter-spacing: .16em; }
.label--rule {
display: flex; align-items: center; gap: 14px;
}
.label--rule::before {
content: ''; width: 28px; height: 1px; background: currentColor; flex: none;
}
.mono { font-family: var(--font-mono); } .t-soft  { color: var(--on-ink-soft); }
.t-2nd   { color: var(--on-ink-2nd); }
.t-quiet { color: var(--on-ink-quiet); }
.t-lift  { color: var(--accent-lift); } .wrap {
max-width: var(--measure);
margin-inline: auto;
padding-inline: var(--gutter);
width: 100%;
}
.section {
padding-block: var(--section-y) calc(var(--section-y) + 16px);
background: var(--ink);
color: var(--on-ink);
} .section--ink   { background: var(--ink); }
.section--alt   { background: var(--alt); }
.section--panel { background: var(--panel); } .section--paper {
background: var(--paper);
color: var(--ink);
}
.section--paper .label   { color: var(--facet); }
.section--paper .lede,
.section--paper .body,
.section--paper .body-sm { color: var(--grey); }
.section--paper a        { color: var(--facet); }
.section--paper a:hover  { color: var(--ink); } .rule-fade {
height: 1px; border: 0; margin: 0;
background: linear-gradient(90deg, rgba(91,155,213,.7), rgba(91,155,213,0));
}
.rule-fade--dark {
background: linear-gradient(90deg, rgba(16,27,51,.25), rgba(16,27,51,0));
} .section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: var(--s-96);
align-items: end;
margin-bottom: var(--s-64);
}
.section-head--wide { grid-template-columns: minmax(0, 1fr) 440px; }
.section-head__eyebrow { margin-bottom: 26px; }
.section-head__note {
font-size: 15px; line-height: 1.7;
color: var(--on-ink-2nd);
margin: 0;
}
.section--paper .section-head__note { color: var(--grey); font-size: 17px; line-height: 1.65; } .subsection {
padding-top: 88px;
margin-top: 88px;
border-top: 1px solid var(--edge);
}
.section--paper .subsection { border-top-color: var(--rule); }
.subsection__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 40px; margin-bottom: 36px;
} .stack-8  > * + * { margin-top: var(--s-8); }
.stack-12 > * + * { margin-top: var(--s-12); }
.stack-16 > * + * { margin-top: var(--s-16); }
.stack-24 > * + * { margin-top: var(--s-24); }
.stack-32 > * + * { margin-top: var(--s-32); } .duo {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--panel);
} .duo > picture,
.photo > picture {
position: absolute; inset: 0; z-index: 0;
display: block;
}
.duo > img,
.duo > picture > img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1) contrast(1.08) brightness(.9);
} .duo::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: var(--duotone);
mix-blend-mode: color;
opacity: var(--duo);
pointer-events: none;
} .duo::after {
content: '';
position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(16,27,51,.12), rgba(16,27,51,.85));
pointer-events: none;
} .duo__content { position: relative; z-index: 3; } .duo--band::after {
background: linear-gradient(180deg,
rgba(16,27,51,.25)  0%,
rgba(16,27,51,.45) 35%,
rgba(16,27,51,.88) 72%,
rgba(16,27,51,.97) 100%);
} .duo--hero > img,
.duo--hero > picture > img { filter: grayscale(1) contrast(1.08) brightness(.86); }
.duo--hero::after {
background: linear-gradient(105deg,
rgba(16,27,51,.94) 34%,
rgba(16,27,51,.72) 58%,
rgba(16,27,51,.55) 100%);
} .photo {
position: relative;
overflow: hidden;
background: var(--panel);
}
.photo > img, .photo > picture > img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ratio-16-9  { aspect-ratio: 16 / 9; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-3-2   { aspect-ratio: 3 / 2; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-4-5   { aspect-ratio: 4 / 5; }
.ratio-1-1   { aspect-ratio: 1 / 1; }
.figcap {
display: flex; justify-content: space-between; gap: 16px;
margin-top: 14px;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--on-ink-quiet);
}
.figcap--single { display: block; }
.section--paper .figcap { color: var(--muted); } .band {
position: relative;
height: 420px;
display: flex; align-items: flex-end;
}
.band .duo__content { width: 100%; padding-bottom: var(--s-48); }
.band--short { height: 240px; } .band--center {
align-items: center;
justify-content: center;
}
.band--center .duo__content { width: 100%; padding-bottom: 0; text-align: center; } .band--parallax > picture > img,
.band--parallax > img {
transform: scale(1.2);
will-change: transform;
} .photo--band {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--panel);
}
.photo--band > picture {
position: absolute; inset: 0; z-index: 0; display: block;
}
.photo--band > img,
.photo--band > picture > img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.photo--band::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(16,27,51,.25)  0%,
rgba(16,27,51,.45) 35%,
rgba(16,27,51,.88) 72%,
rgba(16,27,51,.97) 100%);
pointer-events: none;
}
.photo--band .duo__content { position: relative; z-index: 2; }  .site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(10, 18, 38, .92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(242, 245, 248, .14);
}
.site-header__inner {
max-width: var(--measure);
margin-inline: auto;
padding: 26px var(--gutter);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-48);
}
.site-header__logo { display: block; flex: none; }
.site-header__logo img { height: 44px; width: auto; display: block; }
.nav {
display: flex; align-items: center; gap: 36px;
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
font-weight: 500;
} .nav a:not(.nav__cta) {
padding-bottom: 4px;
border-bottom: 2px solid transparent;
}
.nav a { color: var(--on-ink-soft); }
.nav a:hover { color: var(--accent-lift); }
.nav a[aria-current="page"] {
color: var(--on-ink);
border-bottom-color: var(--accent);
} .nav__cta {
display: inline-block;
padding: 13px 26px;
border: 1px solid rgba(91, 155, 213, .55);
color: var(--accent);
letter-spacing: .16em;
font-family: var(--font-mono);
font-size: 11px;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav__cta:hover {
background: var(--accent);
color: var(--ink);
border-color: var(--accent);
} .nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--edge-strong);
color: var(--on-ink);
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
padding: 12px 18px;
cursor: pointer;
} .btn {
display: inline-block;
background: var(--accent);
color: var(--ink);
border: 0;
padding: 20px 40px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
cursor: pointer;
transition: background .18s ease;
}
.btn:hover { background: var(--accent-lift); color: var(--ink); }
.btn--lg { padding: 20px 44px; } .btn-quiet {
display: inline-block;
padding: 20px 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--on-ink-soft);
border-bottom: 1px solid var(--edge-strong);
transition: color .18s ease, border-color .18s ease;
}
.btn-quiet:hover { color: var(--accent-lift); border-bottom-color: var(--accent-lift); }
.section--paper .btn-quiet { color: var(--facet); border-bottom-color: var(--rule); }
.section--paper .btn-quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }
.btn-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .link-arrow {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--accent);
}
.link-arrow:hover { color: var(--accent-lift); } .hero {
position: relative;
background: var(--ink);
isolation: isolate;
min-height: 820px;
display: flex;
flex-direction: column; } .hero > picture > img,
.hero > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 40%;
filter: grayscale(1) contrast(1.08) brightness(.86);
z-index: 0;
}
.hero::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: var(--duotone); mix-blend-mode: color; opacity: var(--duo);
pointer-events: none;
}
.hero::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(105deg,
rgba(16,27,51,.94) 34%,
rgba(16,27,51,.72) 58%,
rgba(16,27,51,.55) 100%);
pointer-events: none;
} .hero__inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
flex: 1;
} .hero__grid {
max-width: var(--measure);
margin-inline: auto;
width: 100%;
padding: 104px var(--gutter) var(--s-96);
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
flex: 1;
}
.hero h1 { max-width: 17ch; color: var(--on-ink); }
.hero__sub { margin-top: 36px; color: var(--on-ink-soft); max-width: 52ch; }
.hero__actions { margin-top: 44px; } .page-head {
background: var(--ink);
padding-block: 88px 72px;
}
.page-head__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 420px;
gap: var(--s-96);
align-items: end;
}
.page-head__eyebrow { margin-bottom: 26px; } .unit {
border: 1px solid var(--rule);
background: var(--card);
} .unit__primary {
padding: var(--s-48) var(--s-48) 44px;
}
.unit__secondary {
padding: var(--s-32) var(--s-48) 36px;
background: var(--tint);
border-top: 1px solid var(--rule);
}
.unit__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 20px; margin-bottom: var(--s-8);
}
.unit__name {
font-family: var(--font-mono);
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--facet);
}
.unit__rank {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted);
}
.unit__primary h3, .unit__secondary h3 { margin: 0 0 var(--s-16); color: var(--ink); }
.unit__secondary h3 { font-size: 20px; }
.unit__primary > p, .unit__secondary > p { margin: 0 0 34px; } .unit__meta {
display: flex; flex-wrap: wrap; align-items: baseline;
gap: var(--s-8) var(--s-12);
padding-top: var(--s-24);
border-top: 1px solid var(--rule);
font-family: var(--font-mono);
font-size: 12px; line-height: 1.6;
}
.unit__meta-term {
letter-spacing: .2em; text-transform: uppercase;
color: var(--facet);
} .unit__meta-value {
letter-spacing: .06em;
color: var(--ink);
overflow-wrap: anywhere;
} .mineral-groups {
display: flex;
flex-direction: column;
gap: var(--s-24);
margin-top: var(--s-8);
padding-top: var(--s-24);
border-top: 1px solid var(--rule);
}
.mineral-group__label {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--facet);
margin: 0 0 var(--s-12);
}
.mineral-grid {
display: flex;
flex-wrap: wrap;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.mineral {
flex: 1 1 140px;
background: var(--tint);
padding: var(--s-12) var(--s-16) 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.mineral__sym {
font-family: var(--font-mono);
font-size: 20px;
color: var(--ink);
align-self: flex-start;
}
.mineral__name {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .04em;
color: var(--muted);
} .element-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dashed currentColor;
transition: color .15s ease, border-color .15s ease;
}
.element-link:hover,
.element-link:focus-visible { color: var(--accent); }
.section--paper .element-link:hover,
.section--paper .element-link:focus-visible { color: var(--facet); } .facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule);
border-top: 1px solid var(--rule);
}
.fact {
background: var(--tint);
padding: 36px 40px 38px;
}
.fact__term {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--facet); margin-bottom: var(--s-16);
}
.fact__value { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; } .unit__disclaimer {
display: flex; align-items: baseline; gap: 28px;
padding: 28px var(--s-48) 30px;
background: var(--ink);
border-top: 1px solid var(--rule);
}
.unit__disclaimer .label { flex: none; padding-top: 2px; color: var(--accent); }
.unit__disclaimer p:not(.label) {
font-size: 14px; line-height: 1.65;
color: var(--on-ink-soft);
margin: 0;
}  .people {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2px;
align-items: stretch;
}
.person {
background: var(--alt);
border-top: 2px solid var(--accent);
display: flex;
flex-direction: column;
}
.person__portrait {
aspect-ratio: 4 / 5;
background: var(--panel);
overflow: hidden;
position: relative;
isolation: isolate;
}
.person__portrait img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1) contrast(1.06) brightness(.95);
}
.person__portrait::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: var(--duotone); mix-blend-mode: color; opacity: .55;
pointer-events: none;
}
.person__body {
padding: 28px 32px 36px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.person h3 { margin: 0 0 var(--s-12); }
.person__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-12);
margin-bottom: var(--s-12);
}
.person__role {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent);
margin: 0;
}
.person__linkedin {
flex: none;
display: inline-flex;
color: var(--accent);
}
.person__linkedin svg { width: 16px; height: 16px; display: block; }
.person__linkedin:hover,
.person__linkedin:focus-visible { color: var(--accent-lift); }
.person__bio {
font-size: 15px; line-height: 1.75;
color: rgba(242, 245, 248, .74);
margin: 0;
}
.person__bio + .person__bio { margin-top: var(--s-16); } .cards {
display: grid;
gap: 2px;
align-items: start;
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); } .cards--equal { align-items: stretch; }
.cards--equal > .teaser { height: 100%; }
.card {
background: var(--alt);
padding: 40px 40px 44px;
border-top: 2px solid var(--accent);
display: flex; flex-direction: column;
}
.card__index {
font-family: var(--font-mono);
font-weight: 300; font-size: 30px; line-height: 1;
color: var(--accent);
margin-bottom: var(--s-24);
}
.card h3, .card h4 { margin: 0 0 var(--s-16); }
.card p:not(.label) { font-size: 15px; line-height: 1.75; color: rgba(242, 245, 248, .74); margin: 0; }
.card__foot { margin-top: var(--s-32); }
.section--paper .card { background: var(--card); border-top-color: var(--facet); }
.section--paper .card p:not(.label) { color: var(--grey); }
.section--paper .card__index { color: var(--facet); } .card-approach { padding: 0; overflow: hidden; }
.card-approach__image { margin: 0; }
.card-approach__body { padding: var(--s-32) var(--s-32) 36px; }
.card-approach__body .label { margin-bottom: var(--s-16); } #approach .section-head { display: block; margin-bottom: 44px; }
#approach .h2 { max-width: 900px; }
#approach .section-head__eyebrow { margin-bottom: 24px; }
.approach-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--rule);
}
.approach-step { padding: 28px 32px 0 0; min-width: 0; }
.approach-step + .approach-step { padding-left: 32px; }
.approach-step:last-child { padding-right: 0; }
.approach-step__number {
display: block;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.4;
letter-spacing: .12em;
color: var(--facet);
margin-bottom: 24px;
}
.approach-step h3 {
font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -.015em;
margin: 0 0 16px;
}
.approach-step p { color: var(--grey); font-size: 15px; line-height: 1.75; margin: 0; }
@media (max-width: 900px) {
.approach-step { padding-right: 20px; }
.approach-step + .approach-step { padding-left: 20px; }
.approach-step h3 { font-size: 26px; }
}
@media (max-width: 680px) {
#approach .section-head { margin-bottom: 32px; }
.approach-steps { grid-template-columns: 1fr; }
.approach-step,
.approach-step + .approach-step { padding: 24px 0; }
.approach-step + .approach-step { border-top: 1px solid var(--rule); }
.approach-step:last-child { padding-bottom: 0; }
.approach-step__number { margin-bottom: 12px; }
} .teaser {
background: var(--alt);
border-top: 2px solid var(--accent);
padding: 40px 40px 44px;
display: flex; flex-direction: column;
transition: background .2s ease;
}
.teaser:hover { background: var(--panel); } .teaser .label { margin-bottom: 26px; }
.teaser h3 { color: var(--on-ink); margin: 0 0 var(--s-16); }
.teaser p:not(.label) { font-size: 15px; line-height: 1.75; color: rgba(242,245,248,.74); margin: 0 0 var(--s-32); }
.teaser .link-arrow { margin-top: auto; } .metals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.metal {
background: var(--alt);
padding: 32px 28px 36px;
border-top: 2px solid var(--accent);
}
.metal__sym {
font-family: var(--font-mono);
font-weight: 300; font-size: 52px; line-height: 1;
color: var(--on-ink);
letter-spacing: .02em;
margin-bottom: var(--s-16);
}
.metal__name {
font-family: var(--font-display);
font-weight: 400; font-size: 22px; line-height: 1.2;
margin-bottom: var(--s-12);
}
.metal p { font-size: 14px; line-height: 1.7; color: rgba(242, 245, 248, .7); margin: 0; } .rows { display: grid; gap: 2px; }
.row {
background: var(--alt);
padding: 40px var(--s-48) 44px;
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: var(--s-64);
align-items: start;
border-top: 2px solid var(--accent);
}
.row dt { margin: 0; }
.row dd { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(242, 245, 248, .78); } .row__label { font-size: 16px; letter-spacing: .08em; } .news-list { display: grid; gap: 2px; }
.news-item {
background: var(--alt);
border-top: 2px solid var(--accent);
padding: 40px var(--s-48) 44px;
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: var(--s-48);
align-items: start;
transition: background .2s ease;
}
.news-item:hover { background: var(--panel); }
.news-item h3 { margin: 0 0 var(--s-12); color: var(--on-ink); }
.news-item p:not(.label) { font-size: 15px; line-height: 1.7; color: rgba(242,245,248,.74); margin: 0 0 var(--s-24); }
.article { max-width: 68ch; }
.article p:not(.label) { font-size: 17px; line-height: 1.75; color: var(--on-ink-soft); margin: 0 0 var(--s-24); }
.article h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.2; margin: var(--s-48) 0 var(--s-16); }
.article__meta {
display: flex; gap: var(--s-32); flex-wrap: wrap;
padding-bottom: var(--s-24);
margin-bottom: var(--s-48);
border-bottom: 1px solid var(--edge);
} .prose { max-width: 72ch; }
.prose h2 {
font-family: var(--font-display); font-weight: 400;
font-size: 30px; line-height: 1.2;
margin: var(--s-48) 0 var(--s-16);
}
.prose h3 {
font-family: var(--font-mono); font-size: 11px;
letter-spacing: .2em; text-transform: uppercase;
color: var(--accent);
margin: var(--s-32) 0 var(--s-12);
}
.prose p, .prose li {
font-size: 16px; line-height: 1.75; color: var(--on-ink-soft);
margin: 0 0 var(--s-16);
}
.prose ul { padding-left: 1.2em; }
.prose li { list-style: disc; } .form { display: grid; gap: 40px; max-width: 560px; }
.field label {
display: block;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.field input,
.field textarea,
.field select {
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid var(--edge-strong);
padding: 8px 0 12px;
font-family: var(--font-body);
font-size: 18px;
color: var(--on-ink);
outline: none;
border-radius: 0;
transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(242, 245, 248, .38); }
.field input:focus,
.field textarea:focus,
.field select:focus {
border-bottom-color: var(--accent);
box-shadow: 0 1px 0 0 var(--accent);
}
.field select option { background: var(--ink); color: var(--on-ink); } .spec {
background: var(--alt);
padding: 32px 32px 36px;
}
.spec__title { margin-bottom: 22px; }
.spec__list { display: grid; gap: 14px; font-size: 13px; line-height: 1.6; }
.spec__row { display: flex; justify-content: space-between; gap: var(--s-16); }
.spec__row span:first-child { color: var(--on-ink-quiet); }
.spec__row span:last-child { font-family: var(--font-mono); color: var(--on-ink); text-align: right; }
.spec__note {
font-size: 13px; line-height: 1.7; color: rgba(242, 245, 248, .55);
margin: var(--s-24) 0 0;
padding-top: 20px;
border-top: 1px solid rgba(242, 245, 248, .1);
} .split {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 80px;
align-items: start;
} .site-footer {
background: var(--ink-deep);
padding-block: var(--s-96) var(--s-48);
border-top: 1px solid var(--edge);
}
.site-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
gap: var(--s-64);
padding-bottom: var(--s-64);
border-bottom: 1px solid var(--edge);
}
.site-footer__logo img { height: 34px; width: auto; margin-bottom: var(--s-24); }
.site-footer p { font-size: 14px; line-height: 1.7; color: var(--on-ink-2nd); margin: 0; }
.footer-nav { display: grid; gap: var(--s-12); list-style: none; }
.footer-nav li { color: var(--on-ink-2nd); font-size: 14px; }
.footer-nav a { color: var(--on-ink-2nd); font-size: 14px; }
.footer-nav a:hover { color: var(--accent-lift); }
.footer-nav__title {
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--s-8);
}
.site-footer__legal {
display: flex; justify-content: space-between; gap: var(--s-32);
flex-wrap: wrap;
padding-top: var(--s-32);
font-family: var(--font-mono);
font-size: 11px; letter-spacing: .08em; line-height: 1.8;
color: var(--on-ink-faint);
} .disclaimer-bar {
background: var(--alt);
border-top: 2px solid var(--accent);
padding-block: var(--s-32);
}
.disclaimer-bar__inner {
display: flex; align-items: baseline; gap: 28px;
}
.disclaimer-bar .label { flex: none; padding-top: 2px; }
.disclaimer-bar p:not(.label) {
font-size: 14px; line-height: 1.65;
color: var(--on-ink-soft);
margin: 0;
} .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
transform .7s cubic-bezier(.4, 0, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group > * {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.4, 0, .2, 1),
transform .7s cubic-bezier(.4, 0, .2, 1);
}
.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .32s; } @media (max-width: 1100px) {
:root { --gutter: 48px; --section-y: 64px; }
.display { font-size: 56px; }
.h1 { font-size: 48px; }
.h2 { font-size: 40px; }
.hero__grid {
grid-template-columns: minmax(0, 1fr);
gap: 56px;
padding-block: 72px var(--s-64);
}
.hero h1 { max-width: 20ch; }
.section-head,
.section-head--wide,
.page-head__grid,
.split {
grid-template-columns: minmax(0, 1fr);
gap: var(--s-32);
}
.cards--4, .people { grid-template-columns: repeat(2, 1fr); }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-48); }
.facts { grid-template-columns: 1fr 1fr; } .mineral { flex: 1 1 calc(33.333% - .67px); }
}
@media (max-width: 860px) {
.nav-toggle { display: block; }
.site-header__inner { flex-wrap: wrap; }
.nav {
display: none;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: var(--s-24);
padding-top: var(--s-24);
margin-top: var(--s-24);
border-top: 1px solid var(--edge);
}
.nav.is-open { display: flex; }
.people, .cards--2, .cards--3, .cards--4 { grid-template-columns: minmax(0, 1fr); }
.row, .news-item { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
.metals { grid-template-columns: repeat(2, 1fr); }
.subsection { padding-top: var(--s-64); margin-top: var(--s-64); }
.subsection__head { flex-direction: column; gap: var(--s-16); }
.band { height: 320px; }
}
@media (max-width: 640px) {
:root { --gutter: 24px; --section-y: 48px; }
body { font-size: 16px; }
.display { font-size: 40px; letter-spacing: -.02em; }
.h1 { font-size: 36px; }
.h2 { font-size: 32px; }
.h3, .h4, .h5 { font-size: 24px; }
.lede { font-size: 17px; }
.hero__grid { padding-block: var(--s-48) var(--s-48); }
.hero h1 { max-width: none; }
.unit__primary { padding: var(--s-32) var(--s-24) var(--s-32); }
.unit__secondary { padding: var(--s-24) var(--s-24) var(--s-32); } .mineral { flex: 1 1 calc(50% - .5px); }
.facts { grid-template-columns: minmax(0, 1fr); }
.fact { padding: var(--s-24) var(--s-24) 28px; }
.unit__disclaimer { flex-direction: column; gap: var(--s-12); padding: var(--s-24); }
.metals { grid-template-columns: minmax(0, 1fr); }
.card, .teaser, .metal { padding: var(--s-24) var(--s-24) var(--s-32); }
.person__body { padding: var(--s-24) var(--s-24) var(--s-32); }
.row, .news-item { padding: var(--s-24); }
.site-footer__grid { grid-template-columns: minmax(0, 1fr); }
.disclaimer-bar__inner { flex-direction: column; gap: var(--s-12); }
.btn, .btn--lg { padding: 18px 28px; }
.band { height: 260px; }
.figcap { flex-direction: column; gap: 4px; }
} @media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
.reveal, .reveal-group > * { opacity: 1; transform: none; }
}
@media print {
body { background: #fff; color: #000; }
.site-header, .site-footer, .nav, .btn, .btn-quiet { display: none; }
.section, .hero { background: #fff; color: #000; padding-block: 24px; }
.hero::before, .hero::after, .duo::before, .duo::after { display: none; }
} .form p { margin: 0; }
.form .wpcf7-form-control-wrap { display: block; }
.form .wpcf7-not-valid-tip { margin-top: 8px; color: #f7ba64; font-size: 13px; }
.form .wpcf7-response-output { margin: 0 !important; padding: 14px 16px !important; border-color: var(--lift) !important; color: var(--on-ink); }
.form input.wpcf7-submit { appearance: none; border: 0; cursor: pointer; }