/* ============================================ The Neuroscience Review — Stylesheet ============================================ */ /* Fonts loaded via in each page's (faster than @import) */ :root { --bg: #fafaf6; --bg-alt: #f3f2ec; --text: #1a1a1c; --text-muted: #6b6b66; --text-faint: #696760; --accent: #2d5d7b; --accent-hover: #1f4761; --border: #e6e4dc; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --content-width: 680px; --wide-width: 920px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 20px; line-height: 1.65; font-weight: 400; } /* Header */ .site-header { border-bottom: 1px solid var(--border); padding: 1.5rem 0; background: rgba(250, 250, 246, 0.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-header__inner { max-width: var(--wide-width); margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: baseline; } .site-logo { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.01em; } .site-logo:hover { color: var(--accent); } .site-nav { display: flex; gap: 1.75rem; flex-wrap: wrap; } .site-nav a { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: color 0.15s; } .site-nav a:hover { color: var(--accent); } main { padding: 3rem 1.5rem 4rem; } /* Hero */ .hero { max-width: 760px; margin: 2rem auto 5rem; } .hero__eyebrow { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1.25rem; } .hero__title { font-family: var(--serif); font-size: clamp(2.25rem, 5.5vw, 3.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 1.5rem; } .hero__lede { font-size: 1.2rem; line-height: 1.55; color: var(--text-muted); font-style: italic; } /* Section heading */ .section-heading { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); max-width: 760px; margin-left: auto; margin-right: auto; } /* Post list */ .post-list { list-style: none; max-width: 760px; margin: 0 auto; } .post-card { padding: 2.25rem 0; border-bottom: 1px solid var(--border); } .post-card:last-child { border-bottom: 0; } .post-card a { text-decoration: none; color: inherit; display: block; } .post-card a:hover .post-card__title { color: var(--accent); } .post-card__meta { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 0.75rem; display: flex; gap: 0.75rem; align-items: center; } .post-card__meta-type { color: var(--accent); font-weight: 600; } .post-card__meta-divider { color: var(--text-faint); opacity: 0.5; } .post-card__title { font-family: var(--serif); font-size: 1.85rem; font-weight: 600; line-height: 1.18; letter-spacing: -0.018em; margin-bottom: 0.85rem; transition: color 0.15s; } .post-card__lede { font-size: 1.05rem; line-height: 1.6; color: var(--text-muted); } /* Article (post page) */ article.post { max-width: var(--content-width); margin: 0 auto; } .post-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .post-header__eyebrow { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1.5rem; } .post-header__title { font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 2.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.022em; margin-bottom: 1.25rem; } .post-header__subtitle { font-size: 1.2rem; line-height: 1.5; color: var(--text-muted); font-style: italic; margin-bottom: 1.75rem; } .post-header__meta { font-family: var(--sans); font-size: 0.85rem; color: var(--text-faint); display: flex; gap: 1rem; } /* Post body */ .post-body p, .post-body ul, .post-body ol, .post-body blockquote { margin-bottom: 1.4rem; } .post-body > p:first-of-type::first-line { font-variant: small-caps; letter-spacing: 0.04em; } .post-body h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 3rem; margin-bottom: 1rem; line-height: 1.25; } .post-body h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; margin-top: 2.25rem; margin-bottom: 0.75rem; line-height: 1.3; } .post-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(45, 93, 123, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.15s; } .post-body a:hover { text-decoration-color: var(--accent); } .post-body em { font-style: italic; } .post-body strong { font-weight: 600; } .post-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.5rem; margin-left: 0; color: var(--text-muted); font-style: italic; } .post-body ul, .post-body ol { padding-left: 1.5rem; } .post-body ul li, .post-body ol li { margin-bottom: 0.4rem; } .section-break { text-align: center; font-family: var(--serif); color: var(--text-faint); letter-spacing: 0.5em; margin: 2.5rem 0; } .callout { background: var(--bg-alt); border-left: 3px solid var(--accent); padding: 1.25rem 1.5rem; margin: 2rem 0; font-size: 0.95rem; line-height: 1.55; } .callout__label { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 0.5rem; display: block; } /* CTA */ .cta { margin: 5rem auto 0; max-width: var(--content-width); padding: 2.5rem 2rem; background: var(--bg-alt); border-radius: 6px; text-align: center; } .cta h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.75rem; } .cta p { font-family: var(--serif); color: var(--text-muted); margin-bottom: 1.5rem; font-size: 1rem; } .cta__form { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; } .cta__input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 4px; font-family: var(--sans); font-size: 0.95rem; background: var(--bg); color: var(--text); } .cta__input:focus { outline: none; border-color: var(--accent); } .cta__button { background: var(--accent); color: white; border: none; border-radius: 4px; padding: 0.75rem 1.25rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background 0.15s; } .cta__button:hover { background: var(--accent-hover); } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem; margin-top: 5rem; background: var(--bg-alt); } .site-footer__inner { max-width: var(--wide-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .site-footer p { font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted); } .site-footer a { color: var(--accent); text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* Responsive */ @media (max-width: 600px) { body { font-size: 17px; } main { padding: 2rem 1.25rem 3rem; } .hero { margin: 1rem auto 3rem; } .site-header__inner { flex-direction: column; gap: 0.75rem; align-items: flex-start; } .site-nav { gap: 1.25rem; } .cta__form { flex-direction: column; } .cta { padding: 2rem 1.5rem; } .post-card__title { font-size: 1.5rem; } .post-card__meta { flex-wrap: wrap; } } /* ============================================ Upgrades (2026-06): sharing, dark mode, reading polish ============================================ */ .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 4px 0;font-family:var(--sans);font-size:.9rem;z-index:100;} .skip-link:focus{left:0;} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;} .theme-toggle{background:none;border:1px solid var(--border);border-radius:999px;width:2rem;height:2rem;cursor:pointer;line-height:1;color:var(--text-muted);font-size:.95rem;padding:0;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;align-self:center;} .theme-toggle:hover{color:var(--accent);border-color:var(--accent);} .post-body{max-width:66ch;margin-left:auto;margin-right:auto;} .post-body > p:first-of-type::first-letter{font-family:var(--serif);font-weight:600;float:left;font-size:3.3em;line-height:.78;padding:.04em .12em 0 0;color:var(--accent);} .pull-quote{font-family:var(--serif);font-size:1.5rem;line-height:1.35;font-style:italic;color:var(--text);border:0;padding:0;margin:2.5rem auto;max-width:60ch;} .post-body figure{margin:2.5rem 0;} .post-body figure img{width:100%;height:auto;border-radius:4px;display:block;background:#fff;} .post-body figcaption{font-family:var(--sans);font-size:.85rem;color:var(--text-muted);margin-top:.6rem;line-height:1.5;} .callout--summary{background:var(--bg-alt);border-left-color:var(--accent);} .callout--summary ul{margin:0;padding-left:1.1rem;} .callout--summary li{margin-bottom:.4rem;font-size:.97rem;line-height:1.5;} .cta--inline{margin:3rem auto;max-width:66ch;text-align:left;padding:1.5rem;border:1px solid var(--border);background:var(--bg-alt);border-radius:6px;} .cta--inline p{margin-bottom:1rem;font-size:1rem;} .cta--inline .cta__form{margin:0;max-width:100%;} .post-end{max-width:66ch;margin:3.5rem auto 0;padding-top:1.75rem;border-top:1px solid var(--border);} .post-share{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;} .post-share__label{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);} .post-share a{font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--accent);text-decoration:none;} .post-share a:hover{text-decoration:underline;} .post-sources h2{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0 0 1rem;} .post-sources ol{padding-left:1.25rem;} .post-sources li{font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--text-muted);margin-bottom:.6rem;} .byline{color:var(--text-muted);} [data-theme="dark"]{--bg:#16151a;--bg-alt:#1f1e25;--text:#e9e7e0;--text-muted:#a8a69e;--text-faint:#9a988f;--accent:#7fb2d4;--accent-hover:#a3c9e3;--border:#2e2c35;} [data-theme="dark"] .site-header{background:rgba(22,21,26,.9);} [data-theme="dark"] .cta__button{color:#16151a;} [data-theme="dark"] .post-body a{text-decoration-color:rgba(127,178,212,.4);} @media (max-width:600px){.theme-toggle{align-self:flex-start;}} .figure-credit{display:block;margin-top:.3rem;font-size:.78rem;color:var(--text-faint);} /* ============================================ Authors (2026-07): byline links, author pages, authors index ============================================ */ .byline a,.byline__link{color:var(--text-faint);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px;transition:color .15s,text-decoration-color .15s;} .byline a:hover{color:var(--accent);text-decoration-color:var(--accent);} /* Reusable avatar (initials placeholder, no photo needed) */ .author-avatar{flex:none;width:88px;height:88px;border-radius:50%;background:var(--bg-alt);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--accent);letter-spacing:.02em;} .author-avatar--lg{width:104px;height:104px;font-size:2.4rem;} /* Individual author page */ .author-profile{max-width:var(--content-width);margin:0 auto;display:flex;gap:1.5rem;align-items:center;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border);} .author-profile__eyebrow{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:.4rem;} .author-profile__name{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.4rem);font-weight:600;line-height:1.1;letter-spacing:-.02em;margin-bottom:.4rem;} .author-profile__role{font-family:var(--sans);font-size:.95rem;color:var(--text-muted);} .author-bio{max-width:var(--content-width);margin:0 auto;} .author-bio p{margin-bottom:1.2rem;} .author-bio a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(45,93,123,.35);text-underline-offset:3px;} .author-links{font-family:var(--sans);font-size:.9rem;display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.25rem;} .author-links a{color:var(--accent);text-decoration:none;} .author-links a:hover{text-decoration:underline;} /* Author's own post list */ .author-posts{max-width:var(--content-width);margin:2.5rem auto 0;} .author-posts h2{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border);} .author-posts__empty{font-family:var(--serif);color:var(--text-muted);font-style:italic;} .author-posts__list{list-style:none;padding:0;margin:0;} .author-posts__list li{padding:.9rem 0;border-bottom:1px solid var(--border);} .author-posts__list li:last-child{border-bottom:0;} .author-posts__list a{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--text);text-decoration:none;line-height:1.3;display:block;} .author-posts__list a:hover{color:var(--accent);} .author-posts__type{display:block;font-family:var(--sans);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:.25rem;} /* Authors index */ .author-grid{list-style:none;max-width:760px;margin:0 auto;padding:0;} .author-card{display:flex;gap:1.25rem;align-items:flex-start;padding:1.75rem 0;border-bottom:1px solid var(--border);} .author-card:last-child{border-bottom:0;} .author-card__body{flex:1;} .author-card__name{font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.2;margin-bottom:.2rem;} .author-card__name a{color:inherit;text-decoration:none;} .author-card__name a:hover{color:var(--accent);} .author-card__role{font-family:var(--sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.6rem;} .author-card__bio{font-size:1rem;line-height:1.55;color:var(--text-muted);} @media (max-width:600px){.author-profile{flex-direction:column;text-align:center;align-items:center;}.author-links{justify-content:center;}} /* --- Homepage post cards: thumbnail + text --- */ .post-card a { display: flex; gap: 1.5rem; align-items: center; } .post-card__thumb { flex: 0 0 168px; aspect-ratio: 4 / 3; background: #f6f5ef; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; } .post-card a:hover .post-card__thumb img { transform: scale(1.04); } .post-card__body { flex: 1 1 auto; min-width: 0; } @media (max-width: 620px) { .post-card a { flex-direction: column; align-items: stretch; gap: 1rem; } .post-card__thumb { width: 100%; flex: none; aspect-ratio: 16 / 9; } } .site-footer__credit { font-size: 0.72rem; color: var(--text-faint); margin-top: 0.5rem; opacity: 0.85; } .site-footer__credit a { color: inherit; text-decoration: underline; }