/*
Theme Name: PeptideWikis Archive
Template: twentytwentyfive
Description: "Archive" — the PeptideWikis reference look: paper, teal ink, Source Serif 4 + Inter. Design plan 2026-09-29.
Version: 0.4.0
Requires at least: 6.7
License: GNU General Public License v2 or later
Text Domain: peptidewikis
*/

/* ---------- tokens ----------
   Every colour, shadow and radius lives in theme.json (Site Editor → Styles changes the light look; a file in
   styles/ is a whole new look). Dark mode swaps in the settings.custom.dark values below; nothing here is a raw colour. */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--base: var(--wp--custom--dark--base);
		--wp--preset--color--contrast: var(--wp--custom--dark--contrast);
		--wp--preset--color--accent: var(--wp--custom--dark--accent);
		--wp--preset--color--tint: var(--wp--custom--dark--tint);
		--wp--preset--color--rule: var(--wp--custom--dark--rule);
		--wp--preset--color--muted: var(--wp--custom--dark--muted);
		--wp--preset--color--surface: var(--wp--custom--dark--surface);
		--wp--preset--color--on-accent: var(--wp--custom--dark--on-accent);
		--wp--preset--color--footer: var(--wp--custom--dark--footer);
		--wp--preset--color--footer-text: var(--wp--custom--dark--footer-text);
		--wp--preset--color--footer-muted: var(--wp--custom--dark--footer-muted);
		--wp--preset--color--footer-rule: var(--wp--custom--dark--footer-rule);
		--wp--custom--ev--lab--bg: var(--wp--custom--dark--ev--lab--bg);
		--wp--custom--ev--lab--fg: var(--wp--custom--dark--ev--lab--fg);
		--wp--custom--ev--animal--bg: var(--wp--custom--dark--ev--animal--bg);
		--wp--custom--ev--animal--fg: var(--wp--custom--dark--ev--animal--fg);
		--wp--custom--ev--human--bg: var(--wp--custom--dark--ev--human--bg);
		--wp--custom--ev--human--fg: var(--wp--custom--dark--ev--human--fg);
		--wp--custom--ev--rct--bg: var(--wp--custom--dark--ev--rct--bg);
		--wp--custom--ev--rct--fg: var(--wp--custom--dark--ev--rct--fg);
		--wp--custom--ev--approved--bg: var(--wp--custom--dark--ev--approved--bg);
		--wp--custom--ev--approved--fg: var(--wp--custom--dark--ev--approved--fg);
	}
}

/* ---------- reading ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.entry-content p, .wp-block-post-content p, .wp-block-post-content li { hyphens: auto; }
.wp-block-post-content > * { max-width: min(680px, 100%); }
.wp-block-post-content > figure.wp-block-table { max-width: min(820px, 100%); }
.wp-block-post-content > p.answer {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}
.wp-block-post-content a[href*="pubmed"], .wp-block-post-content a[href*="clinicaltrials"],
.wp-block-post-content a[href*="doi.org"], .wp-block-post-content a[href*="fda.gov"], .wp-block-post-content a[href*="usada"] {
	text-decoration-thickness: 1px; text-underline-offset: 2px;
}
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }

/* ---------- tables: scroll inside, never the page; a shadow shows there is more ---------- */
figure.wp-block-table {
	margin-block: 2rem;
	overflow-x: auto;
	background:
		linear-gradient(to right, var(--wp--preset--color--base) 30%, transparent) left / 40px 100% no-repeat local,
		linear-gradient(to left, var(--wp--preset--color--base) 30%, transparent) right / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, var(--wp--custom--shadow--scroll), transparent) left / 12px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, var(--wp--custom--shadow--scroll), transparent) right / 12px 100% no-repeat scroll;
}
figure.wp-block-table table {
	width: 100%; border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small); line-height: 1.5;
	font-variant-numeric: tabular-nums;
}
figure.wp-block-table th, figure.wp-block-table td {
	border: 0; border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: .65rem .85rem; text-align: left; vertical-align: top;
}
figure.wp-block-table thead th {
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base);
	font-weight: 600; border-bottom: 0;
}
figure.wp-block-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--wp--preset--color--tint) 55%, transparent); }
figure.wp-block-table td:first-child { font-weight: 600; }
@media (max-width: 600px) {
	figure.wp-block-table table { min-width: 34rem; }
	figure.wp-block-table.status-box table { min-width: 0; }
}

