/* =========================================================
Consequence Science Institute
main.css

Responsibility:
Load the shared CSS system in the correct order.

This file assembles the design system.
It should contain imports only.
========================================================= */

@import url("./reset.css");
@import url("./variables.css");
@import url("./typography.css");
@import url("./layout.css");
@import url("./navigation.css");
@import url("./patterns.css");
@import url("./pages.css");
@import url("./utilities.css");

/* ==========================================================
PROJECT BLUE RECOVERY PATCH
Temporary direct rules to restore homepage rendering.
Move back into source files after visual recovery.
========================================================== */

body {
margin: 0;
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--text-base);
line-height: var(--leading-reading);
}

a {
color: inherit;
text-decoration: none;
}

.container {
width: min(100% - 2rem, var(--width-site));
margin-inline: auto;
}

.skip-link {
position: absolute;
left: 1rem;
top: 1rem;
z-index: 999;
transform: translateY(-150%);
background: var(--color-text);
color: var(--color-surface);
padding: var(--space-xs) var(--space-sm);
font-family: var(--font-sans);
font-size: var(--text-sm);
}

.skip-link:focus {
transform: translateY(0);
}

.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background: rgba(248, 246, 241, 0.96);
border-bottom: var(--border-soft);
backdrop-filter: blur(12px);
}

.site-header__inner {
min-height: 4.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
}

.site-brand {
display: grid;
gap: var(--space-2xs);
font-family: var(--font-sans);
}

.site-brand__name {
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: var(--tracking-label);
line-height: var(--leading-tight);
text-transform: uppercase;
}

.site-brand__tagline {
color: var(--color-muted);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-label);
line-height: var(--leading-tight);
text-transform: uppercase;
}

.primary-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
column-gap: var(--space-md);
row-gap: var(--space-xs);
flex-wrap: wrap;
font-family: var(--font-sans);
font-size: var(--text-sm);
}

.primary-navigation a {
color: var(--color-muted);
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
color: var(--color-text);
}

.navigation-toggle {
display: none;
}

.hero {
padding-block: var(--space-2xl);
border-bottom: var(--border-soft);
background:
radial-gradient(circle at top right, var(--color-accent-soft), transparent 34rem),
var(--color-background);
}

.hero__inner {
display: grid;
gap: var(--space-xl);
}

.hero__eyebrow,
.page-section__eyebrow,
.principle-band__label,
.publication-item__meta {
margin: 0 0 var(--space-xs);
color: var(--color-muted);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
}

.hero__title {
max-width: 11ch;
margin: 0;
font-size: clamp(3rem, 8vw, 6.25rem);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}

.hero__summary {
max-width: var(--width-reading);
margin-top: var(--space-md);
color: var(--color-muted);
font-size: var(--text-md);
}

.hero__summary + .hero__summary {
margin-top: var(--space-sm);
}

.hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-top: var(--space-lg);
}

.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
padding-inline: var(--space-md);
border: var(--border-accent);
border-radius: var(--radius-round);
background: var(--color-accent);
color: var(--color-surface);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1;
}

.button--secondary {
background: transparent;
color: var(--color-accent);
}

.hero__statement {
max-width: var(--width-narrow);
align-self: end;
padding: var(--space-md);
border: var(--border-soft);
border-radius: var(--radius-lg);
background: var(--color-surface-soft);
box-shadow: var(--shadow-sm);
}

.hero__statement p {
margin: 0;
color: var(--color-muted);
}

.hero__statement strong {
color: var(--color-text);
}

.principle-band {
border-block: var(--border-soft);
background: var(--color-surface-soft);
}

.principle-band__inner {
display: grid;
gap: var(--space-md);
padding-block: var(--space-lg);
}

.principle-band__statement {
max-width: var(--width-reading);
margin: 0;
font-size: clamp(1.6rem, 3vw, var(--text-2xl));
line-height: var(--leading-title);
}

.page-section {
padding-block: var(--space-xl);
}

.page-section--muted {
background: var(--color-surface-soft);
}

.page-section__header {
max-width: var(--width-reading);
margin-bottom: var(--space-lg);
}

.page-section__title {
margin: 0;
font-size: clamp(2rem, 5vw, var(--text-3xl));
line-height: var(--leading-title);
letter-spacing: var(--tracking-tight);
}

.page-section__intro {
max-width: var(--width-narrow);
margin-top: var(--space-sm);
color: var(--color-muted);
font-size: var(--text-md);
}

.content-grid {
display: grid;
gap: var(--space-md);
}

.content-card {
padding: var(--space-md);
border: var(--border-soft);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}

.content-card h3 {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-lg);
letter-spacing: var(--tracking-normal);
}

.content-card p {
margin-top: var(--space-xs);
color: var(--color-muted);
}

.publication-list {
display: grid;
gap: var(--space-md);
max-width: var(--width-reading);
}

.publication-item {
padding-block: var(--space-md);
border-top: var(--border-soft);
}

.publication-item:last-child {
border-bottom: var(--border-soft);
}

.publication-item__title {
margin: 0;
font-family: var(--font-sans);
font-size: var(--text-lg);
letter-spacing: var(--tracking-normal);
}

.publication-item__summary {
margin-top: var(--space-xs);
color: var(--color-muted);
}

.closing-statement {
max-width: var(--width-reading);
padding-block: var(--space-xl);
}

.closing-statement p {
color: var(--color-muted);
}

.closing-statement p:nth-child(2) {
max-width: 18ch;
color: var(--color-text);
font-size: var(--text-xl);
line-height: var(--leading-title);
}

.site-footer {
border-top: var(--border-soft);
background: var(--color-surface-soft);
font-family: var(--font-sans);
}

.site-footer__inner {
display: flex;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
padding-block: var(--space-lg);
}

.site-footer__name {
margin: 0;
color: var(--color-text);
font-size: var(--text-sm);
font-weight: 700;
}

.site-footer__statement {
margin-top: var(--space-xs);
color: var(--color-muted);
font-size: var(--text-sm);
}

.site-footer__navigation {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
}

.site-footer__navigation a {
color: var(--color-muted);
font-size: var(--text-sm);
}

.site-footer__bottom {
display: flex;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
padding-block: var(--space-sm);
border-top: var(--border-soft);
color: var(--color-muted);
font-size: var(--text-sm);
}

.site-footer__bottom p {
margin: 0;
}

@media (min-width: 48rem) {
.hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
align-items: end;
}

.principle-band__inner {
grid-template-columns: 14rem minmax(0, 1fr);
align-items: start;
}

.content-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 720px) {
.site-header__inner {
align-items: flex-start;
flex-direction: column;
padding-block: var(--space-sm);
}

.navigation-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding-inline: var(--space-sm);
border: var(--border-thin);
border-radius: var(--radius-round);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-sm);
}

.primary-navigation {
display: none;
width: 100%;
justify-content: flex-start;
}

.primary-navigation[data-navigation-open] {
display: flex;
}

.hero {
padding-block: var(--space-xl);
}

.hero__title {
max-width: 12ch;
font-size: clamp(2.5rem, 14vw, 4rem);
}

.hero__summary {
font-size: var(--text-base);
}

.site-footer__inner,
.site-footer__bottom {
flex-direction: column;
}
}