/* Inner pages: Blog, Contact, CV. Shares the look of the home page. */
:root { --teal: #1f8a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal: #5fc4c0; } }
:root[data-theme="dark"] { --teal: #5fc4c0; }
h1, .post-title { font-family: 'Marcellus SC', Georgia, serif; font-weight: 700; letter-spacing: .04em; }
h2 { font-family: 'Marcellus SC', Georgia, serif; font-weight: 700; letter-spacing: .03em; border-top: 0; padding-top: 0; }
header.site { border-bottom-color: var(--teal); }
nav.main a:hover, nav.main a[aria-current="page"] { border-bottom-color: var(--teal); }
footer.site { border-top-color: var(--teal); }
a { color: var(--teal); }
.wrap.page { max-width: 46rem; }
.meta { font-family: system-ui, sans-serif; font-size: .8rem; color: var(--muted); margin: .2rem 0 1.6rem; }
.meta a { color: var(--muted); }
.post-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.1rem; }
/* entries alternate between two colors, each with a colored edge and a light tint */
.post-list li { --c: #1f8a8a; padding: 1rem 1.2rem 1rem 1rem; border-left: 6px solid var(--c); border-radius: 0 3px 3px 0; background: color-mix(in srgb, var(--c) 9%, var(--bg)); }
.post-list li:nth-child(even) { --c: #b7791f; }
.post-list h2 { font-size: 1.3rem; margin: 0 0 .2rem; line-height: 1.25; }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { color: var(--teal); }
.post-list p { margin: .5rem 0 .6rem; }
.more { font-family: system-ui, sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
article.post p, article.post li { line-height: 1.55; }
article.post figure { margin: 1.6rem 0; }
article.post img { display: block; max-width: 100%; height: auto; border-radius: 2px; }
article.post figcaption { font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin-top: .4rem; }
article.post h3, article.post h4 { font-family: 'Marcellus SC', Georgia, serif; margin: 2rem 0 .6rem; }
article.post sup { font-size: .7em; }
article.post ol { padding-left: 1.4rem; font-size: .92rem; }
article.post ol li { margin-bottom: .5rem; }
.back { display: inline-block; margin-top: 2.2rem; font-family: system-ui, sans-serif; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.contact-card { font-size: 1.05rem; line-height: 1.7; margin: 1.2rem 0 1.6rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.contact-links a { font-family: system-ui, sans-serif; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 1px solid var(--teal); border-radius: 2px; padding: .6rem 1.1rem; display: inline-block; }
.contact-links a:hover { background: var(--teal); color: var(--bg); }
.wrap.cv { max-width: 62rem; }
.cv-frame { width: 100%; height: 85vh; min-height: 34rem; border: 1px solid var(--rule); border-radius: 2px; background: #fff; display: block; }
.cv-fallback { padding: 2rem 1rem; font-family: system-ui, sans-serif; }
.meta time, .post-list time, article time { display: inline; }
.post-list li a.more { font-size: .8rem; }

/* header name in Marcellus SC */
.brand { font-family: 'Marcellus SC', Georgia, serif; font-weight: 700; letter-spacing: .05em; font-size: 1.3rem; }

/* everything aligns to the left edge, in line with the home page */
:root { --gut: clamp(1.25rem, 4vw, 3.5rem); }
header.site .wrap, footer.site .wrap, .wrap.page, .wrap.cv { max-width: none; margin: 0; padding-left: var(--gut); padding-right: var(--gut); }
header.site .wrap { justify-content: flex-start; gap: .4rem 3rem; }
.wrap.page > * { max-width: 46rem; }
.wrap.cv > * { max-width: 62rem; }
.wrap.page:has(.post-list) > * { max-width: 64rem; }

/* blog text is justified */
article.post p, article.post li, .post-list p { text-align: justify; hyphens: auto; }
article.post figcaption, .meta { text-align: left; hyphens: none; }

/* blog list with a thumbnail for each post */
/* the thumbnail fills the full height of its entry's text */
.post-list li { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.post-list .thumb { display: block; position: relative; width: auto; min-height: 11rem; padding: 0; background: none; border-radius: 2px; overflow: hidden; }
.post-list .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post-list .post-text > :first-child { margin-top: 0; }
@media (max-width: 40rem) { .post-list li { grid-template-columns: 1fr; gap: .9rem; } .post-list .thumb { min-height: 12rem; } }
/* Research page: an overview, then three color-coded project sections */
.wrap.page.research > * { max-width: 62rem; }
.overview { font-size: 1.06rem; line-height: 1.5; text-align: justify; hyphens: auto; margin: .4rem 0 1.4rem; }
.jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2.2rem; }
.jump a { font-family: system-ui, sans-serif; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 1px solid var(--c); border-left-width: 5px; border-radius: 2px; padding: .5rem .9rem; }
.jump a:hover { background: var(--c); color: #fff; }
.project { --tint: color-mix(in srgb, var(--c) 8%, var(--bg)); background: var(--tint); border-left: 6px solid var(--c); border-radius: 0 3px 3px 0; padding: 1.5rem 1.7rem 1.6rem; margin: 0 0 2rem; }
.proj-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1rem; }
.thumb { flex: none; width: 7.5rem; height: auto; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--bg)); border-radius: 3px; padding: .5rem; }
.kicker { font-family: system-ui, sans-serif; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 600; margin: 0 0 .25rem; }
.project h2 { margin: 0; padding: 0; border: 0; font-size: 1.55rem; line-height: 1.2; }
.project > p { line-height: 1.5; text-align: justify; hyphens: auto; margin: 0 0 1.3rem; }
.records { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.6rem 2.4rem; border-top: 1px solid color-mix(in srgb, var(--c) 35%, transparent); padding-top: 1.1rem; }
.records h3 { font-family: system-ui, sans-serif; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin: 0 0 .6rem; }
.records ul, .records ol { margin: 0; padding-left: 1.3rem; }
.records ul { list-style: disc; }
.records ol { list-style: decimal; }
.records li::marker { color: var(--c); font-weight: 600; }
.authors { display: block; font-size: .88rem; color: var(--muted); margin-top: .15rem; }
.records li { font-size: .92rem; line-height: 1.42; padding: .1rem 0 .7rem; }
.records li a { color: var(--c); }
.status { display: block; font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.method { display: block; font-family: system-ui, sans-serif; font-size: .72rem; color: var(--c); margin-top: .1rem; }
.earlier { border-top: 1px solid var(--rule); padding-top: 1.2rem; margin: 2.4rem 0 1.4rem; }
.earlier h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.earlier p { font-size: .92rem; line-height: 1.45; text-align: justify; hyphens: auto; margin: 0; }
.note { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--muted); }
@media (max-width: 46rem) {
  .records { grid-template-columns: 1fr; }
  .proj-head { flex-direction: column; align-items: flex-start; gap: .7rem; }
  .project { padding: 1.2rem 1.1rem; }
}