/* ---------- status box: the first thing after the answer ---------- */
figure.wp-block-table.status-box {
	background: var(--wp--preset--color--tint);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--small) var(--wp--custom--radius--small) 0;
	padding: .35rem .5rem .5rem;
}
figure.wp-block-table.status-box thead th {
	background: transparent; color: var(--wp--preset--color--muted);
	font-weight: 600; font-size: .8125rem;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.status-box tbody tr:nth-child(even) td { background: transparent; }
.status-box td:first-child { width: 38%; color: var(--wp--preset--color--muted); font-weight: 500; }
.status-box tr:last-child td { border-bottom: 0; font-family: var(--wp--preset--font-family--mono); font-size: .8125rem; }

/* ---------- comparison tables: first column stays while the rest scrolls ---------- */
.compare-table th:first-child, .compare-table td:first-child {
	position: sticky; left: 0; z-index: 1; background: var(--wp--preset--color--base);
}
.compare-table thead th:first-child { background: var(--wp--preset--color--accent); }

/* ---------- evidence badges: one hue, darker = stronger, dots + words (never colour alone) ---------- */
.ev {
	display: inline-flex; align-items: center; gap: .4em;
	font-family: var(--wp--preset--font-family--mono); font-size: .75rem; font-weight: 400;
	line-height: 1.3; padding: .15rem .5rem; border-radius: var(--wp--custom--radius--small);
	white-space: nowrap; letter-spacing: .01em;
}
.ev::before { font-size: .6rem; letter-spacing: .12em; flex: none; }
.ev-lab      { background: var(--wp--custom--ev--lab--bg);      color: var(--wp--custom--ev--lab--fg); }
.ev-animal   { background: var(--wp--custom--ev--animal--bg);   color: var(--wp--custom--ev--animal--fg); }
.ev-human    { background: var(--wp--custom--ev--human--bg);    color: var(--wp--custom--ev--human--fg); }
.ev-rct      { background: var(--wp--custom--ev--rct--bg);      color: var(--wp--custom--ev--rct--fg); }
.ev-approved { background: var(--wp--custom--ev--approved--bg); color: var(--wp--custom--ev--approved--fg); }
.ev-lab::before      { content: "●○○○○"; }
.ev-animal::before   { content: "●●○○○"; }
.ev-human::before    { content: "●●●○○"; }
.ev-rct::before      { content: "●●●●○"; }
.ev-approved::before { content: "●●●●●"; }

/* ---------- key points ---------- */
.key-points {
	background: var(--wp--preset--color--tint); border-radius: var(--wp--custom--radius--small);
	padding: 1.1rem 1.5rem 1.2rem; margin-block: 2rem;
}
.key-points > p:first-child { margin: 0 0 .5rem; }
.key-points > p:first-child strong { font-family: var(--wp--preset--font-family--heading); font-size: 1.1875rem; font-weight: 600; }
.key-points ul { margin: 0; padding-left: 1.1rem; }
.key-points li + li { margin-top: .45rem; }
.key-points li::marker { color: var(--wp--preset--color--accent); }

/* ---------- FAQ: open, quiet, divided (no accordion: answers stay visible) ---------- */
.faq h3 {
	font-size: 1.125rem; margin-top: 0; padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
.faq h3 + p { margin-top: .4rem; }
.faq > h2 + h3 { border-top: 0; }

/* ---------- references and change log ---------- */
.references, .changelog { font-size: var(--wp--preset--font-size--small); line-height: 1.55; color: var(--wp--preset--color--muted); }
.references h2, .changelog h2 { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); }
.references ol { padding-left: 1.4rem; }
.references li { margin-bottom: .5rem; overflow-wrap: anywhere; }
.references li::marker { font-family: var(--wp--preset--font-family--mono); font-size: .8em; }
.changelog { border-top: 1px solid var(--wp--preset--color--rule); margin-top: 2.5rem; }

/* ================= site chrome (week 2) ================= */
.wp-site-blocks { padding-top: 0; }
.eyebrow, .eyebrow a {
	font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; margin: 0 0 .5rem;
}
.section-title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 .5rem; }
.section-lede { color: var(--wp--preset--color--muted); margin: 0 0 2rem; max-width: 42rem; margin-inline-start: 0 !important; }
.hero > *, .band > * { margin-inline-start: 0 !important; }

