/* =========================================================================
Cytokines and Depression — design3
design2's calm palette + Cormorant/Newsreader typography,
in design1's two-column layout with a persistent left sidebar.
Single responsive stylesheet.
========================================================================= */
/* Fonts are loaded via + in each
page's (faster than @import, which is render-blocking). */
:root {
/* Calm, cool, twilight palette (from design2) */
--bg: #e9edf0; /* soft misty blue-grey */
--surface: #fbfcfd; /* content sheet */
--ink: #2b333b; /* deep slate */
--ink-soft: #57636e; /* secondary text */
--ink-faint: #8a949e; /* meta, captions */
--accent: #6d8a9c; /* dusty blue */
--accent-deep: #486274; /* deeper dusty blue */
--accent-tint: #eef2f5; /* faint wash */
--line: #e0e5ea; /* soft hairline */
--line-soft: #eef2f5;
--shadow: 0 1px 2px rgba(43, 51, 59, .04), 0 8px 28px rgba(43, 51, 59, .08);
--shadow-soft: 0 1px 3px rgba(43, 51, 59, .07);
--display: "Cormorant Garamond", Georgia, serif;
--body: "Newsreader", Georgia, "Times New Roman", serif;
--reading: 42rem; /* comfortable reading column */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font: 400 1.25rem/1.85 var(--body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.clearer { clear: both; }
/* ---------- Layout shell ----------------------------------------------- */
#outer-container {
max-width: 1100px;
margin: 0 auto;
background: var(--surface);
min-height: 100vh;
}
@media (min-width: 56rem) {
#outer-container {
margin: 3.5rem auto;
min-height: 0;
border-radius: 4px;
box-shadow: 0 1px 40px rgba(43, 51, 59, .06);
overflow: hidden;
}
}
/* ---------- Header ------------------------------------------------------ */
#header {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .35rem 1.5rem;
padding: 2.25rem clamp(1.25rem, 4vw, 3.25rem) 1.85rem;
background: var(--surface);
border-bottom: 1px solid var(--line);
}
#header div#title { position: static; }
#header .site-title {
margin: 0;
font: 500 clamp(2.1rem, 4.6vw, 3rem)/1.05 var(--display);
letter-spacing: .01em;
color: var(--ink);
}
#header .tagline {
margin: .35rem 0 0;
padding: 0;
font: italic 400 1.3rem/1.4 var(--display);
color: var(--ink-soft);
padding-left: .5rem;
}
#header .tagline i { color: var(--accent-deep); }
#header div#byline { position: static; right: auto; bottom: auto; }
#header #byline p {
margin: 0;
font: 400 .8rem/1.5 var(--body);
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ink-faint);
white-space: nowrap;
}
#header a { color: inherit; text-decoration: none; }
#header a:hover { color: var(--accent-deep); text-decoration: none; }
/* ---------- Inner layout: sidebar + content ---------------------------- */
#inner-container {
display: flex;
align-items: flex-start;
gap: clamp(1.5rem, 4vw, 3.5rem);
padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem) 2.5rem;
}
/* ---------- Sidebar navigation ----------------------------------------- */
.sidenav {
flex: 0 0 16rem;
position: sticky;
top: 1.5rem;
}
.sidenav .Chapters {
display: block;
width: 100%;
margin: 0 0 .6rem;
padding: 0 .25rem .55rem;
font: 400 .76rem/1 var(--body);
letter-spacing: .18em;
text-transform: uppercase;
text-align: left;
color: var(--ink-faint);
background: none;
height: auto;
border: none;
border-bottom: 1px solid var(--line);
cursor: default;
-webkit-appearance: none;
appearance: none;
}
.dropdown { display: block; }
.sidenav a.menu_item {
display: block;
padding: .6rem .75rem .4rem;
margin: .12rem 0;
border: none;
border-radius: 9px;
background: transparent;
color: var(--ink-soft);
font: 400 1.02rem/1.4 var(--body);
text-decoration: none;
transition: background-color .15s ease, color .15s ease;
}
.sidenav a.menu_item:hover {
background: var(--line-soft);
color: var(--accent-deep);
text-decoration: none;
}
.sidenav a#active,
.sidenav a#active:hover {
background: var(--accent);
color: #fff;
border: none;
box-shadow: var(--shadow-soft);
}
.sidenav a#belowactive { border: none; }
.nav_bottom { display: none; }
/* Kindle promo card */
.endcap {
margin-top: 1.75rem;
padding: 1.25rem 1rem 2.25rem;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
text-align: center;
}
.endcap .kindle-label {
margin: .2rem 0 .92rem;
padding: 0;
font: 400 .74rem/1.3 var(--body);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink-faint);
background: none;
height: auto;
}
img.cover {
display: block;
margin: 0 auto;
width: 180px !important;
border-radius: 6px;
box-shadow: var(--shadow);
}
/* ---------- Content ----------------------------------------------------- */
#content {
flex: 1 1 auto;
min-width: 0;
max-width: var(--reading);
font: 400 1.25rem/1.9 var(--body);
color: var(--ink);
}
/* Chapter eyebrow ("Chapter 1") */
.kicker {
margin: 0 0 .35rem;
padding: 0;
text-indent: 0;
font: 400 .78rem/1 var(--body);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent-deep);
}
h1.chapter_title,
h1.author_title {
margin: 0 0 1.75rem;
padding-bottom: 1.1rem;
font: 500 clamp(2.2rem, 5vw, 3rem)/1.1 var(--display);
letter-spacing: .01em;
text-align: left;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
h1, h2, h3 { color: var(--ink); }
/* Section subheadings */
#content h2 {
margin: 2.75rem 0 .4rem;
padding: 0;
font: 500 1.85rem/1.25 var(--display);
letter-spacing: .01em;
color: var(--accent-deep);
}
#content h3 {
margin: 2.25rem 0 .5rem;
font: 500 1.5rem/1.3 var(--display);
color: var(--ink);
}
p {
margin: 0 0 1.2rem;
text-indent: 0;
text-align: left;
line-height: 1.9;
}
p + p { margin-top: 0; }
.noindent, .left { text-indent: 0; }
.indent { text-indent: 1.5em; }
.center { text-align: center; }
/* Raised initial on the opening paragraph of a chapter:
sits on the first line's baseline and rises above it. */
h1.chapter_title + p::first-letter,
.lead::first-letter {
font: 500 2.1em/.7 var(--display);
vertical-align: baseline;
margin-right: 0;
color: var(--accent-deep);
}
/* Letters that overhang to the right (e.g. T) need a tighter pull */
h1.chapter_title + p.tcap::first-letter { margin-right: -.1em; }
a {
color: var(--accent-deep);
text-decoration: underline;
text-decoration-color: rgba(72, 98, 116, .35);
text-underline-offset: 2px;
transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a.noline { text-decoration: none; }
.super {
text-decoration: none;
font-size: .68em;
vertical-align: super;
line-height: 0;
color: var(--accent);
}
sup.super { font-size: .68em; }
hr {
border: 0;
height: 1px;
background: var(--line);
margin: 2.75rem 0 1.5rem;
}
/* Next-chapter link */
.nextchap {
margin: 2.5rem 0 0;
padding: 1rem 1.35rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--accent-tint);
font: italic 400 1.2rem/1.4 var(--display);
text-align: right;
color: var(--ink-soft);
}
.nextchap a { font-style: normal; font-weight: 500; }
/* ---------- Figures, diagrams, captions -------------------------------- */
img { max-width: 100%; height: auto; }
img.figure {
display: block;
width: 100%;
max-width: 540px;
margin: 1.75rem auto .6rem;
border-radius: 8px;
box-shadow: var(--shadow);
background: #fff;
}
.caption {
margin: 0 auto 1.75rem;
text-indent: 0;
text-align: center;
font: italic 400 1.05rem/1.5 var(--display);
color: var(--ink-faint);
}
.diagram {
text-indent: 0;
text-align: center;
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-radius: 12px;
background: var(--accent-tint);
font: 500 1.25rem/1.5 var(--display);
color: var(--accent-deep);
}
img.author {
float: left;
width: 225px;
margin: .35rem 1.5rem 1rem 0;
border-radius: 12px;
box-shadow: var(--shadow);
}
/* ---------- Quotes & commentary ---------------------------------------- */
.quote {
text-indent: 0;
text-align: left;
margin: 1.75rem 0;
padding: .5rem 0 .5rem 1.75rem;
border-left: 3px solid var(--accent);
font: italic 400 1.2rem/1.55 var(--display);
color: var(--ink-soft);
}
.comment {
text-indent: 0;
text-align: left;
margin: 1.75rem 0 .4rem;
padding: 1.1rem 1.35rem;
border-radius: 12px;
background: var(--accent-tint);
font: italic 400 1.15rem/1.55 var(--display);
color: var(--ink);
}
.commentCite {
text-indent: 0;
text-align: left;
margin: 0 0 1.75rem;
padding-left: 1.35rem;
font: 400 .85rem/1.5 var(--body);
letter-spacing: .04em;
color: var(--ink-faint);
}
/* ---------- Scientific publication citations --------------------------- */
.cite {
margin: 0 0 2rem;
padding: 0;
font: 400 1.05rem/1.6 var(--body);
text-align: left;
width: auto;
}
/* extra breathing room between the section heading and the first entry */
#content h2 + .cite { margin-top: 1rem; }
.articletitle {
display: inline-block;
margin: 0 0 .3rem;
font: 700 1.3rem/1.35 var(--display);
color: var(--ink);
text-align: left;
text-decoration: none;
}
a.articletitle:hover { text-decoration: underline; text-decoration-color: currentColor; }
.authors {
display: inline-block;
margin-bottom: .2rem;
font: 400 1.05rem/1.55 var(--body);
color: var(--ink-soft);
}
.journal { font: italic 400 1.05rem/1.55 var(--body); color: var(--ink); }
.ref {
padding-left: 1.75em;
text-indent: -1.6em;
text-align: left;
font: 400 .95rem/1.65 var(--body);
color: var(--ink-soft);
}
/* ---------- Tables ------------------------------------------------------ */
table {
width: 100%;
margin: 1.5rem 0;
border-collapse: collapse;
font: 400 1.02rem/1.5 var(--body);
}
th, td {
padding: .65rem .85rem;
text-align: left;
vertical-align: top;
border: none;
border-bottom: 1px solid var(--line);
}
th {
color: var(--accent-deep);
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
font-size: .78rem;
border-bottom: 2px solid var(--accent);
}
/* ---------- Lists ------------------------------------------------------- */
#content ul { margin: 1.1rem 0 1.2rem; padding-left: 1.5rem; }
#content li { margin-bottom: .55rem; padding-left: .25rem; }
#content li::marker { color: var(--accent); }
/* ---------- Footer ------------------------------------------------------ */
#footer {
clear: both;
padding: 1.5rem;
text-align: center;
font: 400 .82rem/1.5 var(--body);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
background: none;
border-top: 1px solid var(--line);
}
/* =========================================================================
Responsive — collapse sidebar into a tap-to-open menu
========================================================================= */
@media (max-width: 880px) {
#inner-container {
flex-direction: column;
gap: 1.25rem;
}
/* design2-style centered masthead + headings in narrow mode */
#header {
flex-direction: column;
align-items: center;
text-align: center;
}
#header .site-title,
#header .tagline,
#header #byline p { text-align: center; }
#header .tagline { padding-left: 0; }
/* match the subtitle->byline gap to the title->subtitle gap */
#header #byline { margin-top: .25rem; }
.kicker,
h1.chapter_title,
h1.author_title { text-align: center; }
.sidenav {
position: relative;
top: auto;
flex: 1 1 auto;
width: 100%;
z-index: 20;
text-align: center;
}
.sidenav .Chapters {
display: inline-flex;
width: auto;
align-items: center;
gap: .65rem;
margin: 0;
padding: .8rem 1.5rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--ink-soft);
font: 400 .8rem/1 var(--body);
letter-spacing: .16em;
cursor: pointer;
}
.sidenav .Chapters::after {
content: "\25BE";
font-size: .9em;
color: var(--accent-deep);
}
.dropdown {
display: none;
position: absolute;
left: 0;
right: 0;
margin-top: .5rem;
padding: .6rem;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow);
text-align: left;
}
.dropdown.show { display: block; }
.endcap { display: none; }
#content { max-width: none; }
img.author { float: none; display: block; width: 100%; max-width: 225px; margin: 0 auto 1.5rem; }
}
@media (max-width: 560px) {
body { font-size: 1.12rem; }
#content { font-size: 1.12rem; }
#header { padding: 1.5rem 1.25rem 1.25rem; }
#header .tagline { font-size: 1.15rem; }
h1.chapter_title + p::first-letter,
.lead::first-letter { font-size: 1.8em; }
.cite, .comment, .nextchap { padding-left: 1rem; padding-right: 1rem; }
}