/**
* Page-specific CSS, copied verbatim from each approved static page and
* kept organized by page/section below. Nothing here is redesigned —
* only wired to dynamic WordPress content in the corresponding template.
*
* @package PenScholar_Journals
*/
/* ============================================================
HOMEPAGE — Hero
============================================================ */
.hero { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 6rem); }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); letter-spacing: -0.02em; line-height: 1.04; max-width: 14ch; }
.hero-lede { margin-top: 1.5rem; font-size: 1.15rem; color: var(--charcoal); max-width: 32rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.25rem; }
.hero-status-note { margin-top: 1.25rem; font-size: 0.85rem; color: var(--muted); }
.hero-visual { position: relative; height: clamp(300px, 32vw, 440px); }
.cover-plate { position: absolute; border: 1px solid var(--border); }
.cover-plate--back { width: 58%; height: 66%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-6deg); z-index: 1; }
.cover-plate--back .plate-rule { height: 1px; background: var(--border); margin: 0 1.75rem; }
.cover-plate--back .plate-rule + .plate-rule { margin-top: 0.7rem; width: 50%; }
.cover-plate--mid { width: 56%; height: 76%; left: 15%; top: 0; background: #E7E3DA; transform: rotate(4deg); z-index: 2; padding: 1.5rem; }
.cover-plate--mid .plate-rule { height: 1px; background: rgba(18,32,60,0.18); margin-bottom: 0.75rem; }
.cover-plate--mid .plate-rule.short { width: 45%; }
.cover-plate--front {
width: 56%; height: 86%; right: 0; bottom: 0; z-index: 3;
background: var(--navy); color: var(--on-navy); border-color: var(--navy);
display: flex; flex-direction: column; justify-content: space-between;
padding: clamp(1.25rem, 2.5vw, 2rem);
}
.plate-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-light); }
.plate-mark { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; }
.plate-rule-light { height: 1px; background: rgba(234,240,248,0.35); margin: 1rem 0 0.75rem; }
.plate-caption { font-size: 0.78rem; color: var(--on-navy-muted); letter-spacing: 0.02em; }
/* ============================================================
HOMEPAGE — Featured Journals
============================================================ */
.journals-directory { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.journal-feature { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; }
.journal-feature-index { font-family: var(--font-serif); font-size: 3rem; line-height: 1; color: var(--border-strong); }
.journal-tag { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem; }
.journal-feature h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0.85rem; }
.journal-feature p { color: var(--muted); max-width: 42ch; }
.journal-feature .meta-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 1.25rem 0 1.4rem; font-size: 0.8rem; color: var(--muted); }
.journal-list li { border-top: 1px solid var(--border); }
.journal-list li:last-child { border-bottom: 1px solid var(--border); }
.journal-list-link { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.15rem 0; }
.journal-list-link span { font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); }
.journal-list-link small { flex-shrink: 0; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.view-all-wrap { margin-top: 3rem; }
/* ============================================================
HOMEPAGE — Research Areas (Browse by Subject)
============================================================ */
.areas-split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.areas-col-title { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.areas-linklist li { border-top: 1px solid var(--border); }
.areas-linklist li:last-child { border-bottom: 1px solid var(--border); }
.areas-linklist a { display: block; padding: 1.1rem 0; font-family: var(--font-serif); font-size: 1.3rem; color: var(--navy); }
.areas-divider { display: none; }
/* ============================================================
HOMEPAGE — Featured Research / Latest Articles
============================================================ */
.research-feature { padding-bottom: 2.5rem; border-bottom: 1px solid var(--border); margin-bottom: 2.5rem; }
.research-feature-type { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem; }
.research-feature-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 24ch; margin-bottom: 0.75rem; }
.research-feature-byline { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
.research-feature-excerpt { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--charcoal); max-width: 52ch; border-left: 3px solid var(--navy); padding-left: 1.5rem; margin-bottom: 1.5rem; line-height: 1.6; }
.research-list { display: grid; gap: 0; }
.research-list li { display: grid; grid-template-columns: 1fr; gap: 0.3rem; padding: 1.5rem 0; border-top: 1px solid var(--border); }
.research-list li:last-child { border-bottom: 1px solid var(--border); }
.research-list-type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.research-list h3 { font-size: 1.1rem; font-weight: 500; margin-top: 0.3rem; }
.research-list p { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }
/* ============================================================
HOMEPAGE — Current Issue
============================================================ */
.issue-layout { display: grid; gap: 2.75rem; grid-template-columns: 1fr; }
/* Listing card for an issue. The border was a near-transparent light value
left over from when this card only ever sat on navy, so on the ivory
pages it had no visible edge at all; and the fixed 3/4 cover ratio left a
large empty band between the title and the footer. It now takes a real
hairline and sizes to its content, with a floor so short cards in a grid
still line up. */
.issue-cover-plate {
max-width: 300px; min-height: 260px; background: var(--surface); color: var(--navy);
border: 1px solid var(--border); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.section--navy .issue-cover-plate,
.section--deep .issue-cover-plate { border-color: rgba(239, 237, 230, 0.18); }
.cover-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
/* The plate is a light card that can sit inside a navy band, so it has to
win against the band-level "headings go light on navy" rule. */
.issue-cover-plate .cover-journal { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; line-height: 1.25; margin-top: 0.9rem; color: var(--navy); }
.cover-journal { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25; margin-top: 0.9rem; }
.cover-rule { height: 1px; background: var(--border); margin: 1.25rem 0; }
.cover-volume { font-size: 0.85rem; color: var(--muted); }
.issue-date { color: var(--on-navy-muted); font-size: 0.9rem; margin-top: 0.5rem; }
.issue-intro { margin-top: 1.25rem; max-width: 42ch; color: var(--on-navy-muted); }
.issue-articles-heading { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy); margin: 2rem 0 1rem; }
.issue-article-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid rgba(234,240,248,0.16); }
.issue-article-list li:last-child { border-bottom: 1px solid rgba(234,240,248,0.16); }
.issue-article-list a { font-family: var(--font-serif); font-size: 1.05rem; color: var(--on-navy); }
.issue-article-list span { flex-shrink: 0; color: var(--on-navy-muted); font-size: 0.85rem; }
.issue-content .btn { margin-top: 2rem; }
/* ============================================================
HOMEPAGE — Publishing Standards
============================================================ */
.standards-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.standards-intro p { color: var(--muted); margin-top: 1rem; max-width: 34ch; }
.standards-list li { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid var(--border); }
.standards-list li:last-child { border-bottom: 1px solid var(--border); }
.standards-index { font-family: var(--font-serif); font-size: 1.5rem; color: var(--blue); }
.standards-list h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
/* The "read the policy" link under each pillar is a standalone target, not
a link inside a sentence, so it gets a real tap height on phones. */
.standards-list .text-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) { .standards-list .text-link { min-height: 0; } }
.standards-list p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0.6rem; }
/* ============================================================
HOMEPAGE — Call for Papers (empty state)
============================================================ */
.cfp-feature,
.cfp-empty { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.75rem 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.cfp-feature .cfp-empty-lead,
.cfp-empty-lead { font-family: var(--font-serif); font-size: 1.4rem; color: var(--navy); }
.cfp-feature p:not(.cfp-empty-lead),
.cfp-empty p:not(.cfp-empty-lead) { color: var(--muted); max-width: 48ch; }
/* ============================================================
HOMEPAGE — Authors / Reviewers
============================================================ */
.authors-split { display: grid; grid-template-columns: 1fr; }
.authors-half { padding: 2.75rem 0; }
.authors-half--accent { background: var(--bg-tint); padding-left: 1.5rem; padding-right: 1.5rem; margin: 0 -1.5rem; }
.authors-half h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.authors-half p { color: var(--muted); margin-bottom: 1.5rem; max-width: 32ch; }
/* ============================================================
HOMEPAGE — Resources
============================================================ */
.resource-directory { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border); }
/* min-width:0: a grid item's default min-width:auto lets a long label
(e.g. "Author Guidelines") force its column past its fair 1fr share
and overflow the viewport on narrow screens instead of wrapping. */
.resource-directory li { border-bottom: 1px solid var(--border); min-width: 0; }
.resource-directory a { display: block; padding: 1.15rem 1.25rem 1.15rem 0; font-size: 0.98rem; font-weight: 500; color: var(--navy); }
/* ============================================================
HOMEPAGE — Announcements / Final CTA
============================================================ */
.announcements-empty { color: var(--muted); max-width: 46rem; }
.announcement-item { padding: 1.25rem 0; border-top: 1px solid var(--border); }
.announcement-item:first-child { border-top: none; }
.announcement-item .announcement-date { font-size: 0.78rem; color: var(--muted); }
.announcement-item h3 { font-size: 1.02rem; margin-top: 0.25rem; }
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(2.1rem, 4.2vw, 3rem); }
.final-cta .section-intro { margin: 1.1rem auto 2.25rem; }
.final-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* ============================================================
CALL FOR PAPERS — "How It Works" stepper + "Preparing to
Submit?" resource grid. Section-scoped container (narrower than
the sitewide .container-wide) so this content doesn't stretch
thin across a very wide viewport with empty space beside it.
============================================================ */
.cfp-process-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.workflow-stepper { display: flex; flex-direction: column; margin: 24px 0 32px; }
.workflow-step { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; border-radius: 10px; border: 1px solid rgba(234,240,248,0.18); background: rgba(234,240,248,0.05); }
.workflow-step-num { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--blue-light); flex-shrink: 0; }
.workflow-step-title { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--on-navy); line-height: 1.35; }
/* Vertical connector — mobile/default: a short line + chevron between
stacked steps. Deliberately a plain line, not a circular arrow badge. */
.workflow-connector { align-self: center; width: 1px; height: 24px; margin: 2px 0 2px 30px; background: rgba(234,240,248,0.28); position: relative; }
.workflow-connector::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 6px; border-right: 1px solid rgba(234,240,248,0.55); border-bottom: 1px solid rgba(234,240,248,0.55); transform: translateX(-50%) rotate(45deg); }
.workflow-intro { margin-top: 1rem; max-width: 760px; line-height: 1.65; }
.section-gap-lg { margin-top: 40px; }
.resource-grid { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 850px; margin-top: 24px; }
.resource-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 50px; padding: 14px 16px; border-radius: 8px; border: 1px solid rgba(234,240,248,0.18); background: rgba(234,240,248,0.05); font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--on-navy); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.resource-link svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.resource-link:hover, .resource-link:focus-visible { background: rgba(234,240,248,0.1); border-color: rgba(234,240,248,0.34); }
.resource-link:hover svg, .resource-link:focus-visible svg { transform: translateX(3px); }
.resource-link:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
/* The stepper's connectors are written as bare inline spans in editable
region content, and wpautop wraps any such run in a before it
reaches the page. That
then becomes the flex/grid child instead of
the connector, which is why the arrows sat at the top of the row rather
than centred between the boxes. Style the wrapper as the connector's
own cell so the markup works either way. */
.workflow-stepper > p { display: flex; align-items: center; margin: 0; }
.workflow-stepper > p:empty { display: none; }
@media (min-width: 640px) {
.workflow-stepper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.workflow-connector { display: none; }
.workflow-stepper > p { display: none; }
.section-gap-lg { margin-top: 56px; }
.resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.workflow-stepper { display: flex; flex-direction: row; align-items: stretch; gap: 0; }
.workflow-step { flex: 1 1 0; }
.workflow-step-title { white-space: normal; }
.workflow-stepper > p { display: flex; align-items: center; flex-shrink: 0; margin: 0; }
.workflow-connector { display: block; align-self: center; width: 32px; height: 1px; margin: 0 10px; flex-shrink: 0; }
.workflow-connector::after { left: auto; right: 0; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }
}
/* ============================================================
Tablet / Desktop (homepage)
============================================================ */
@media (min-width: 640px) {
.areas-split { grid-template-columns: repeat(2, 1fr); }
.resource-directory { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 1.05fr 0.95fr; }
.journals-directory { grid-template-columns: 1.15fr 0.85fr; }
.journal-feature { padding-right: 2.5rem; border-right: 1px solid var(--border); }
.areas-split { grid-template-columns: 1fr auto 1fr; gap: 3.5rem; }
.areas-divider { display: block; width: 1px; background: var(--border); }
.issue-layout { grid-template-columns: 0.8fr 1.2fr; }
.standards-layout { grid-template-columns: 0.75fr 1.25fr; gap: 3.5rem; }
.authors-split { grid-template-columns: 1fr 1px 1fr; align-items: stretch; }
.authors-divider { background: var(--border); }
.authors-half { padding: 1rem 3rem; }
.authors-half:first-child { padding-left: 0; }
.authors-half--accent { margin: 0; padding-right: 3rem; }
}
/* ============================================================
DIRECTORY-FAMILY PAGES (Journals, Articles, Current Issues,
Archives) — a larger .page-hero variant than the documentation
pages' default (core style.css), plus finder/filter and
featured-record patterns shared across these listing pages.
============================================================ */
.page-hero--large { padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
.page-hero--large .page-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.page-hero--large h1 { font-size: clamp(2.25rem, 4.6vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.06; max-width: none; }
.page-hero--large .page-hero-lede { margin-top: 1.1rem; font-size: 1.1rem; color: var(--charcoal); max-width: 34rem; }
.page-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.catalogue-visual { position: relative; height: clamp(160px, 20vw, 240px); }
.catalogue-plate { position: absolute; top: 0; width: 88px; height: 100%; border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; padding: 1rem 0.85rem; }
.catalogue-plate .plate-rule { height: 1px; background: currentColor; opacity: 0.35; }
.catalogue-plate:nth-child(1) { left: 0%; background: var(--bg-tint); color: var(--muted); transform: rotate(-5deg); z-index: 1; }
.catalogue-plate:nth-child(2) { left: 17%; background: #E7E3DA; color: var(--navy); transform: rotate(3deg); z-index: 2; }
.catalogue-plate:nth-child(3) { left: 34%; background: var(--blue); color: var(--on-navy); transform: rotate(-2deg); z-index: 3; }
.catalogue-plate:nth-child(4) { left: 51%; background: var(--navy); color: var(--on-navy); transform: rotate(4deg); z-index: 4; }
.journal-finder { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-tint); padding: 1.75rem 0; }
.finder-heading { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.finder-row { display: flex; flex-direction: column; gap: 1.25rem; }
/* The vertical padding lives on the input rather than the wrapper, so the
whole 52px control is the tap target instead of just the 28px field
inside it. Visually identical. */
.finder-search { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 1rem; max-width: 30rem; }
.finder-search svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.finder-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 0.95rem; padding: 0.75rem 0; }
.finder-search input::placeholder { color: var(--muted); }
.finder-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-btn { padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 500; border: 1px solid var(--border); border-radius: 999px; color: var(--charcoal); background: var(--surface); transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; }
.filter-btn:hover { border-color: var(--navy); }
.filter-btn.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.directory-empty { padding: 3rem 0; color: var(--muted); }
.mini-cover { flex-shrink: 0; width: 52px; height: 68px; background: var(--navy); color: var(--on-navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.15rem; border: 1px solid rgba(234,240,248,0.15); }
.featured-journal { display: grid; grid-template-columns: 1fr; gap: 2rem; background: var(--navy); color: var(--on-navy); padding: clamp(1.75rem, 4vw, 3rem); margin-bottom: 3rem; }
.featured-cover { width: 100%; max-width: 220px; aspect-ratio: 3 / 4; background: var(--surface); color: var(--navy); border: 1px solid rgba(234,240,248,0.18); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.featured-cover .cover-eyebrow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.featured-cover .cover-mark { font-family: var(--font-serif); font-size: 2.75rem; line-height: 1; }
.featured-cover .cover-rule { height: 1px; background: var(--border); margin-bottom: 0.75rem; }
.featured-cover .cover-label { font-size: 0.8rem; color: var(--muted); }
.featured-details h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0.85rem; }
.featured-details p { color: var(--on-navy-muted); max-width: 46ch; margin-bottom: 1.25rem; }
.featured-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.8rem; color: var(--on-navy-muted); margin-bottom: 1.75rem; }
.featured-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.journal-row { display: grid; grid-template-columns: auto auto 1fr; gap: 1.25rem; align-items: start; padding: 1.75rem 0; border-top: 1px solid var(--border); }
.journal-row:last-child { border-bottom: 1px solid var(--border); }
.row-index { font-family: var(--font-serif); font-size: 1.75rem; color: var(--border-strong); line-height: 1; padding-top: 0.15rem; }
.row-body h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.row-body p { color: var(--muted); max-width: 50ch; margin-bottom: 0.85rem; }
.row-tags { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.9rem; }
.row-tags span:not(:last-child)::after { content: "\00b7"; margin-left: 0.9rem; color: var(--border); }
.why-explore p { color: var(--muted); margin-top: 1rem; }
@media (min-width: 640px) {
.finder-row { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 1024px) {
.page-hero--large .page-hero-grid { grid-template-columns: 1.3fr 0.7fr; }
.featured-journal { grid-template-columns: auto 1fr; align-items: center; }
}
/* ============================================================
INDIVIDUAL JOURNAL — masthead, sub-navigation, sections
============================================================ */
.masthead { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
.masthead-grid { display: grid; gap: 2.5rem; align-items: center; }
.masthead h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -0.02em; line-height: 1.06; }
.masthead-lede { margin-top: 1.1rem; font-size: 1.1rem; color: var(--charcoal); max-width: 40ch; }
.masthead-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; }
.masthead-meta dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.masthead-meta dd { font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); margin: 0.2rem 0 0; }
.masthead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.journal-cover { max-width: 300px; aspect-ratio: 3 / 4; background: var(--navy); color: var(--on-navy); border: 1px solid rgba(18,32,60,0.1); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto; }
.journal-cover .cover-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); }
.journal-cover .cover-mark { font-family: var(--font-serif); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; margin-top: 0.75rem; }
.journal-cover .cover-rule { height: 1px; background: rgba(234,240,248,0.35); margin-bottom: 0.75rem; }
.journal-cover .cover-label { font-size: 0.85rem; color: var(--on-navy-muted); }
.journal-cover .cover-publisher { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-muted); margin-top: 1.25rem; }
.journal-subnav { position: sticky; top: var(--header-h); z-index: 400; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.journal-subnav-scroll { display: flex; gap: 1.75rem; overflow-x: auto; scrollbar-width: none; }
.journal-subnav-scroll::-webkit-scrollbar { display: none; }
.journal-subnav a { display: block; padding: 0.9rem 0.1rem; font-size: 0.85rem; font-weight: 500; color: var(--muted); white-space: nowrap; border-bottom: 2px solid transparent; }
.journal-subnav a:hover { color: var(--navy); }
.journal-subnav a.is-active { color: var(--navy); border-color: var(--blue); font-weight: 600; }
.about-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.about-layout p { max-width: 68ch; color: var(--charcoal); }
.about-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.about-meta dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.about-meta dd { font-size: 0.95rem; color: var(--navy); margin: 0.25rem 0 0; }
.scope-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 1.75rem; }
.scope-tags span { font-size: 0.82rem; font-weight: 500; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 999px; color: var(--charcoal); background: var(--surface); }
.scope-body p { max-width: 68ch; color: var(--charcoal); margin-bottom: 1rem; }
.scope-body p:last-child { margin-bottom: 0; }
.state-block { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.state-lead { font-family: var(--font-serif); font-size: 1.3rem; color: var(--navy); }
.state-block p:not(.state-lead) { color: var(--muted); max-width: 52ch; }
.state-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
/* The same empty-state block is used inside the navy bands, where its
default navy lead was invisible (1.00:1) and its muted body text read at
2.78:1. On a dark ground it takes the on-navy pair instead. */
.section--navy .state-lead,
.section--deep .state-lead { color: var(--on-navy); }
.section--navy .state-block p:not(.state-lead),
.section--deep .state-block p:not(.state-lead) { color: var(--on-navy-muted); }
.section--navy .state-block,
.section--deep .state-block { border-top-color: rgba(239, 237, 230, 0.22); border-bottom-color: rgba(239, 237, 230, 0.22); }
.policy-block { display: grid; gap: 2rem; grid-template-columns: 1fr; }
/* The six editorial policies now share one band, separated by hairlines
instead of by six alternating full-height sections. */
.policy-stack .policy-block { padding: 2.25rem 0; border-top: 1px solid var(--border); }
.policy-stack .policy-block:first-child { padding-top: 0; border-top: none; }
.policy-stack .policy-block:last-child { padding-bottom: 0; }
.policy-block h3 { font-size: 1.35rem; }
.policy-links { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.policy-block p { color: var(--muted); max-width: 62ch; margin-bottom: 1rem; }
.policy-block p:last-of-type { margin-bottom: 1.5rem; }
.archive-year { font-family: var(--font-serif); font-size: 1.6rem; color: var(--navy); margin-bottom: 0.5rem; }
.related-note { color: var(--muted); max-width: 56ch; }
@media (min-width: 1024px) {
.masthead-grid { grid-template-columns: 1.2fr 0.8fr; }
.issue-layout.issue-layout--journal { grid-template-columns: 0.75fr 1.25fr; }
.policy-block { grid-template-columns: 0.75fr 1.25fr; }
}
/* ============================================================
CURRENT ISSUES / ISSUES / ARCHIVES — shared hero-visual variants,
filter bar, empty/filled state block, hierarchy pipeline, FAQ
============================================================ */
.page-hero .page-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.ci-card, .ar-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.ci-card--stack1 { width: 56%; height: 62%; left: 0; top: 12%; background: var(--surface); transform: rotate(-6deg); z-index: 1; }
.ci-card--stack2 { width: 60%; height: 68%; left: 6%; top: 2%; background: var(--bg-tint); transform: rotate(-2deg); z-index: 2; }
.ci-card--stack1 .bar, .ci-card--stack2 .bar { background: rgba(18,32,60,0.14); }
.ci-card--front { width: 66%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 3; display: flex; flex-direction: column; justify-content: space-between; }
.ci-layers { width: 26px; height: 22px; color: var(--blue-light); }
.ci-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.ci-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.ci-card--front .bar { background: rgba(234,240,248,0.3); }
.ci-bar-title { width: 88%; height: 12px; }
.ci-bar-title.short { width: 55%; }
.ci-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.ci-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.ci-mock-link svg { width: 12px; height: 12px; }
.ar-card--y1 { width: 46%; height: 56%; left: 0; top: 20%; background: var(--surface); transform: rotate(-7deg); z-index: 1; }
.ar-card--y2 { width: 50%; height: 62%; left: 8%; top: 8%; background: var(--bg-tint); transform: rotate(-3deg); z-index: 2; }
.ar-card--y1 .bar, .ar-card--y2 .bar { background: rgba(18,32,60,0.14); }
.ar-card--front { width: 66%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 3; display: flex; flex-direction: column; justify-content: space-between; }
.ar-archive-icon { width: 26px; height: 22px; color: var(--blue-light); }
.ar-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.ar-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.ar-card--front .bar { background: rgba(234,240,248,0.3); }
.ar-bar-title { width: 88%; height: 12px; }
.ar-bar-title.short { width: 55%; }
.ar-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.ar-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.ar-mock-link svg { width: 12px; height: 12px; }
.filter-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-tint); padding: 1.75rem 0; }
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem; }
.filter-field { flex: 1 1 16rem; }
.filter-field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.filter-field select, .filter-field input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; background: var(--surface); font-size: 0.95rem; }
.filter-form .btn { flex: 0 0 auto; }
.journal-selector { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-tint); padding: 1.75rem 0; }
.selector-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.25rem; }
.selector-field { flex: 1 1 16rem; }
.selector-field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.selector-field select, .selector-field input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.85rem; background: var(--surface); font-size: 0.95rem; }
.selector-row .btn { flex: 0 0 auto; }
.journal-panel { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.journal-panel[hidden] { display: none; }
.journal-panel p { color: var(--muted); max-width: 62ch; margin-bottom: 1rem; }
/* .state-block is a flex column with align-items: flex-start, so
text-align alone never centred the lead or the buttons — only the one
paragraph that also had margin: 0 auto. */
.state-block--center { padding: 3.5rem 0; text-align: center; align-items: center; }
.state-block--center .state-lead { font-size: 1.6rem; margin-bottom: 0.75rem; }
.state-block--center p:not(.state-lead) { max-width: 46rem; margin: 0 auto 1.75rem; }
.state-block--center .state-actions { justify-content: center; }
.pipeline { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; align-items: center;
/* The chain is a standalone block inside editor-written content, so it
carries its own vertical rhythm. Relying on adjacency rules here does
not work: wpautop can put a
between the heading and this div. */
margin: 1.75rem 0 2rem; }
/* Default: pipeline inside a plain (non-navy) section, e.g. Submit
Manuscript's "What Happens After Submission". */
/* The separator is a too, so the pill styling is scoped away from it
rather than undone afterwards. Undoing it does not hold: a contextual rule
like `.section--navy .pipeline span` (0-2-1) outranks `.pipeline .sep`
(0-2-0) and paints a box back behind the arrow. */
.pipeline span:not(.sep) { font-size: 0.88rem; font-weight: 500; color: var(--navy); background: var(--bg-tint); padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); }
.pipeline .sep { color: var(--muted); }
/* On a navy section (Homepage/About Editorial Workflow, Aims & Scope's
"From Scope to Submission") the real design inverts to light-on-dark. */
.section--navy .pipeline span:not(.sep) { font-size: 0.85rem; color: var(--on-navy); background: rgba(234,240,248,0.12); }
.section--navy .pipeline .sep { color: rgba(234,240,248,0.55); }
/* Block components dropped into editor-written content carry no margin of
their own -- their `gap` only spaces their own children. Placed straight
after an h2 or p in a content region they collide with it, which is the
same defect .pipeline above had. Fixed on the component for the same
reason: wpautop can insert a stray , so `h2 + .thing` adjacency rules
are not dependable here. */
.comparison-grid,
.criteria-grid,
.criteria-list,
.definition-list,
.glance-grid,
.guidance-grid,
.highlights,
.principles-grid,
.role-grid,
.split-panel,
.standards-directory,
.state-block,
.status-legend,
.two-col { margin: 1.75rem 0 2rem; }
.journal-list--rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0; border-top: 1px solid var(--border); }
.journal-list--rows li:last-child { border-bottom: 1px solid var(--border); }
.journal-list--rows h3 { font-size: 1.15rem; }
.journal-list--rows p { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; max-width: 50ch; }
.faq-item { border-top: 1px solid var(--border); padding: 0; }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--blue); transition: transform 0.2s ease; }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item p { color: var(--muted); padding-bottom: 1.1rem; max-width: 60ch; }
/* The accordion is also used inside navy bands, where its navy summary text
was invisible against the ground. */
.faq-list { margin-top: 1.25rem; }
.section--navy .faq-item summary,
.section--deep .faq-item summary { color: var(--on-navy); }
.section--navy .faq-item p,
.section--deep .faq-item p { color: var(--on-navy-muted); }
.section--navy .faq-item summary .icon,
.section--deep .faq-item summary .icon { color: var(--blue-light); }
.section--navy .faq-item,
.section--deep .faq-item { border-top-color: rgba(239, 237, 230, 0.22); }
.section--navy .faq-item:last-child,
.section--deep .faq-item:last-child { border-bottom-color: rgba(239, 237, 230, 0.22); }
.section--accent .faq-item { border-top-color: var(--border-accent); }
.section--accent .faq-item:last-child { border-bottom-color: var(--border-accent); }
.archive-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; }
.archive-nav a { font-size: 0.85rem; font-weight: 600; color: var(--blue); }
/* ============================================================
GRID UTILITY — a minimal generic addition, not part of any single
approved page's own CSS. The static design never showed more than one
issue-cover-plate at a time (there was always zero or one issue to
display); this simple responsive grid is what lets that same real
card repeat for Current Issues, Archives, and a journal's own archive
section once more than one issue actually exists.
============================================================ */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* ============================================================
ARTICLES — hero mockup, search + discipline tabs + filters,
results header, typographic result entries (no card grid)
============================================================ */
.page-hero-rule { width: 64px; height: 2px; background: var(--blue); margin-top: 1.75rem; }
.index-card { position: absolute; border: 1px solid var(--border); background: var(--surface); padding: 1.5rem 1.75rem; }
.index-card--back { width: 78%; height: 72%; left: 0; top: 0; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.index-card--front { width: 82%; height: 88%; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.6rem; }
.bar-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); background: var(--bg-tint); padding: 0.3rem 0.6rem; border-radius: 2px; margin-bottom: 0.3rem; }
.bar { height: 9px; border-radius: 2px; background: var(--border); }
.index-card--back .bar { background: rgba(18,32,60,0.14); }
.bar--title { width: 85%; height: 10px; }
.bar--title.short { width: 55%; }
.bar--title-lg { width: 92%; height: 14px; background: var(--navy); opacity: 0.85; }
.bar--title-lg.short { width: 62%; }
.bar--meta { width: 45%; background: var(--blue-light); opacity: 0.55; }
.bar--meta.short { width: 30%; }
.bar--doi { width: 35%; margin-top: auto; opacity: 0.6; }
.index-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--blue); }
.mock-link svg { width: 12px; height: 12px; }
.research-finder { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-tint); padding: 1.75rem 0; }
.discipline-tabs { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.discipline-tabs a { display: inline-block; padding: 0 0 0.85rem; font-size: 0.9rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.discipline-tabs a:hover { color: var(--navy); }
.discipline-tabs a[aria-current="true"] { color: var(--navy); font-weight: 600; border-color: var(--blue); }
.finder-form { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.finder-form--spaced { margin-bottom: 2.5rem; }
.finder-search { display: flex; align-items: center; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
.finder-search svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.finder-search input { flex: 1; border: 0; background: transparent; font-size: 0.95rem; }
.finder-search input::placeholder { color: var(--muted); }
.finder-selects { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.finder-selects label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.finder-selects select { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.75rem; background: var(--surface); font-size: 0.9rem; }
.finder-submit { display: flex; align-items: flex-end; }
.results-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; }
.results-count { font-size: 0.85rem; color: var(--muted); }
.state-block--compact { padding: 2rem 0; }
.state-block--compact .state-lead { font-size: 1.2rem; }
/* ================= Search results =================
The hero's search field and the result count were both set entirely with
inline style attributes; the grouped result headings are new. */
.search-inline--centred { margin-left: auto; margin-right: auto; max-width: 28rem; }
.pub-meta--spaced { margin-top: 2rem; }
.search-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 34rem; margin-top: 1.5rem; }
.search-inline input[type="search"] { flex: 1 1 14rem; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; background: var(--surface); font-family: var(--font-sans); font-size: 0.95rem; color: var(--charcoal); }
.search-inline input[type="search"]:hover { border-color: var(--navy); }
.result-count { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
.search-group + .search-group { margin-top: 3rem; }
.search-group-heading { display: flex; align-items: baseline; gap: 0.6rem; font-size: 1.35rem; margin-bottom: 0.75rem; }
.search-group-count { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--status-neutral-text); background: var(--status-neutral-bg); border-radius: 999px; padding: 0.15rem 0.55rem; }
.pagination-links { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.88rem; color: var(--navy); }
.pagination-links .page-numbers.current { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.pagination-links .page-numbers:hover:not(.current) { border-color: var(--navy); }
.pagination-links .dots { border: none; }
@media (min-width: 1024px) {
.finder-form { grid-template-columns: 1.4fr 1fr auto; align-items: end; }
.finder-selects { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
ARTICLE DETAIL
============================================================ */
:root { --reading-width: 720px; }
.template-notice { background: var(--bg-tint); border-bottom: 1px solid var(--border); padding: 0.85rem 0; }
.template-notice p { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--muted); max-width: 62rem; }
.template-notice svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15rem; color: var(--blue); }
.article-masthead { padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 3vw, 2.75rem); }
.masthead-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; }
.article-masthead h1 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing: -0.02em; line-height: 1.12; max-width: 26ch; }
.authors-list { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin-top: 1.5rem; font-size: 1.02rem; }
.authors-list .author { color: var(--navy); font-weight: 500; }
.affiliations { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); max-width: 60ch; }
.affiliations li { margin-bottom: 0.15rem; }
.pub-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.75rem; padding: 1.4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pub-meta dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.pub-meta dd { font-size: 0.92rem; color: var(--navy); margin: 0.2rem 0 0; }
.article-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; align-items: center; }
.copy-status { font-size: 0.82rem; color: var(--blue); }
.article-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.article-content > .section { padding: clamp(2.25rem, 4vw, 3rem) 0; border-top: 1px solid var(--border); }
/* Sub-heading inside an article body section. The inline styles this
replaced set no top margin, so each one collided with the heading or
paragraph above it. */
.article-subhead { font-size: 1rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.article-content > .section > .article-subhead:first-of-type { margin-top: 1.25rem; }
.article-content > .section:first-child { border-top: 0; padding-top: 0; }
.keyword-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.keyword-list a { font-size: 0.9rem; color: var(--blue); border-bottom: 1px solid transparent; }
.keyword-list a:not(:last-child)::after { content: "\00b7"; margin-left: 0.9rem; color: var(--border); }
.full-text-note { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); color: var(--muted); max-width: var(--reading-width); }
.citation-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); max-width: var(--reading-width); }
.citation-text { font-family: var(--font-serif); font-size: 0.98rem; line-height: 1.65; color: var(--charcoal); margin-bottom: 1.25rem; }
.reference-list li { padding: 0.9rem 0; border-top: 1px solid var(--border); font-size: 0.92rem; max-width: var(--reading-width); }
.reference-list li:last-child { border-bottom: 1px solid var(--border); }
.reference-list a { color: var(--blue); font-size: 0.85rem; }
.article-sidebar { display: flex; flex-direction: column; gap: 2rem; }
.sidebar-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); }
.sidebar-block h3 { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-family: var(--font-sans); margin-bottom: 1rem; }
.sidebar-meta dt { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.75rem; }
.sidebar-meta dt:first-child { margin-top: 0; }
.sidebar-meta dd { font-size: 0.9rem; color: var(--navy); margin: 0.15rem 0 0; }
.sidebar-actions { display: flex; flex-direction: column; gap: 0.65rem; }
.sidebar-actions .btn { width: 100%; justify-content: center; }
.sidebar-block ul:not(.sidebar-actions) li { font-size: 0.88rem; margin-bottom: 0.5rem; }
.journal-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.journal-cta p { color: var(--on-navy-muted); max-width: 52ch; margin-top: 0.5rem; }
.journal-cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 1024px) {
.article-layout { grid-template-columns: 1fr 300px; gap: 4rem; }
.sidebar-actions .btn { width: auto; }
}
/* ============================================================
ISSUE DETAIL
============================================================ */
.issue-masthead { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
.issue-masthead .masthead-grid { display: grid; gap: 2.5rem; align-items: start; grid-template-columns: 1fr; }
/* Distinct from the "issue-cover-plate" listing card (templates.css, homepage/Current Issues/Archives/
Individual Journal) — this is the Issue Detail page's own masthead visual, always navy, standing alone
rather than repeating in a grid. Named separately so the two never collide despite the visual similarity. */
.issue-masthead-cover {
max-width: 300px; aspect-ratio: 3 / 4; background: var(--navy); color: var(--on-navy);
border: 1px solid rgba(18,32,60,0.1); padding: clamp(1.5rem, 3vw, 2.25rem);
display: flex; flex-direction: column; justify-content: space-between; margin: 0 auto;
}
.issue-masthead-cover .cover-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); }
.issue-masthead-cover .cover-mark { font-family: var(--font-serif); font-size: clamp(2.75rem, 5.5vw, 4rem); line-height: 1; margin-top: 0.75rem; }
.issue-masthead-cover .cover-rule { height: 1px; background: rgba(234,240,248,0.35); margin-bottom: 0.75rem; }
.issue-masthead-cover .cover-label { font-size: 0.85rem; color: var(--on-navy-muted); }
.issue-masthead .masthead-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.masthead-details h1 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); letter-spacing: -0.02em; line-height: 1.1; }
.masthead-date { margin-top: 0.75rem; font-size: 0.95rem; color: var(--muted); }
.masthead-desc { margin-top: 1.1rem; color: var(--charcoal); max-width: 56ch; }
.issue-masthead .masthead-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.issue-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 1.75rem; padding: 1.4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.issue-meta dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.issue-meta dd { font-size: 0.92rem; color: var(--navy); margin: 0.2rem 0 0; }
.toc-group-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 2rem 0 0.5rem; }
.toc-group-label:first-child { margin-top: 0; }
.toc-entry { padding: 1.75rem 0; border-top: 1px solid var(--border); }
.toc-entry:last-of-type { border-bottom: 1px solid var(--border); }
.toc-type { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.6rem; }
.toc-title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.toc-authors { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.6rem; }
.toc-excerpt { color: var(--charcoal); max-width: 62ch; margin-bottom: 0.75rem; }
.toc-footline { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; font-size: 0.82rem; color: var(--muted); }
/* A boxed panel inside .container-wide, not a full-width band. It used to
carry .section and undo that band padding with an inline override. */
.browse-journal { display: flex; flex-wrap: wrap; gap: 2rem 3rem; align-items: center;
background: var(--bg-tint); border-radius: var(--radius); padding: 2.5rem; margin-bottom: 4rem; }
.browse-journal h2 { font-size: 1.6rem; margin-bottom: 0; }
.browse-journal-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (min-width: 1024px) {
.issue-masthead .masthead-grid { grid-template-columns: 300px 1fr; gap: 3.5rem; }
}
/* ============================================================
POLICY / DOCUMENTATION PAGES (shared by Publication Ethics,
Research Integrity, Peer Review, Open Access, Fees, Copyright, AI
Policy, Corrections, Complaints, Research Data, Privacy, Terms,
Accessibility, Author Guidelines, Reviewer Resources)
============================================================ */
.page-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
/* One shared abstract hero-visual card for every policy page — the
approved static pages each hand-drew a different glyph per topic
(magnifying glass for Peer Review, etc.); this generic document glyph
keeps the same card/badge/bar structure and colors so the layout stays
pixel-identical while remaining a single reusable template. */
.policy-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.policy-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.policy-card--back .bar { background: rgba(18,32,60,0.14); }
.policy-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.policy-glyph { width: 22px; height: 22px; color: var(--blue-light); }
.policy-badge { align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.policy-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.policy-card--front .bar { background: rgba(234,240,248,0.3); }
.policy-bar-title { width: 88%; height: 12px; }
.policy-bar-title.short { width: 55%; }
/* The policy body sits close under its hero rather than taking the full
band rhythm; this replaces an inline padding override that every one of
the sixteen policy pages inherited from the shared template. */
.section--policy-body { padding: 1.5rem 0 3rem; }
/* Intro line that sits close under its heading, replacing two inline
margin overrides that beat every stylesheet rule and jammed the text. */
.section-intro--tight { margin-top: 0.75rem; margin-bottom: 0.5rem; }
.guidelines-layout { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.guidelines-content > .section { padding: clamp(2rem, 3.5vw, 2.75rem) 0; border-top: 1px solid var(--border); }
.guidelines-content > .section:first-child { border-top: 0; padding-top: 0; }
/* Real policy-page content flows as plain h2/p (a WordPress Page's actual
post_content, editable in the block editor) rather than the approved
static design's hand-wrapped
blocks per heading — reproducing that per-section background alternation
would need structured per-section fields, which is more machinery than a
documentation page needs. This keeps the one visual rhythm that matters
most: a divider before every major heading, applied directly to H2s. */
.guidelines-content > h2 { padding-top: clamp(2rem, 3.5vw, 2.75rem); margin-top: clamp(2rem, 3.5vw, 2.75rem); border-top: 1px solid var(--border); }
.guidelines-content > h2:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.guidelines-content > .principle-callout { margin-bottom: clamp(2rem, 3.5vw, 2.75rem); }
.guidelines-content > .principle-callout + h2 { border-top: 0; margin-top: 0; }
.subhead { font-size: 1.02rem; font-weight: 600; color: var(--navy); margin: 1.5rem 0 0.5rem; font-family: var(--font-sans); }
.subhead:first-child { margin-top: 0; }
.step-list li { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.step-list li:last-child { border-bottom: 1px solid var(--border); }
.step-num { font-family: var(--font-serif); font-size: 1.3rem; color: var(--muted); flex-shrink: 0; }
.step-list h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.step-list p { color: var(--muted); font-size: 0.92rem; }
.plain-list li { position: relative; padding-left: 1.1rem; color: var(--charcoal); margin-bottom: 0.4rem; }
.plain-list li::before { content: "\2013"; position: absolute; left: 0; color: var(--blue); }
/* An ordered .plain-list was rendering the same en dash as the unordered one,
so a numbered process ("How Submission Works", the editorial role
hierarchy) lost its sequence entirely. It counts instead. */
ol.plain-list { counter-reset: psj-ol; }
ol.plain-list > li { padding-left: 1.85rem; }
ol.plain-list > li::before { counter-increment: psj-ol; content: counter(psj-ol) "."; font-variant-numeric: tabular-nums; }
.section--navy .plain-list li { color: var(--on-navy-muted); }
/* ============================================================
AIMS & SCOPE
============================================================ */
.as-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.as-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.as-card--back .bar { background: rgba(18,32,60,0.14); }
.as-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.as-tree { width: 26px; height: 22px; color: var(--blue-light); }
.as-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.as-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.as-card--front .bar { background: rgba(234,240,248,0.3); }
.as-bar-title { width: 88%; height: 12px; }
.as-bar-title.short { width: 55%; }
.as-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.as-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.as-mock-link svg { width: 12px; height: 12px; }
.discovery-callout { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(2rem, 4vw, 2.75rem); background: var(--surface); display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.discovery-callout-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* ============================================================
SUBMIT MANUSCRIPT
============================================================ */
.sm-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.sm-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.sm-card--back .bar { background: rgba(18,32,60,0.14); }
.sm-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.sm-send { width: 22px; height: 22px; color: var(--blue-light); }
.sm-badge { align-self: flex-start; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.sm-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.sm-card--front .bar { background: rgba(234,240,248,0.3); }
.sm-bar-title { width: 88%; height: 12px; }
.sm-bar-title.short { width: 55%; }
.sm-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.sm-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.sm-mock-link svg { width: 12px; height: 12px; }
/* This page's own "Select Your Journal" list — distinct from the
Journals Directory's .journal-row (3-col searchable grid) and About
PenScholar's .ap-journal-row (a simple stacked card): this one adds a
status pill and a View/Submit action row per journal. */
.sm-journal-row { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--border); }
.sm-journal-row:last-child { border-bottom: 1px solid var(--border); }
.sm-journal-row-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); background: var(--bg-tint); padding: 0.3rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem; }
.sm-journal-row h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.sm-journal-row p { color: var(--muted); font-size: 0.92rem; max-width: 56ch; margin-bottom: 0.9rem; }
.sm-journal-row-status { font-size: 0.78rem; color: var(--blue); font-weight: 600; margin-bottom: 0.9rem; }
.sm-journal-row-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 640px) {
.sm-journal-row { grid-template-columns: 1fr auto; align-items: center; }
.sm-journal-row-actions { justify-content: flex-end; }
}
.checklist li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.checklist li:last-child { border-bottom: 1px solid var(--border); }
.checklist input[type="checkbox"] { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; }
.checklist label { font-size: 0.95rem; color: var(--charcoal); }
/* The journal dropdown and the panel it reveals stack inside this card.
The card was not a layout container at all, so its children's flex
properties did nothing and the two sat flush against each other. */
.submit-selector { display: grid; gap: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; background: var(--surface); }
.selector-field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.selector-field select { width: 100%; max-width: 26rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 0.9rem; background: var(--bg); font-size: 0.95rem; }
.submit-panel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.submit-panel[hidden] { display: none; }
.submit-panel-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.submit-panel dl { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: 1rem; }
.submit-panel dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.submit-panel dd { font-size: 0.9rem; color: var(--navy); margin: 0.15rem 0 0; }
/* ============================================================
POLICY CONTENT COMPONENTS — shared across the ~16 policy pages
(Peer Review, Publication Ethics, Research Integrity, AI Policy,
Corrections & Retractions, Complaints & Appeals, Research Data,
Open Access, Copyright & Licensing, Publication Fees, Privacy,
Terms of Use, Accessibility, Indexing & Abstracting, Reviewers).
All content lives in real WordPress Page content (seeded by
inc/default-content.php) rendered through page-templates/policy.php,
so these classes just need to exist — the HTML itself is real.
============================================================ */
.principle-callout { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 2rem; }
.principle-callout h2 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.principle-callout p { color: var(--muted); }
.comparison-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.comparison-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; background: var(--surface); }
.comparison-panel h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.comparison-panel .comparison-tag { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.comparison-panel ul { margin-top: 1rem; }
.comparison-panel li { position: relative; padding-left: 1.1rem; color: var(--charcoal); margin-bottom: 0.5rem; font-size: 0.92rem; }
.comparison-panel li::before { content: "\2013"; position: absolute; left: 0; color: var(--blue); }
.role-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.role-grid h3 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.role-grid p { color: var(--muted); font-size: 0.92rem; }
.criteria-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.criteria-grid h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.criteria-grid p { color: var(--muted); font-size: 0.92rem; }
/* Reviewers page's own evaluation-criteria list — a distinct real class
from Peer Review's .criteria-grid (larger gap, larger heading). */
.criteria-list { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.criteria-item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.criteria-item p { color: var(--muted); font-size: 0.92rem; }
.decision-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.decision-list span { font-size: 0.85rem; font-weight: 600; color: var(--navy); background: var(--bg-tint); padding: 0.5rem 0.9rem; border-radius: 999px; }
.split-panel { display: grid; grid-template-columns: 1fr; }
.split-half { padding: 2rem 0; }
.split-half--accent { background: var(--bg-tint); padding-left: 1.5rem; padding-right: 1.5rem; margin: 0 -1.5rem; }
.split-half .eyebrow { margin-bottom: 0.9rem; }
.split-half h3 { font-size: 1.3rem; margin-top: 0; margin-bottom: 0.75rem; }
.split-half .eyebrow + h3 { margin-top: 0; }
.split-half p { color: var(--muted); margin-bottom: 1.25rem; max-width: 46ch; }
.split-divider { background: var(--border); }
.distinction-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
.distinction-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; background: var(--surface); }
.distinction-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.distinction-card p { color: var(--muted); font-size: 0.9rem; }
.glance-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.glance-grid h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.glance-grid p { color: var(--muted); font-size: 0.92rem; }
.reuse-table-wrap, .fees-table-wrap { overflow-x: auto; }
.reuse-table, .fees-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.reuse-table { min-width: 420px; }
.fees-table { min-width: 640px; }
.reuse-table th, .reuse-table td, .fees-table th, .fees-table td { text-align: left; padding: 0.85rem 1rem; border-top: 1px solid var(--border); }
.reuse-table th, .fees-table th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-top: none; }
.reuse-table tr:last-child td, .fees-table tr:last-child td { border-bottom: 1px solid var(--border); }
.reuse-table td:first-child, .fees-table td:first-child { font-weight: 500; color: var(--navy); }
.reuse-table td:last-child { color: var(--muted); }
.fees-table td:not(:first-child) { color: var(--muted); }
.status-block { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
.status-lead { font-family: var(--font-serif); font-size: 1.4rem; color: var(--navy); margin-bottom: 0.75rem; max-width: 34ch; }
.status-block p:not(.status-lead) { color: var(--muted); max-width: 60ch; }
.author-note { border-left: 3px solid var(--blue); padding: 1.25rem 1.5rem; background: var(--bg-tint); font-size: 0.95rem; color: var(--charcoal); }
.pending-note { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-top: 1rem; }
.pending-note p { color: var(--muted); font-size: 0.92rem; margin: 0; }
.example-box { border: 1px solid var(--border); background: var(--bg-tint); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-top: 1rem; }
.example-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; }
.template-box { border: 1px solid var(--border); background: var(--bg-tint); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin-top: 1rem; }
.template-box .template-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.template-box dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.25rem; }
.template-box dt { font-size: 0.82rem; font-weight: 600; color: var(--navy); }
.template-box dd { font-size: 0.9rem; color: var(--charcoal); font-style: italic; }
.checklist-static li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.checklist-static li:last-child { border-bottom: 1px solid var(--border); }
.checklist-static .c-box { flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid var(--blue); border-radius: 2px; margin-top: 0.2rem; }
.checklist-static span { color: var(--charcoal); font-size: 0.95rem; }
.feature-list li { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.feature-list li:last-child { border-bottom: 1px solid var(--border); }
.feature-list .f-check { flex-shrink: 0; width: 16px; height: 16px; color: var(--blue); margin-top: 0.2rem; }
.feature-list span { color: var(--charcoal); font-size: 0.95rem; }
.definition-list { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.definition-item h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.definition-item p { color: var(--muted); font-size: 0.92rem; }
.section--navy .definition-item p { color: var(--on-navy-muted); }
.status-legend { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.status-item { border-top: 1px solid var(--border); padding-top: 1.1rem; }
.status-dot { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
.status-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.status-item p { color: var(--muted); font-size: 0.92rem; }
.roadmap-list li { display: flex; gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--border); }
.roadmap-list li:last-child { border-bottom: 1px solid var(--border); }
.roadmap-list .r-num { font-family: var(--font-serif); font-size: 1rem; color: var(--muted); flex-shrink: 0; width: 1.5rem; }
/* Indexing & Abstracting's own journal list — distinct from the
homepage's .journal-list (a different real page's CSS under the same
class name: flex row + h3 + .jl-meta, vs the homepage's link-wrapped
span/small layout) — prefixed to avoid colliding with front-page.php. */
.idx-journal-list li { border-top: 1px solid var(--border); padding: 1.15rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 1.5rem; }
.idx-journal-list li:last-child { border-bottom: 1px solid var(--border); }
.idx-journal-list h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.idx-journal-list .jl-meta { color: var(--muted); font-size: 0.85rem; }
.related-list li { border-top: 1px solid var(--border); }
.related-list li:last-child { border-bottom: 1px solid var(--border); }
.related-list a { display: block; padding: 0.85rem 0; font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); }
.related-list a:hover { color: var(--blue); }
@media (min-width: 640px) {
.comparison-grid, .distinction-grid, .criteria-list { grid-template-columns: repeat(2, 1fr); }
.role-grid, .glance-grid, .criteria-grid { grid-template-columns: repeat(2, 1fr); }
.status-legend { grid-template-columns: repeat(2, 1fr); }
.definition-list { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.role-grid, .glance-grid, .criteria-grid, .criteria-list { grid-template-columns: repeat(4, 1fr); }
.status-legend { grid-template-columns: repeat(4, 1fr); }
.split-panel { grid-template-columns: 1fr 1fr; }
.split-divider { display: none; }
.split-half { padding: 0.5rem 3rem; }
.split-half:first-child { padding-left: 0; border-right: 1px solid var(--border); }
.split-half--accent { margin: 0; padding-right: 3rem; }
}
/* ============================================================
POLICIES (directory / index)
============================================================ */
.pol-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.pol-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.pol-card--back .bar { background: rgba(18,32,60,0.14); }
.pol-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.pol-index { width: 26px; height: 22px; color: var(--blue-light); }
.pol-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.pol-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.pol-card--front .bar { background: rgba(234,240,248,0.3); }
.pol-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.pol-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.pol-mock-link svg { width: 12px; height: 12px; }
.policy-nav { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-tint); }
.policy-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1.1rem 0; }
.policy-nav a { display: inline-block; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--charcoal); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.policy-nav a:hover { color: var(--navy); border-color: var(--blue-light); }
.highlights { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.highlight-item { border-top: 1px solid var(--border); padding-top: 1.25rem; }
.highlight-item h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.highlight-item p { color: var(--muted); font-size: 0.92rem; }
.policy-category { margin-bottom: 3.5rem; }
.policy-category:last-child { margin-bottom: 0; }
.policy-category-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
.policy-category-title { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.policy-category-note { color: var(--muted); font-size: 0.92rem; margin-bottom: 1rem; max-width: 60ch; }
.policy-list li { display: flex; gap: 1.25rem; padding: 1.35rem 0; border-top: 1px solid var(--border); }
.policy-list li:last-child { border-bottom: 1px solid var(--border); }
.policy-num { font-family: var(--font-serif); font-size: 1.1rem; color: var(--muted); flex-shrink: 0; width: 1.75rem; padding-top: 0.1rem; }
.policy-body h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.policy-body h3 a { color: var(--navy); }
.policy-body h3 a:hover { color: var(--blue); }
.policy-body p { color: var(--muted); font-size: 0.95rem; max-width: 58ch; margin-bottom: 0.6rem; }
.guidance-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.guidance-panel h3 { font-size: 1.25rem; margin-bottom: 1rem; }
.guidance-panel ul { margin-bottom: 1.25rem; }
.guidance-panel li { border-top: 1px solid var(--border); }
.guidance-panel li:last-child { border-bottom: 1px solid var(--border); }
.guidance-panel a.text-link { display: block; padding: 0.75rem 0; font-size: 0.95rem; }
@media (min-width: 640px) {
.highlights { grid-template-columns: repeat(2, 1fr); }
.guidance-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.highlights { grid-template-columns: repeat(4, 1fr); }
}
.criteria-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.criteria-grid h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.criteria-grid p { color: var(--muted); font-size: 0.92rem; }
.decision-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.decision-list span { font-size: 0.85rem; font-weight: 600; color: var(--navy); background: var(--bg-tint); padding: 0.5rem 0.9rem; border-radius: 999px; }
.split-panel { display: grid; grid-template-columns: 1fr; }
.split-half { padding: 2rem 0; }
.split-half--accent { background: var(--bg-tint); padding-left: 1.5rem; padding-right: 1.5rem; margin: 0 -1.5rem; }
.split-half .eyebrow { margin-bottom: 0.9rem; }
.split-half h3 { font-size: 1.3rem; margin-top: 0; margin-bottom: 0.75rem; }
.split-half .eyebrow + h3 { margin-top: 0; }
.split-half p { color: var(--muted); margin-bottom: 1.25rem; max-width: 46ch; }
.guidelines-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.guidelines-nav a { display: block; padding: 0.6rem 0.75rem; font-size: 0.88rem; color: var(--muted); border-left: 2px solid transparent; border-radius: 0 2px 2px 0; }
.guidelines-nav a:hover { color: var(--navy); }
.guidelines-nav a.is-active { color: var(--navy); font-weight: 600; border-color: var(--blue); background: var(--bg-tint); }
/* ============================================================
EDITORIAL BOARD / EDITORS — role hierarchy, pipeline (pipeline and
journal-selector/state-block/plain-list/faq-item already defined above)
============================================================ */
.hierarchy-list li { display: flex; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; border-top: 1px solid var(--border); }
.hierarchy-list li:last-child { border-bottom: 1px solid var(--border); }
.hierarchy-list .h-num { font-family: var(--font-serif); font-size: 1.1rem; color: var(--muted); flex-shrink: 0; width: 1.5rem; }
.hierarchy-list h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.hierarchy-list p { color: var(--muted); font-size: 0.9rem; }
/* Editorial person entry — no static page ever showed a populated example
(every real board is still empty), so this follows the same restrained
thin-rule-row convention used throughout the site (hierarchy-list,
research-list) rather than inventing a new visual language. */
/* Group label above a run of person cards ("Editor-in-Chief", "Associate
Editors", ...). This had no rule at all — the whole component was set
with an inline style attribute on the heading. */
.person-group-heading { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--navy); margin: 2rem 0 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.person-group-heading:first-child { margin-top: 0; }
.person-card { padding: 1.1rem 0; border-top: 1px solid var(--border); }
.person-card:first-child { border-top: none; padding-top: 0; }
/* The name is the card's heading, so it carries an explicit weight and
margin rather than inheriting the global h3 display sizing. */
.person-card .person-name { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--navy); margin: 0; }
.person-card .person-name a { color: var(--navy); }
.person-card .person-role { font-size: 0.85rem; font-weight: 600; color: var(--blue); margin-top: 0.15rem; }
.person-card .person-affiliation { font-size: 0.88rem; color: var(--muted); margin-top: 0.1rem; }
.principle-list li { border-top: 1px solid var(--border); padding: 1.35rem 0; }
.principle-list li:last-child { border-bottom: 1px solid var(--border); }
.principle-list h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.principle-list p { color: var(--muted); font-size: 0.95rem; max-width: 60ch; }
.role-list li { border-top: 1px solid var(--border); padding: 1.1rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; }
.role-list li:last-child { border-bottom: 1px solid var(--border); }
.role-list h3 { font-size: 1.05rem; }
.role-list p { color: var(--muted); font-size: 0.88rem; }
/* ============================================================
CALL FOR PAPERS (directory)
============================================================ */
.cfp-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.cfp-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.cfp-card--back .bar { background: rgba(18,32,60,0.14); }
.cfp-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.cfp-signal { width: 26px; height: 22px; color: var(--blue-light); }
.cfp-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.cfp-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.cfp-card--front .bar { background: rgba(234,240,248,0.3); }
.cfp-bar-title { width: 88%; height: 12px; }
.cfp-bar-title.short { width: 55%; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.filter-tab { padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.filter-tab[aria-current="true"] { color: var(--on-navy); background: var(--navy); border-color: var(--navy); }
.guidance-list { display: grid; gap: 0; grid-template-columns: 1fr; }
.guidance-list li { border-top: 1px solid var(--border); padding: 1.1rem 0; }
.guidance-list li:last-child { border-bottom: 1px solid var(--border); }
.guidance-list a { font-family: var(--font-serif); font-size: 1.15rem; color: var(--navy); }
/* Real active-call entry on the directory — no static mockup shows a
populated example (no call has ever existed), so this borrows the same
restrained card conventions used for the Journals Directory's featured
record rather than inventing a new visual language. */
.cfp-listing-card { background: var(--surface); }
.cfp-listing-card h2 a:hover { color: var(--blue); }
/* ============================================================
CONTACT
============================================================ */
.ct-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.ct-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.ct-card--back .bar { background: rgba(18,32,60,0.14); }
.ct-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.ct-route { width: 26px; height: 22px; color: var(--blue-light); }
.ct-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.ct-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.ct-card--front .bar { background: rgba(234,240,248,0.3); }
.ct-bar-title { width: 88%; height: 12px; }
.ct-bar-title.short { width: 55%; }
.ct-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
/* ============================================================
ABOUT PENSCHOLAR — hero mockup
============================================================ */
.ap-card { position: absolute; border: 1px solid var(--border); padding: 1.4rem 1.6rem; }
.ap-card--back { width: 68%; height: 76%; left: 0; top: 4%; background: var(--bg-tint); transform: rotate(-4deg); z-index: 1; }
.ap-card--back .bar { background: rgba(18,32,60,0.14); }
.ap-card--front { width: 68%; height: 92%; right: 0; bottom: 0; background: var(--navy); color: var(--on-navy); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.ap-mark { flex-shrink: 0; }
.ap-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-light); border: 1px solid rgba(234,240,248,0.35); padding: 0.3rem 0.6rem; border-radius: 999px; margin-top: 0.85rem; }
.ap-card .bar { height: 8px; border-radius: 2px; background: var(--border); margin-bottom: 0.5rem; }
.ap-card--front .bar { background: rgba(234,240,248,0.3); }
.ap-bar-title { width: 88%; height: 12px; }
.ap-bar-title.short { width: 55%; }
.ap-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(234,240,248,0.2); }
.ap-mock-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--on-navy); }
.ap-mock-link svg { width: 12px; height: 12px; }
.routing-list li { border-top: 1px solid var(--border); padding: 1.5rem 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 1.5rem; }
.routing-list li:last-child { border-bottom: 1px solid var(--border); }
.routing-list h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.routing-list p { color: var(--muted); font-size: 0.92rem; max-width: 48ch; }
.two-col { display: grid; gap: 3rem; grid-template-columns: 1fr; }
.contact-form { max-width: 40rem; }
/* Form field classes — promoted to top-level (were previously scoped under
.contact-form only) so every real front-end form (login, register,
submission, dashboards) gets the same real styling, not just Contact.
The actual input/select/textarea box appearance (border/padding/
background) was missing entirely before this fix — ported verbatim
from the approved static design (CONTACT.html's own .form-field rule),
which every field on the real Contact page has silently lacked. */
.form-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.form-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--charcoal); margin-bottom: 0.4rem; }
/* Form controls use the stronger line: WCAG 2.2 asks for 3:1 on the
boundary of an interactive component, which the quiet --border used
between blocks of content does not reach. */
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; background: var(--surface); font-size: 0.95rem; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--navy); }
.form-field textarea { min-height: 8rem; resize: vertical; }
.form-field .req { color: #A83232; }
.form-field--full { grid-column: 1 / -1; }
.form-field[hidden] { display: none; }
/* .form-consent is applied to a that usually sits inside a
.form-field, where ".form-field label { display: block }" outranked it and
killed the flex row — so the checkbox and its text ran together with no
gap. Scoped to match that specificity. */
.form-consent,
.form-field label.form-consent { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; font-weight: 400; color: var(--muted); margin-bottom: 0; }
/* The checkbox itself measured 13px; the whole label is the tap target, but
the box should still be large enough to hit on its own. */
.form-consent input,
.form-field label.form-consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; accent-color: var(--blue); flex-shrink: 0; }
.form-consent { min-height: 1.75rem; }
.form-hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; }
@media (min-width: 640px) {
.form-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
ACCOUNTS / DASHBOARDS — login, register, submission form,
author & editor dashboards. New real functionality, no static
page to port from, so this reuses the same real design tokens
and component conventions (rows with a top border, pill badges,
.btn/.notice) already established everywhere else on the site.
============================================================ */
.auth-form { max-width: 26rem; margin: 0 auto; }
.auth-form-foot { margin-top: 1.5rem; font-size: 0.9rem; color: var(--muted); text-align: center; }
.repeater-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1rem; background: var(--surface); }
.repeater-block:last-of-type { margin-bottom: 1.5rem; }
.repeater-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.repeater-block-head h3 { font-size: 0.95rem; font-family: var(--font-sans); font-weight: 600; color: var(--navy); }
.repeater-remove { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.repeater-remove:hover { color: #A83232; }
.credit-grid { display: grid; gap: 0.5rem 1rem; grid-template-columns: 1fr; margin-top: 0.75rem; }
.credit-grid label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 400; color: var(--charcoal); }
.credit-grid input[type="checkbox"] { width: auto; accent-color: var(--blue); }
/* Dashboard section headings; these carried inline margin-top values. */
/* Submit row for every front-end form. This had no rule at all — nine
templates each carried the same inline margin-top instead. */
/* A narrower reading measure inside .container-narrow; two templates
repeated this as an inline max-width/padding override. */
.container-narrow--tight { max-width: 46rem; padding-left: 0; padding-right: 0; }
/* Small muted line used throughout the dashboards for row metadata. */
.meta-note { color: var(--muted); font-size: 0.85rem; }
/* Preformatted block (citation strings, reviewer comments). */
.pre-block { background: var(--bg-tint); border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 1rem; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; }
.form-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1.5rem; }
.form-grid + .form-actions,
.form-actions--loose { margin-top: 1.75rem; }
/* Readership figures on the editor dashboard. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.stat-row > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.stat-row dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat-row dd { font-family: var(--font-serif); font-size: 1.9rem; color: var(--navy); margin: 0.35rem 0 0; }
.stat-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.stat-table th, .stat-table td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.stat-table th { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.stat-table td:not(:first-child), .stat-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; width: 7rem; }
.dash-subhead { margin-top: 2.5rem; }
.dash-subhead--lg { margin-top: 1.5rem; }
.dash-table { width: 100%; }
.dash-table li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; padding: 1.25rem 0; border-top: 1px solid var(--border); }
.dash-table li:last-child { border-bottom: 1px solid var(--border); }
.dash-table h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.dash-table p { color: var(--muted); font-size: 0.85rem; }
.dash-table-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.timeline-list li { display: flex; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.timeline-list li:last-child { border-bottom: 1px solid var(--border); }
.timeline-list time { flex-shrink: 0; width: 9rem; color: var(--muted); font-size: 0.82rem; }
.timeline-list p { margin: 0; }
.timeline-list .status-badge { margin-bottom: 0.35rem; }
@media (min-width: 640px) {
.credit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.two-col { grid-template-columns: 1fr 1.3fr; }
}
/* ============================================================
ABOUT PENSCHOLAR
============================================================ */
/* ================= Editable content regions =================
Group A pages render editor-written HTML straight into a band: a flow of
h2 / h3 / p / grids with no .section-head around them. Nothing gave those
headings any spacing, so on About (and nine other templates) a heading sat
flush against the grid under it and read as one run of text. This is the
flow rhythm for that content. */
/* Flow baseline for editor-written content.
Only the ancestor sits in :where(), so these keep the specificity of their
element selectors (0-0-2) — enough to beat the global `p { margin: 0 }`
reset, but below every class-based component rule in this file, which
therefore still wins. An earlier attempt wrapped the targets in :where()
too, which dropped the whole selector to specificity 0 and did nothing. */
:where(.section, .cfp-process-container) h2 + p,
:where(.section, .cfp-process-container) h2 + ul,
:where(.section, .cfp-process-container) h2 + ol,
:where(.section, .cfp-process-container) h2 + div,
:where(.section, .cfp-process-container) h2 + dl,
:where(.section, .cfp-process-container) h3 + p,
:where(.section, .cfp-process-container) h3 + ul,
:where(.section, .cfp-process-container) h3 + ol,
:where(.section, .cfp-process-container) h3 + div,
:where(.section, .cfp-process-container) h3 + dl { margin-top: 1rem; }
:where(.section, .cfp-process-container) p + h2,
:where(.section, .cfp-process-container) ul + h2,
:where(.section, .cfp-process-container) ol + h2,
:where(.section, .cfp-process-container) div + h2,
:where(.section, .cfp-process-container) dl + h2 { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
:where(.section, .cfp-process-container) p + h3,
:where(.section, .cfp-process-container) ul + h3,
:where(.section, .cfp-process-container) ol + h3,
:where(.section, .cfp-process-container) div + h3,
:where(.section, .cfp-process-container) dl + h3 { margin-top: 2rem; }
:where(.section, .cfp-process-container) p + p { margin-top: 1rem; }
/* The global reset strips list markers and padding from every ul/ol so the
theme's own layout lists stay clean. That left an ordinary list written by
an editor — no class, straight from the block editor — with no markers, no
indent and no space between items, so it read as one run of text. A list
that carries no class is prose, and gets prose list styling back. */
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ul:not([class]) { list-style: disc; padding-left: 1.4rem; }
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ol:not([class]) { list-style: decimal; padding-left: 1.6rem; }
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ul:not([class]) > li,
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ol:not([class]) > li { display: list-item; margin-bottom: 0.5rem; color: var(--charcoal); }
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ul:not([class]) > li::marker,
:where(.section, .guidelines-content, .content-region, .cfp-process-container) ol:not([class]) > li::marker { color: var(--blue); }
:where(.section--navy, .section--deep) ul:not([class]) > li,
:where(.section--navy, .section--deep) ol:not([class]) > li { color: var(--on-navy-muted); }
:where(.section, .cfp-process-container) p + ul,
:where(.section, .cfp-process-container) p + ol { margin-top: 1rem; }
/* The reverse direction: a block component followed by prose. Missing these
left a pipeline or a step list flush against the paragraph under it. */
:where(.section, .cfp-process-container) div + p,
:where(.section, .cfp-process-container) ul + p,
:where(.section, .cfp-process-container) ol + p,
:where(.section, .cfp-process-container) dl + p,
:where(.section, .cfp-process-container) table + p,
:where(.section, .cfp-process-container) div + ul,
:where(.section, .cfp-process-container) div + ol,
:where(.section, .cfp-process-container) ul + ul,
:where(.section, .cfp-process-container) ol + ol { margin-top: 1.5rem; }
/* No `div + div` rule here on purpose: it cannot tell a pair of prose blocks
from two children of a grid or flex container, and pushed the second cell
of every two-column form and card row down by its margin. */
:where(.section, .cfp-process-container) p + div,
:where(.section, .cfp-process-container) ul + div,
:where(.section, .cfp-process-container) ol + div { margin-top: 1.5rem; }
.content-region > * + * { margin-top: 1.25rem; }
.content-region > h2 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.content-region > * + h2 { margin-top: clamp(2.75rem, 5vw, 4rem); }
.content-region > h2 + * { margin-top: 1.5rem; }
.content-region > * + h3 { margin-top: 2rem; }
.content-region > h3 + * { margin-top: 0.85rem; }
.content-region > p { color: var(--muted); max-width: 68ch; }
.content-region > ul, .content-region > ol { max-width: 68ch; }
.content-region > .reading-col { max-width: 68ch; }
.content-region > :first-child { margin-top: 0; }
/* FAQ and resource items are written as Question
, so the lead-in has to out-weigh the muted body text it
shares a paragraph with. */
.content-region > p > strong:first-child { color: var(--charcoal); }
.section--navy .content-region > p > strong:first-child,
.section--deep .content-region > p > strong:first-child { color: var(--on-navy); }
.section--navy .content-region > p,
.section--deep .content-region > p { color: var(--on-navy-muted); }
.principles-grid, .audience-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.principles-grid h3, .audience-grid h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.principles-grid p, .audience-grid p { color: var(--muted); font-size: 0.92rem; margin-bottom: 0.75rem; }
/* Distinct from the Journals Directory's own .journal-row (a 3-column
grid list item with data-searchable filtering) — About PenScholar's
curated selection is a simple single-column stacked card, so it gets
its own class rather than colliding with the Directory's real CSS. */
.ap-journal-row { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--border); }
.ap-journal-row:last-child { border-bottom: 1px solid var(--border); }
.ap-journal-row-tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); background: var(--surface); padding: 0.3rem 0.6rem; border-radius: 999px; margin-bottom: 0.6rem; }
.ap-journal-row h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.ap-journal-row p { color: var(--muted); font-size: 0.92rem; max-width: 56ch; }
.standards-directory { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border); }
.standards-directory li { border-bottom: 1px solid var(--border); min-width: 0; }
.standards-directory a { display: block; padding: 1.1rem 1.25rem 1.1rem 0; font-size: 0.98rem; font-weight: 500; color: var(--navy); }
@media (min-width: 640px) {
.principles-grid { grid-template-columns: repeat(2, 1fr); }
.audience-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.principles-grid { grid-template-columns: repeat(4, 1fr); }
.audience-grid { grid-template-columns: repeat(4, 1fr); }
.standards-directory { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
.guidance-list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
@media (min-width: 1024px) {
.guidance-list { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) {
.criteria-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.guidelines-layout { grid-template-columns: 1fr 240px; gap: 4rem; }
.guidelines-nav { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.criteria-grid { grid-template-columns: repeat(4, 1fr); }
.split-panel { grid-template-columns: 1fr 1fr; }
.split-divider { display: none; }
.split-half { padding: 0.5rem 3rem; }
.split-half:first-child { padding-left: 0; border-right: 1px solid var(--border); }
.split-half--accent { margin: 0; padding-right: 3rem; }
}
/* Hero button alignment: centered under the stacked mobile/tablet hero,
left-aligned with the heading once the hero becomes a two-column
desktop layout. Deliberately placed at the very end of this file, and
listing every selector (including the more specific ".page-hero
.page-hero-actions") that sets justify-content on these classes above —
several earlier, equally-or-more-specific rules were silently winning
this override by coming later in the cascade even though the media
query itself was matching correctly. */
@media (min-width: 1024px) {
.hero-actions,
.page-hero-actions,
.page-hero .page-hero-actions,
.masthead-actions,
.issue-masthead .masthead-actions {
justify-content: flex-start;
}
}