/* header */
.site-header { border-bottom: 1px solid var(--wp--preset--color--rule); background: var(--wp--preset--color--base); }
.site-header__row { padding-block: 1rem; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--wp--preset--color--accent); text-decoration: none; }
.brand__name { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; color: var(--wp--preset--color--contrast); }
.site-nav { font-size: .9375rem; gap: 1.75rem; }
.site-nav a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.site-nav a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; text-underline-offset: 4px; }
.site-header__nav { gap: 1.25rem; align-items: center; }
.site-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--small); padding: .4rem; }
.site-search .wp-block-search__input { border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--small); background: var(--wp--preset--color--base); color: inherit; }

/* homepage */
.home > * + * { margin-block-start: 0; }
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__title { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 1.25rem; font-weight: 600; }
.hero__lede { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--muted); max-width: 36rem; margin: 0 0 2rem; }
.hero__search { max-width: 36rem; }

/* the specimen card: one real entry, its amino-acid chain drawn as beads */
.specimen { margin: 0; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--rule); border-radius: 8px; padding: 1.75rem 1.75rem 1.5rem; box-shadow: var(--wp--custom--shadow--card); }
.specimen__class { margin: 0; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--accent); }
.specimen__name { margin: .15rem 0 1.25rem; font-family: var(--wp--preset--font-family--heading); font-size: 2.75rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: .3rem; }
.chain li { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--wp--preset--font-family--mono); font-size: clamp(.625rem, .5rem + .25vw, .75rem); background: var(--wp--preset--color--tint); color: var(--wp--preset--color--accent); border: 1.5px solid var(--wp--preset--color--accent); }
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: .3rem; border-top: 1.5px solid var(--wp--preset--color--accent); }
.chain li:first-child { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
@media (max-width: 520px) { .chain { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: .5rem; } .chain li:nth-child(8)::after { display: none; } }
.specimen__caption { font-size: .8125rem; color: var(--wp--preset--color--muted); margin: .9rem 0 1.25rem; }
.specimen__facts { margin: 0; border-top: 1px solid var(--wp--preset--color--rule); }
.specimen__facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); font-size: .9375rem; }
.specimen__facts dt { color: var(--wp--preset--color--muted); }
.specimen__facts dd { margin: 0; font-weight: 600; text-align: right; }
.specimen__link { display: inline-block; margin-top: 1.1rem; font-weight: 600; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero__search .wp-block-search__inside-wrapper { border: 1px solid var(--wp--preset--color--rule); border-radius: 6px; background: var(--wp--preset--color--surface); padding: .35rem; box-shadow: var(--wp--custom--shadow--field); }
.hero__search .wp-block-search__input { border: 0; font-size: 1.0625rem; padding: .7rem .9rem; background: transparent; color: var(--wp--preset--color--contrast); }
.hero__search .wp-block-search__button { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); border-radius: 4px; padding: .7rem 1.4rem; font-weight: 600; margin-left: .35rem; }
.band { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--wp--preset--color--rule); }
.band--evidence { background: var(--wp--preset--color--tint); border-top: 0; border-radius: 6px; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.band__link { margin-top: 2rem; font-weight: 600; }
.band__link a { text-decoration: none; }

.scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.scale li { background: var(--wp--preset--color--base); border-radius: var(--wp--custom--radius--small); padding: 1rem 1rem 1.1rem; border: 1px solid var(--wp--preset--color--rule); }
.scale p { font-size: .875rem; line-height: 1.5; margin: .75rem 0 0; color: var(--wp--preset--color--muted); }

.class-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .75rem; }
.class-grid li { border: 1px solid var(--wp--preset--color--rule); border-radius: 6px; overflow: hidden; }
.class-grid li { margin: 0; }
.class-grid a { display: block; height: 100%; box-sizing: border-box; padding: 1.25rem 1.35rem 1.4rem; background: var(--wp--preset--color--base); text-decoration: none; color: var(--wp--preset--color--muted); font-size: .875rem; line-height: 1.5; transition: background .15s; }
.class-grid a:hover { background: var(--wp--preset--color--tint); }
.class-grid strong { display: block; margin-bottom: .4rem; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--heading); font-size: 1.1875rem; font-weight: 600; line-height: 1.25; }

