/* default colorscheme (light) */
:root {
    --ff: 'Noto Sans', 'Fira Sans', sans-serif;
    --text-width: 80ch;

    --bg: hsl(0 0% 98%);
    --bg-dark: hsl(0 0% 95%);
    --bg-light: hsl(0 0% 100%);
    --nav-bg: hsla(0 0% 98% / 0.5);

    --color-text: hsl(0, 0%, 0%);
    --color-text-muted: hsl(0, 0%, 30%);
    --color-accent: hsl(135 59% 21%);
    --color-border: hsl(0 0% 50%);

    --danger: hsl(9 21% 41%);
    --warning: hsl(52 23% 34%);
    --success: hsl(147 19% 36%);
    --info: hsl(217 22% 41%);

    --border: 1px solid var(--color-border);
    --shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.07), 0px 6px 6px hsla(0, 0%, 0%, 0.05);

    --h1: 700 1.6rem/1em var(--ff);
    --h2: 700 1.4rem/1em var(--ff);
    --h3: 700 1.2rem/1em var(--ff);
    --p: 1rem/1.65em var(--ff);
    --p2: 0.875rem/1.45em var(--ff);
}

@media(prefers-color-scheme: dark) {
    :root {
	--bg: hsl(0 0% 10%);
	--bg-dark: hsl(0 0% 5%);
	--bg-light: hsl(0 0% 15%);
	--nav-bg: hsla(0 0% 10% / 0.5);


	--color-text: hsl(0, 0%, 100%);
	--color-text-muted: hsl(0, 0%, 80%);
	--color-accent: hsl(128 34% 64%);
	--color-border: hsl(0 0% 50%);

	--danger: hsl(9 26% 64%);
	--warning: hsl(52 19% 57%);
	--success: hsl(146 17% 59%);
	--info: hsl(217 28% 65%);


	--border: 1px solid var(--color-border);
    }
}

html {
    font-family: var(--ff);
}

body {
    background-color: var(--bg);
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
}

a {
    color: var(--color-text-muted);
    text-decoration: underline 2px solid var(--color-text-muted);
}

a:hover { color: var(--color-accent); }

footer { margin: auto auto; padding: 5px 5px; height: 50px; }
footer p { font-size: 0.8rem; color: var(--color-text-muted); }

h1,
h2,
h3 {
    text-wrap: balance;
}

p {
    font: var(--p);
}

input {
    font: var(--ff);
    color: var(--color-text);
    border: var(--border);
    padding: .35rem .5rem;
    border-radius: 8px;
    background: none;
}

button {
    border: var(--border);
    border-radius: 8px;
    font: var(--ff);
    color: var(--color-text);
    background-color: var(--bg-light);
}

button:hover {
    background-color: var(--bg);
}

sup, sub {
    line-height: 0;
}

/* Card grid display */

.page-layout {
    min-block-size: 100vb;
    display: grid;
    grid-template-rows: 50px 1fr auto;
}

.hero {
    width: 100%;
    display: flex;
    flex-direction: column; /* keep content stacked vertically */
    justify-content: center; /* vertical centering */
    align-items: center;    /* horizontal centering */
    height: calc(100vh - 150px);
    text-align: center;     /* center text inside */
}

.hero > header > h1 {
    font-style: italic; 
    margin: 0;
}

.hero > header > h2 {
    color: var(--color-text-muted);
    font: var(--p);
    margin: 0;
    padding: 0;
}

.hero > section {
    max-width: 80ch;
    text-wrap: balance;
}

.main-content {
    display: grid;
    margin: 15px 10px;
    grid-template-rows: auto 100% auto;
    @media (width > 576px) {
	grid-template-columns: 1fr 540px 1fr;
    }
    @media (width > 768px) {
	grid-template-columns: 1fr 720px 1fr;
    }
    @media (width > 992px) {
	grid-template-columns: 1fr 960px 1fr;
    }
    /* @media (width > 1200px) { */
    /* 	grid-template-columns: 1fr 1140px 1fr; */
    /* } */
    /* @media (width > 1400px) { */
    /* 	grid-template-columns: 1fr 1320px 1fr; */
    /* } */
}

#topnav {
    /* background-color: var(--bg-dark); */
    /* box-shadow: var(--shadow); */
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: sticky;
    top: 0;
    background-color: var(--nav-bg);
    backdrop-filter: blur(40px);
    z-index: 1000;

    @media (width > 576px) {
	grid-template-columns: 1fr 540px 1fr;
    }
    @media (width > 768px) {
	grid-template-columns: 1fr 720px 1fr;
    }
    @media (width > 992px) {
	grid-template-columns: 1fr 960px 1fr;
    }
    /* @media (width > 1200px) { */
    /* 	grid-template-columns: 1fr 1140px 1fr; */
    /* } */
    /* @media (width > 1400px) { */
    /* 	grid-template-columns: 1fr 1320px 1fr; */
    /* } */
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-links {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
}

#topnav a {
    padding: 0;
    font-weight: 500;
}

#topnav a:hover {
    color: var(--color-accent);
}

#topnav a:not(.nav-active) {
    text-decoration: none;
}

#topnav a:is(.nav-active) {
    text-decoration: underline 3px solid;
    text-underline-offset: 5px;
}

.paragraph {
    max-width: var(--text-width);
}

.search-variety {
    margin: 3rem 0;
    display: grid;
    grid-template-columns: 1fr 100px 100px;
    gap: 1rem;
}

/* Logo */

.logo {
    height:50px;
    display:flex;
    align-items: center;
}

.writings-list ul {
    list-style: none;
    padding-left: 0rem;
    margin: 50px 0;
}

.writings-list li {
    width: 100%;
}

.writings-list header {
    padding: 0;
    margin: 0;
}

.writings-list h2 {
    font: var(--h3);
    padding: 0;
    margin: 0;
}

.undecorated {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.card-subtitle {
    font: var(--p2);
    color: var(--color-text-muted);
    padding: 0;
    margin: 0;
}

.pub-list {
    list-style: none;
    padding-left: 0rem;
    margin-top: 3rem;
}

.pub-list cite {
    font: var(--p);
}

.pub-list cite a {
    text-decoration: none;
    color: inherit;
}

.pub-list p {
    color: var(--color-text-muted);
    margin-top: 0rem;
    display: flex;
    flex-direction: column;
    font: var(--p2);
}

.pub-links {
    margin-left: 0rem;
}

.pub-links a:hover {
    background-color: var(--bg-dark);
}

.pub-links a {
    background-color: var(--bg-light);
    color: var(--color-text); 
    padding: 0.3rem .7rem;
    display: inline-block;
    border-radius: .6rem;
    text-decoration: none;
    border: .1rem solid var(--color-border);
    font: var(--p2);
    margin-top: 0.3rem;
    margin-bottom: 1rem;
}

.cards-grid ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
    padding: 4px 0 30px 0;
    list-style: none;
}

.cards-grid ul li {
    background: var(--bg-light);
    border: var(--border);
    border-radius: 4px;
    padding: 0.5rem;
    text-align: center;
    box-shadow: var(--shadow);
}

.timestamps ul {
    list-style: none;
    padding: 0 0;
    font: var(--p2);
    color: var(--color-text-muted);
}
.text-small {
    font: var(--p2);
}
.text-muted {
    color: var(--color-text-muted);
}