.card-grid { gap: 1.5rem !important; }
.entry-card { border-top: 2px solid var(--wp--preset--color--accent); padding-top: 1rem; }
.entry-card__title { font-size: 1.3125rem; line-height: 1.25; margin: .25rem 0 .6rem; }
.entry-card__title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.entry-card__title a:hover { color: var(--wp--preset--color--accent); }
.entry-card__excerpt { font-size: .9375rem; line-height: 1.55; color: var(--wp--preset--color--muted); }
.entry-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.entry-card__date { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--wp--preset--color--muted); }
.entry-card__date::before { content: "Updated "; }

.method { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.method strong { display: block; color: var(--wp--preset--color--contrast); line-height: 1.3; font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; }
.method strong::before { content: ""; display: block; width: 2rem; height: 2px; background: var(--wp--preset--color--accent); margin-bottom: 1rem; }
.method li { color: var(--wp--preset--color--muted); font-size: .9375rem; line-height: 1.6; margin: 0; }

/* article */
.article { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.article__head { margin-bottom: 2rem; }
.article__title { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1.25rem; }
.article__meta { gap: .35rem 1.1rem; font-size: .875rem; color: var(--wp--preset--color--muted); padding-bottom: 1.5rem; border-bottom: 1px solid var(--wp--preset--color--rule); }
.article__meta p, .article__meta .wp-block-post-date { margin: 0; }
.article__published::before { content: "Published "; }
.article__updated::before { content: "Updated "; }
.article__foot { margin-top: 3rem; }
.article__disclaimer { font-size: .875rem; line-height: 1.6; color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--rule); border-radius: var(--wp--custom--radius--small); padding: 1rem 1.25rem; }
.related { margin-top: 4rem; padding-block: 3rem; border-top: 1px solid var(--wp--preset--color--rule); }

/* footer */
.site-footer { background: var(--wp--preset--color--footer); color: var(--wp--preset--color--footer-text); margin-top: 4rem; padding-block: 3.5rem 2rem; }
.site-footer a { color: var(--wp--preset--color--footer-text); }
.site-footer .brand, .site-footer .brand__name { color: var(--wp--preset--color--footer-text); }
.site-footer__lede { color: var(--wp--preset--color--footer-text); max-width: 26rem; margin-top: 1rem; }
.site-footer__disclaimer { font-size: .8125rem; line-height: 1.6; color: var(--wp--preset--color--footer-muted); max-width: 26rem; }
.site-footer__title { font-family: var(--wp--preset--font-family--body); font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--footer-text); margin: 0 0 .75rem; }
.site-footer__links { list-style: none; padding: 0; margin: 0; font-size: .9375rem; line-height: 2; }
.site-footer__links a { text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; }
.site-footer__base { border-top: 1px solid var(--wp--preset--color--footer-rule); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .8125rem; color: var(--wp--preset--color--footer-muted); }

@media (max-width: 900px) {
	.scale { grid-template-columns: 1fr 1fr; }
	.method { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
	.scale { grid-template-columns: 1fr; }
	.site-header .site-search { display: none; }
	.brand__name { font-size: 1.1875rem; }
}
/* ---------- hubs: category pages, search results, 404 ---------- */
.hub { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.hub__head { margin-bottom: 2.5rem; }
.hub__head > * { margin-inline-start: 0 !important; }
.hub__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.05; margin: 0 0 1rem; }
.hub__lede, .hub__lede p { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--muted); max-width: 40rem; margin: 0 0 1.5rem; }
.hub__empty { color: var(--wp--preset--color--muted); padding: 1.5rem 0; border-top: 1px solid var(--wp--preset--color--rule); }
.pager { margin-top: 2.5rem; font-weight: 600; }
.pager a { text-decoration: none; }
.entry-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--wp--preset--color--accent); }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 7.5rem; gap: 2rem; align-items: start; padding: 1.35rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); }
.entry-row > * { margin: 0 !important; }
.entry-row__title { font-size: 1.375rem; line-height: 1.2; }
.entry-row__title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.entry-row__title a:hover { color: var(--wp--preset--color--accent); }
.entry-row__excerpt { font-size: .9375rem; line-height: 1.55; color: var(--wp--preset--color--muted); }
.entry-row__excerpt .wp-block-post-excerpt__more-text { display: none; }
.entry-row__date { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; color: var(--wp--preset--color--muted); text-align: right; }
.entry-row__date::before { content: "Updated "; }
@media (max-width: 800px) { .entry-row { grid-template-columns: 1fr; gap: .4rem; } .entry-row__date { text-align: left; } }

/* motion support: pre-paint hide of the hero card (only while js-motion is set), reading bar */
.js-motion .specimen { visibility: hidden; }
.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }