/* ==========================================================================
   ATLAS Theme — main stylesheet
   Editorial publication design adapted for OJS 3.3
   © 2026 OJS Services
   ========================================================================== */

/* ───────────── Tokens ───────────── */
/* The same in both looks. They were defined in the light block alone, so in
   the dark look every var(--atlas-radius…) and var(--atlas-success) was
   undefined: cards lost their rounded corners and the "live" dot its colour. */
:root {
    --atlas-success: #0f9d58;
    --atlas-radius-sm: 6px;
    --atlas-radius: 10px;
    --atlas-radius-lg: 18px;
    --atlas-radius-xl: 24px;
}
:root[data-theme="light"], :root:not([data-theme]) {
    --atlas-bg: #fbfaf7;
    --atlas-bg-elev: #ffffff;
    --atlas-bg-soft: #f3f0e9;
    --atlas-bg-tint: #efeadd;
    --atlas-ink: #0a0907;
    --atlas-ink-2: #2a261f;
    --atlas-ink-3: #4a4339;
    --atlas-muted: #6f6959;
    --atlas-line: #e8e2d2;
    --atlas-line-2: #d6cebc;
    --atlas-accent-fg: #ffffff;
    /* Fallbacks; the theme writes contrast-safe values per tone and mode. */
    --atlas-accent-text: var(--atlas-accent);
    --atlas-accent-ring: var(--atlas-accent);
    --atlas-primary-fg: #ffffff;
    --atlas-primary-text: var(--atlas-primary);
    /* Text-link colour. The plugin overrides it when the admin sets a
       separate link colour; otherwise links follow the accent. */
    --atlas-link: var(--atlas-accent);
    --atlas-gold: #b9882c;
    --atlas-teal: #0f766e;
    --atlas-plum: #6b21a8;
    --atlas-success: #0f9d58;
    /* Success as text (metric deltas, active subscription): 4.5:1 on every
       light surface of the three tones. The fill colour above stays. */
    --atlas-success-text: #0b7843;
    /* "Classic Refined" header (JTECH V1) — cyan accent + warm header zones */
    --atlas-cyan: #7cc3d1;
    --atlas-topbar-bg: linear-gradient(180deg, #eef6f7, #e9f2f4);
    --atlas-topbar-border: rgba(124,195,209,.35);
    --atlas-topbar-ink: #41555a;
    --atlas-menubar-bg: rgba(246,243,236,.85);
    --atlas-journal-bg: #e8dec9;
    --atlas-journal-border: #e2d6bd;
    --atlas-journal-meta: #6b624e;
    --atlas-shadow-card: 0 1px 2px rgba(10,9,7,.04), 0 8px 32px -16px rgba(10,9,7,.12);
    --atlas-shadow-hover: 0 1px 2px rgba(10,9,7,.06), 0 24px 48px -20px rgba(10,9,7,.18);
    --atlas-shadow-press: 0 1px 0 rgba(10,9,7,.04);
    --atlas-radius-sm: 6px;
    --atlas-radius: 10px;
    --atlas-radius-lg: 18px;
    --atlas-radius-xl: 24px;
}

/* ───────────── Reset / globals ───────────── */
.atlas, .atlas * { box-sizing: border-box; }
html.atlas-html, body.atlas-body { margin: 0; padding: 0; }
html.atlas-html {
    background: var(--atlas-bg);
    color: var(--atlas-ink);
    color-scheme: light dark;
    /* No scroll-behavior: smooth here. It would also apply to the scroll that
       brings a newly focused element into view, leaving it off-screen while
       the page glides. atlas.js smooths the scrolls a reader asks for. */
    /* Keyboard focus and in-page jumps stop below the sticky header, never
       underneath it (WCAG 2.4.11). atlas.js keeps --atlas-hdr-h equal to
       the header's height, which grows when its navigation wraps. */
    scroll-padding-top: calc(var(--atlas-hdr-h, 64px) + 12px);
}
body.atlas-body {
    background: var(--atlas-bg);
    color: var(--atlas-ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -.005em;
    font-feature-settings: "ss01","cv11";
    /* Assert the theme's default alignment. Journal custom stylesheets
       written for other themes often carry `body { text-align: justify }`,
       which inherits into every heading, card and label and deforms them
       (stretched last lines). Sections that WANT justify set it themselves
       with deeper selectors, so they still win. */
    text-align: start;
}
.atlas img { display: block; max-width: 100%; }
.atlas a { color: inherit; text-decoration: none; }
/* Light reset for buttons inside the theme. We deliberately DO NOT zero
   padding here — class‑based buttons (.atlas-btn, .atlas-cite-tab, …) set
   their own padding and a global `padding: 0` would override them due to
   the higher (0,1,1) descendant‑combinator specificity. */
.atlas button {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
}
.atlas hr { border: 0; border-top: 1px solid var(--atlas-line); }

/* type ramp */
.atlas .serif { font-family: var(--atlas-font-serif); font-style: normal; }
.atlas .serif-italic { font-family: var(--atlas-font-serif); font-style: italic; }
.atlas .mono, .atlas-mono { font-family: var(--atlas-font-mono); }
.atlas .kicker {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas .tabular { font-variant-numeric: tabular-nums; }

/* ───────────── Layout ───────────── */
.atlas-app {
    min-height: 100vh;
    background: var(--atlas-bg);
    position: relative;
    /* clip (not hidden) keeps horizontal overflow contained WITHOUT creating a
       scroll container — so the sticky nav header below still sticks. */
    overflow-x: clip;
}
.atlas-wrap {
    max-width: var(--atlas-container, 1280px);
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 720px) {
    .atlas-wrap { padding: 0 20px; }
}

/* Third-party / inherited plugin pages that wrap their content in the standard
   OJS ".page" element (instead of the theme's .atlas-wrap) — e.g. Country Stats'
   public page — would otherwise stretch full-width. Constrain them to the
   theme container so any such plugin page matches the rest of the site. */
.atlas-main > .page {
    max-width: var(--atlas-container, 1280px);
    margin: 0 auto;
    padding: 48px 32px 80px;
}
@media (max-width: 720px) {
    .atlas-main > .page { padding: 32px 20px 60px; }
}

/* OJS leakage cleanup: hide pkp default header/footer when theme is active */
body.atlas-body .pkp_structure_page > .pkp_structure_head,
body.atlas-body .pkp_structure_page > .pkp_structure_footer_wrapper,
body.atlas-body > header.pkp_structure_head,
body.atlas-body > .pkp_structure_footer_wrapper { display: none; }

body.atlas-body .pkp_structure_main,
body.atlas-body .pkp_structure_page { padding: 0; max-width: none; }

body.atlas-body .pkp_structure_content {
    background: var(--atlas-bg);
}

/* ───────────── Reading progress ───────────── */
.atlas-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 100;
    pointer-events: none;
    background: transparent;
}
.atlas-progress span {
    display: block;
    height: 100%;
    background: var(--atlas-accent);
    width: var(--p, 0%);
    transition: width .12s linear;
}

/* ───────────── Util / top bar (Classic Refined V1) ───────────── */
.atlas-utilbar {
    position: relative;
    font-size: 12px;
    border-bottom: 1px solid var(--atlas-topbar-border);
    background: var(--atlas-topbar-bg);
}
/* 3px cyan gradient rule pinned to the very top of the page */
.atlas-utilbar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #9ad4de, var(--atlas-cyan) 45%, #bfe0e6);
}
.atlas-utilbar-row { color: var(--atlas-topbar-ink); }
.atlas-utilbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 9px 0;
    color: var(--atlas-muted);
    flex-wrap: wrap;
}
.atlas-utilbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.atlas-utilbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Social icons inside the site utilbar (publisher level) — framed pill group,
   styled to match the language switcher on the right of the bar */
.atlas-utilbar-social {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--atlas-line);
    border-radius: 7px;
    background: rgba(255, 255, 255, .55);
}
.atlas-utilbar-social a {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: var(--atlas-muted);
    transition: all .15s;
}
.atlas-utilbar-social a:hover {
    color: var(--atlas-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
:root[data-theme="dark"] .atlas-utilbar-social {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .14);
}
:root[data-theme="dark"] .atlas-utilbar-social a:hover {
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
    color: var(--atlas-ink);
}
.atlas-pulse {
    position: relative;
    width: 7px;
    height: 7px;
    background: var(--atlas-success);
    border-radius: 999px;
    flex-shrink: 0;
}
.atlas-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    border: 1px solid var(--atlas-success);
    opacity: .5;
    animation: atlas-ring 2.6s ease-out infinite;
}
@keyframes atlas-ring {
    0% { transform: scale(.6); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}
/* Reduced motion: the dot stays, its ring stops pulsing. */
@media (prefers-reduced-motion: reduce) {
    .atlas-pulse::after { animation: none; }
}
.atlas-utilbar a { transition: color .15s; color: inherit; }
.atlas-utilbar a:hover { color: var(--atlas-ink); }
.atlas-utilbar-issn {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
}

/* Submit your manuscript — accent button in utilbar (V1 Classic Refined) */
.atlas-utilbar-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--atlas-primary);
    color: var(--atlas-primary-fg) !important;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .1px;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(120,50,20,.25);
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}
.atlas-utilbar-submit:hover {
    filter: brightness(1.08);
    color: var(--atlas-primary-fg) !important;
    transform: translateY(-1px);
}
.atlas-utilbar-submit svg { flex-shrink: 0; }

/* Language switcher — segmented region-code control, sized to match the
   Submit / user buttons (V1 Classic Refined) */
.atlas-utilbar-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    font-weight: 500;
    padding: 3px;
    border: 1px solid var(--atlas-line);
    border-radius: 7px;
    background: rgba(255,255,255,.55);
}
.atlas-utilbar-lang a {
    padding: 7px 10px;
    border-radius: 5px;
    line-height: 1;
    color: var(--atlas-muted);
    transition: all .15s;
}
.atlas-utilbar-lang a:hover { color: var(--atlas-ink); }
.atlas-utilbar-lang a.on {
    color: var(--atlas-ink);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .atlas-utilbar-lang {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.14);
}
:root[data-theme="dark"] .atlas-utilbar-lang a.on {
    background: rgba(255,255,255,.14);
    box-shadow: none;
    color: var(--atlas-ink);
}

/* Login / Register (logged-out) — pill buttons matching the user trigger
   and Submit button so the utilbar reads as one cohesive button row. */
.atlas-utilbar-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atlas-utilbar-auth a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--atlas-line);
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1px;
    color: var(--atlas-ink-2);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: all .15s;
}
.atlas-utilbar-auth a:hover {
    background: #fff;
    color: var(--atlas-ink);
    border-color: var(--atlas-line-2);
}
.atlas-utilbar-auth-sep { display: none; }
:root[data-theme="dark"] .atlas-utilbar-auth a {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
:root[data-theme="dark"] .atlas-utilbar-auth a:hover {
    background: rgba(255,255,255,.1);
}

/* Logged-in user dropdown trigger (compact, fits in utilbar) */
.atlas-utilbar-user {
    position: relative;
}
.atlas-utilbar-user .atlas-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--atlas-line);
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .1px;
    color: var(--atlas-ink-2);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: all .15s;
}
.atlas-utilbar-user .atlas-user-trigger:hover {
    background: #fff;
    color: var(--atlas-ink);
    border-color: var(--atlas-line-2);
}
:root[data-theme="dark"] .atlas-utilbar-user .atlas-user-trigger {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
}
:root[data-theme="dark"] .atlas-utilbar-user .atlas-user-trigger:hover {
    background: rgba(255,255,255,.1);
}
.atlas-utilbar-user .atlas-user-trigger > svg:first-child {
    flex-shrink: 0;
}
/* last-of-type: the task-count bubble is appended after the chevron. */
.atlas-utilbar-user .atlas-user-trigger > svg:last-of-type {
    opacity: .5;
    transition: transform .15s;
}
.atlas-utilbar-user .atlas-user-trigger[aria-expanded="true"] > svg:last-of-type {
    transform: rotate(180deg);
}

/* ───────────── Header ───────────── */
.atlas-hdr {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--atlas-menubar-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--atlas-line);
}

.atlas-hdr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
}
.atlas-nav-wrap { flex: 1 1 auto; min-width: 0; }
/* The actions cluster has to be able to give way: held rigid, it grew wider
   than a narrow phone and pushed the hamburger off the screen entirely. */
.atlas-hdr-actions { flex: 0 1 auto; min-width: 0; }
.atlas-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.atlas-brand-mark {
    width: 38px;
    height: 38px;
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -.02em;
    flex-shrink: 0;
    overflow: hidden;
}
.atlas-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.atlas-brand-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.atlas-brand-name b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -.015em;
    color: var(--atlas-ink);
}
.atlas-brand-name small {
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-top: 4px;
}

.atlas-nav {
    display: flex;
    align-items: center;
    column-gap: 6px;
    row-gap: 8px;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
/* When the items don't fit on one line they wrap; JS adds this class so the
   whole menu centres and the continuation row sits centred under the first. */
.atlas-nav.atlas-nav-wrapped { justify-content: center; }
.atlas-nav li { list-style: none; position: relative; }
/* Subtle engraved divider between top-level items — fades at the ends and
   carries a soft shadow to its right for a touch of depth. */
.atlas-nav > li + li::before {
    content: "";
    position: absolute;
    inset-inline-start: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, var(--atlas-line) 25%, var(--atlas-line) 75%, transparent);
    box-shadow: 1px 0 1px rgba(0, 0, 0, .06);
    pointer-events: none;
}
/* The first item of each (wrapped) row carries no leading divider — JS tags
   row-starts so no stray line hangs at the left of a wrapped row. */
.atlas-nav > li.atlas-rowstart::before { display: none; }
.atlas-nav > li > a,
.atlas-nav button {
    position: relative;
    display: inline-block;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--atlas-ink-2);
    border-radius: 8px;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
    line-height: 1.2;
}
/* More prominent, button-like hover: tint + soft lift + hairline ring. */
.atlas-nav > li > a:hover,
.atlas-nav > li > a:focus-visible,
.atlas-nav button:hover,
.atlas-nav button:focus-visible {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--atlas-line);
    transform: translateY(-1px);
}
/* Submenu indicator — a crisp chevron drawn from two borders. Extra
   right padding reserves room so the label never sits under the arrow. */
.atlas-nav li.has_submenu > a,
.atlas-nav li.has-sub > a,
.atlas-nav li.atlas-has-sub > a,
.atlas-nav li.atlas-has-sub > button,
.atlas-nav li:has(> ul) > a {
    padding-inline-end: 30px;
}
.atlas-nav li.has_submenu > a::after,
.atlas-nav li.has-sub > a::after,
.atlas-nav li.atlas-has-sub > a::after,
.atlas-nav li.atlas-has-sub > button::after,
.atlas-nav li:has(> ul) > a::after {
    content: "";
    position: absolute;
    inset-inline-end: 13px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    opacity: .55;
    transition: transform .18s ease, opacity .18s ease;
}
/* Flip the chevron up and emphasise it while the dropdown is open. */
.atlas-nav > li.has_submenu:hover > a::after,
.atlas-nav > li.has-sub:hover > a::after,
.atlas-nav > li.atlas-has-sub:hover > a::after,
.atlas-nav > li.atlas-has-sub:hover > button::after,
.atlas-nav > li:has(> ul):hover > a::after,
.atlas-nav > li.has_submenu:focus-within > a::after,
.atlas-nav > li.has-sub:focus-within > a::after,
.atlas-nav > li.atlas-has-sub:focus-within > a::after,
.atlas-nav > li.atlas-has-sub.atlas-sub-open > button::after,
.atlas-nav > li:has(> ul):focus-within > a::after {
    transform: translateY(-30%) rotate(-135deg);
    opacity: .95;
}
/* Hover bridge: a transparent strip filling the 6px gap between the parent
   item and its dropdown, so the pointer never leaves a hoverable area on
   the way down (otherwise the menu closes before you reach it). Only present
   while hovering, so it never blocks clicks below the nav when closed. */
.atlas-nav > li.atlas-has-sub:hover::after,
.atlas-nav > li.has_submenu:hover::after,
.atlas-nav > li.has-sub:hover::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 49;
}
/* A parent that owns a submenu is a heading, not a link → no pointer cursor */
.atlas-nav > li.atlas-has-sub > a,
.atlas-nav > li.atlas-has-sub > button { cursor: default; }
.atlas-nav li:hover > .atlas-submenu,
.atlas-nav li:focus-within > .atlas-submenu,
.atlas-nav li:hover > ul,
.atlas-nav li:focus-within > ul {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Parents turned into buttons by initPrimaryNav follow the disclosure
   pattern: focus alone leaves the dropdown shut, Enter / Space opens it
   (.atlas-sub-open), hover still does. The :focus-within rule above stays
   for a menu the script has not enhanced. Dismissed with Escape
   (.atlas-sub-closed), it stays closed while the pointer is still on the
   parent. A shut dropdown is hidden, not just transparent: its links leave
   the tab order (visibility switches at the end of the fade). */
.atlas-nav > li.atlas-has-sub:not(:hover):not(.atlas-sub-open) > .atlas-submenu,
.atlas-nav > li.atlas-has-sub:not(:hover):not(.atlas-sub-open) > ul,
.atlas-nav > li.atlas-has-sub.atlas-sub-closed > .atlas-submenu,
.atlas-nav > li.atlas-has-sub.atlas-sub-closed > ul {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    visibility: hidden;
}
.atlas-nav > li.atlas-has-sub.atlas-sub-closed > button::after {
    transform: translateY(-60%) rotate(45deg);
    opacity: .55;
}
.atlas-nav .atlas-submenu,
.atlas-nav li > ul {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: -8px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    box-shadow: var(--atlas-shadow-hover);
    min-width: 240px;
    padding: 8px;
    z-index: 50;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: all .18s ease;
    list-style: none;
    margin: 0;
}
.atlas-nav .atlas-submenu a,
.atlas-nav li > ul a {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--atlas-ink-2);
    border-radius: 8px;
    transition: background .12s;
    line-height: 1.2;
}
.atlas-nav .atlas-submenu a:hover,
.atlas-nav li > ul a:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
}

.atlas-hdr-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Desktop layout: the actions keep their full width and the navigation,
   which wraps its items onto a second line, gives way. Squeezed instead (a
   large page or text zoom on a mid-width screen), the search label was cut
   to "S." and the last social icons were pushed past the screen edge, where
   they could still take keyboard focus but not be seen. */
@media (min-width: 921px) {
    .atlas-hdr-actions { flex-shrink: 0; }
}
.atlas-iconbtn {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    border-radius: 10px;
    transition: all .15s;
    color: var(--atlas-ink-2);
}
.atlas-iconbtn:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
    border-color: var(--atlas-line-2);
}
.atlas-iconbtn:active { transform: scale(.96); }

.atlas-searchbtn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 14px;
    height: 36px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    font-size: 13px;
    color: var(--atlas-muted);
    min-width: 120px;
    max-width: 200px;
    border-radius: 10px;
    transition: background .15s, border-color .15s, color .15s;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
}
.atlas-searchbtn:hover {
    background: var(--atlas-bg-soft);
    border-color: var(--atlas-line-2);
    color: var(--atlas-ink-2);
}
/* Placeholder text — single line, ellipsizes when it would otherwise wrap */
.atlas-searchbtn > svg { flex-shrink: 0; }
.atlas-searchbtn > span:not(.atlas-kbd) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
}
.atlas-searchbtn .atlas-kbd {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--atlas-line-2);
    border-radius: 4px;
    background: var(--atlas-bg);
    color: var(--atlas-muted);
}

.atlas-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.005em;
    border-radius: 10px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    color: var(--atlas-ink);
    transition: all .18s;
    cursor: pointer;
    text-decoration: none;
}
.atlas-btn:hover {
    background: var(--atlas-bg-soft);
    border-color: var(--atlas-line-2);
    transform: translateY(-1px);
    box-shadow: var(--atlas-shadow-press);
    color: var(--atlas-ink);
}
.atlas-btn:active { transform: translateY(0); }
.atlas-btn-primary {
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    border-color: var(--atlas-ink);
}
.atlas-btn-primary:hover {
    background: var(--atlas-ink-2);
    color: var(--atlas-bg);
    border-color: var(--atlas-ink-2);
}
.atlas-btn-accent {
    background: var(--atlas-primary);
    color: var(--atlas-primary-fg);
    border-color: var(--atlas-primary);
}
.atlas-btn-accent:hover {
    background: var(--atlas-primary);
    filter: brightness(1.08);
    color: var(--atlas-primary-fg);
}
.atlas-btn-ghost { border-color: transparent; background: transparent; }
.atlas-btn-ghost:hover { background: var(--atlas-bg-soft); }
.atlas-btn-outline { background: transparent; }
.atlas-btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

/* social icons in header */
.atlas-hdr-social {
    display: flex;
    align-items: center;
    gap: 4px;
    order: 5;            /* sit at the far right of the actions row */
    margin-inline-start: 8px;
}
.atlas-hdr-social a {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--atlas-ink-3);
    transition: all .15s;
}
.atlas-hdr-social a:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-accent-text);
}

/* language switcher */
.atlas-lang-switch {
    display: flex;
    gap: 4px;
    align-items: center;
}
.atlas-lang-switch a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1;
    transition: all .15s;
}
.atlas-lang-switch a.active,
.atlas-lang-switch a:hover {
    background: var(--atlas-bg-soft);
    box-shadow: 0 0 0 1px var(--atlas-line-2);
}

/* mobile hamburger */
.atlas-mobile-toggle {
    display: none;
    order: 6;            /* stays rightmost on mobile, after the social cluster */
    flex: 0 0 auto;      /* never shrinks — losing it strands the whole menu */
    width: 36px;
    height: 36px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    border-radius: 10px;
    padding: 9px 8px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.atlas-mobile-toggle span {
    display: block;
    height: 2px;
    background: var(--atlas-ink);
    border-radius: 2px;
    transition: all .25s;
}
@media (max-width: 920px) {
    .atlas-nav { display: none; }
    .atlas-searchbtn { min-width: 140px; }
    .atlas-searchbtn span:not(.atlas-kbd) { display: none; }
    .atlas-mobile-toggle { display: flex; }
    .atlas-hdr-mobile.open .atlas-nav {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        /* nowrap: the desktop nav wraps its row; in a max-height column that
           would wrap overflowing items into a hidden SIDE column instead of
           letting the panel scroll. */
        flex-wrap: nowrap;
        background: var(--atlas-bg-elev);
        border-bottom: 1px solid var(--atlas-line);
        padding: 12px 20px;
        gap: 4px;
        /* A long menu must scroll inside its own panel, never overflow the
           screen. 130px covers the sticky header (plus the utilbar while the
           page is unscrolled); dvh tracks the real mobile viewport. */
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* The page behind stays scrollable while the menu is open: the panel
       rides along with the sticky header, so readers can look around
       without dismissing the menu first. A tap outside closes it (JS).
       Locking the page here used to break the sticky header outright —
       with no scroll container it fell back to the top of the document,
       taking the menu off-screen on any scrolled page. */
    /* flex-shrink 0: without it a column-flex panel with max-height squashes
       its items instead of overflowing, so the menu could never scroll. */
    .atlas-hdr-mobile.open .atlas-nav li { width: 100%; flex-shrink: 0; }
    /* Vertical dividers + hover lift don't suit the stacked mobile menu */
    .atlas-hdr-mobile.open .atlas-nav > li + li::before { display: none; }
    .atlas-hdr-mobile.open .atlas-nav > li > a:hover,
    .atlas-hdr-mobile.open .atlas-nav button:hover { transform: none; box-shadow: inset 0 0 0 1px var(--atlas-line); }
    .atlas-hdr-mobile.open .atlas-nav > li > a,
    .atlas-hdr-mobile.open .atlas-nav button { width: 100%; text-align: start; }
    .atlas-hdr-mobile.open .atlas-nav .atlas-submenu,
    .atlas-hdr-mobile.open .atlas-nav li > ul {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 16px;
        background: transparent;
    }
    /* Accordion: submenus start collapsed and the parent button toggles
       them (.atlas-sub-open, set by JS). Scoped to .atlas-has-sub — the
       class only exists once JS ran, so without JS the submenu stays
       statically visible and nothing becomes unreachable. */
    .atlas-hdr-mobile.open .atlas-nav li.atlas-has-sub > .atlas-submenu,
    .atlas-hdr-mobile.open .atlas-nav li.atlas-has-sub > ul { display: none; }
    .atlas-hdr-mobile.open .atlas-nav li.atlas-sub-open > .atlas-submenu,
    .atlas-hdr-mobile.open .atlas-nav li.atlas-sub-open > ul { display: block; }
    /* The chevron follows the toggle state, not hover/focus (a tapped
       button keeps focus, which would leave the desktop focus-flip stuck). */
    .atlas-hdr-mobile.open .atlas-nav > li.atlas-has-sub > button::after {
        transform: translateY(-60%) rotate(45deg);
        opacity: .55;
    }
    .atlas-hdr-mobile.open .atlas-nav > li.atlas-has-sub.atlas-sub-open > button::after {
        transform: translateY(-30%) rotate(-135deg);
        opacity: .95;
    }
}

/* Below this the header simply runs out of room: the search button drops its
   comfort width so the social cluster and the hamburger both still fit on
   one line. Nothing is hidden — the button just gets tighter. */
@media (max-width: 480px) {
    .atlas-searchbtn { min-width: 0; }
}

/* Wrapped utility bar: the user chip starts its own line, so its dropdown
   opens outwards from that edge. Anchored the other way it would reach back
   past the screen edge and hide most of its own entries. */
@media (max-width: 920px) {
    .atlas-utilbar-user .atlas-user-menu {
        inset-inline-start: 0;
        inset-inline-end: auto;
    }
}


/* ───────────── Masthead banner (light / editorial) ─────────────
   Stays in the warm, airy character of the theme: cream base, refined
   ink serif title. A background image (if set) is washed with a heavy
   cream overlay so it reads as a faint texture, never a dark photo. */
.atlas-masthead {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--atlas-line);
    background-color: var(--atlas-bg);
    background-size: cover;
    background-position: center;
    color: var(--atlas-ink);
    isolation: isolate;
}
/* Heights per mode */
.atlas-masthead-tall    { min-height: 270px; justify-content: center; text-align: center; }
.atlas-masthead-compact { min-height: 180px; }
.atlas-masthead-slim    { min-height: 84px; }

/* Warm editorial mesh when no background image is set (matches the hero) */
.atlas-masthead:not(.has-bg) {
    background:
        radial-gradient(560px 420px at 80% -20%, var(--atlas-accent-soft, rgba(208,70,23,.16)), transparent 70%),
        radial-gradient(480px 380px at 12% 130%, rgba(15,118,110,.08), transparent 70%),
        var(--atlas-bg-soft);
}

/* Cream wash over the background image — keeps it subtle + text legible */
.atlas-masthead.has-bg .atlas-masthead-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(251,250,247,.80) 0%, rgba(251,250,247,.90) 100%);
}
:root[data-theme="dark"] .atlas-masthead.has-bg .atlas-masthead-scrim {
    background: linear-gradient(180deg, rgba(13,12,9,.78) 0%, rgba(13,12,9,.90) 100%);
}
.atlas-masthead:not(.has-bg) .atlas-masthead-scrim { display: none; }

/* Soft accent glow (decorative, very subtle) */
.atlas-masthead-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    top: -220px;
    right: -130px;
    background: radial-gradient(circle, var(--atlas-accent-soft, rgba(208,70,23,.16)), transparent 65%);
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

/* Corner mono labels (muted editorial flair) */
.atlas-masthead-corner {
    position: absolute;
    z-index: 1;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
/* Masthead corner shows the journal's ISSN / e-ISSN (when set), one per line. */
.atlas-masthead-corner .atlas-mh-issn { display: block; line-height: 1.65; }
/* Align corner labels to the content wrap edges on wide screens
   (instead of the far viewport edges), with a 32px fallback. */
.atlas-masthead-corner.tl { top: 22px; left: max(32px, calc(50% - var(--atlas-container, 1280px) / 2 + 32px)); }
.atlas-masthead-corner.tr { top: 22px; right: max(32px, calc(50% - var(--atlas-container, 1280px) / 2 + 32px)); }
@media (max-width: 720px) {
    .atlas-masthead-corner { display: none; }
}

/* Masthead CTA button row (homepage) */
.atlas-masthead-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}
.atlas-masthead-compact .atlas-masthead-cta,
.atlas-masthead-slim .atlas-masthead-cta { justify-content: flex-start; }

/* Primary masthead CTA — ink outline that flips with the theme:
   light → black text + black border, dark → white text + white border.
   Scoped under .atlas-masthead (specificity 0,0,3,2) so it beats the
   hard-lock .atlas-btn rules that appear later in the file. */
body.atlas-body .atlas-masthead a.atlas-masthead-submit {
    background: transparent;
    border: 1.5px solid var(--atlas-ink);
    color: var(--atlas-ink);
}
body.atlas-body .atlas-masthead a.atlas-masthead-submit:hover {
    background: var(--atlas-ink);
    border-color: var(--atlas-ink);
    color: var(--atlas-bg);
    transform: translateY(-1px);
}

.atlas-masthead-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}
.atlas-masthead-tall .atlas-masthead-inner { align-items: center; }
.atlas-masthead-compact .atlas-masthead-inner,
.atlas-masthead-slim .atlas-masthead-inner { align-items: flex-start; }

/* Logo cap. Width is left to the global ".atlas img { max-width: 100% }",
   which outranks this selector anyway, so the banner scales with the column
   and this height limit is what actually bounds it. */
.atlas-masthead-logo {
    max-height: 120px;
    width: auto;
    margin-bottom: 2px;
}
.atlas-masthead-title {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.05;
    letter-spacing: -.022em;
    margin: 0;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-masthead-title em { font-style: italic; color: var(--atlas-accent-text); }
/* "Logo only" — the logo is the H1, so drop the heading's type metrics. */
.atlas-masthead-title-logo {
    line-height: 0;
    font-size: 0;
}
.atlas-masthead-sub {
    font-family: var(--atlas-font-mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin: 0;
}

/* Inner-page (compact) — small home link kicker + page title */
.atlas-masthead-home {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted) !important;
    transition: color .15s;
}
.atlas-masthead-home:hover { color: var(--atlas-ink) !important; }
.atlas-masthead-logo-sm { max-height: 26px; width: auto; }
.atlas-masthead-pagetitle {
    font-size: clamp(28px, 4vw, 46px);
    color: var(--atlas-ink);
}

/* Slim — vertically center the single line */
.atlas-masthead-slim { align-items: center; }
.atlas-masthead-slim .atlas-masthead-home {
    font-size: 12.5px;
    color: var(--atlas-ink-2) !important;
}
.atlas-masthead-slim .atlas-masthead-home:hover { color: var(--atlas-ink) !important; }
.atlas-masthead-slim .atlas-masthead-logo-sm { max-height: 28px; }

@media (max-width: 720px) {
    .atlas-masthead-tall    { min-height: 220px; }
    .atlas-masthead-compact { min-height: 148px; }
    .atlas-masthead-logo    { max-height: 84px; }
}

/* ───────────── Nameplate strip / journal line (inner pages, V1) ─────────────
   Mirrors the "Classic Refined" journal masthead line: warm beige band,
   serif journal title on the left, two right-aligned monospace meta lines. */
.atlas-nameplate-bar {
    background: var(--atlas-journal-bg);
    border-top: 1px solid var(--atlas-journal-border);
    border-bottom: 1px solid var(--atlas-journal-border);
}
.atlas-nameplate-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 17px;
    padding-bottom: 17px;
    flex-wrap: wrap;
}
.atlas-nameplate-id {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    color: var(--atlas-ink) !important;
}
.atlas-nameplate-id:hover .atlas-nameplate-name { color: var(--atlas-accent-text); }
.atlas-nameplate-logo {
    height: 40px;
    width: auto;
    max-width: 230px;
    object-fit: contain;
    flex: none;
}
.atlas-nameplate-sep {
    width: 1px;
    height: 22px;
    background: var(--atlas-line-2);
    flex: none;
}
.atlas-nameplate-name {
    font-family: var(--atlas-font-serif);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: -.012em;
    line-height: 1.12;
    color: #322d24;
    transition: color .15s;
}
:root[data-theme="dark"] .atlas-nameplate-name { color: var(--atlas-ink); }
/* Narrow screens (WCAG 1.4.10): the name wraps beside the logo while its
   longest word fits there, and moves onto its own line under the logo when
   it does not - instead of being squeezed past the screen edge. A zero flex
   basis makes that decision on the longest word, so wider screens lay out
   exactly as before. The divider is hidden once the name has moved down. */
.atlas-nameplate-id { flex-wrap: wrap; row-gap: 6px; }
.atlas-nameplate-name { flex: 1 1 0%; overflow-wrap: break-word; }
.atlas-nameplate-id.is-stacked .atlas-nameplate-sep { display: none; }
.atlas-nameplate-meta {
    margin-inline-start: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: end;
}
.atlas-nameplate-issn {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-journal-meta);
    white-space: nowrap;
}
.atlas-nameplate-license {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-journal-meta);
    white-space: nowrap;
}
.atlas-nameplate-license a {
    color: var(--atlas-accent-text);
    transition: opacity .15s;
}
.atlas-nameplate-license a:hover { opacity: .7; }
.atlas-nameplate-head {
    background: var(--atlas-bg);
}
.atlas-nameplate-head .atlas-wrap {
    padding-top: 30px;
    padding-bottom: 36px;
}
.atlas-nameplate-title {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: 46px;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: var(--atlas-ink);
    margin: 0;
}
@media (max-width: 720px) {
    .atlas-nameplate-logo { height: 32px; max-width: 170px; }
    .atlas-nameplate-name { font-size: 16px; }
    .atlas-nameplate-issn { font-size: 9.5px; }
    .atlas-nameplate-license { font-size: 9px; }
    .atlas-nameplate-title { font-size: 34px; }
    .atlas-nameplate-head .atlas-wrap { padding-top: 22px; padding-bottom: 28px; }
}

/* ───────────── Accessibility helpers ─────────────
   .atlas-sr-only keeps text in the accessibility tree while taking it out of
   the visual layout — for controls that show only an icon. The clip-path
   pair (not display:none) is what keeps screen readers announcing it. */
.atlas-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Same, but comes into view once focused — the skip link uses this shape. */
.atlas a.atlas-skip-link {
    position: absolute;
    z-index: 200;
    inset-inline-start: 12px;
    top: -100px;
    padding: 10px 18px;
    border-radius: 0 0 10px 10px;
    /* Ink on paper, not the brand colour: the brand is admin-chosen and in
       dark mode that pairing measured 2.67:1, below the 4.5:1 AA floor.
       These two tokens invert together, so the chip stays readable. */
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    font-family: var(--atlas-font-sans);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .15s ease-in-out;
}
.atlas a.atlas-skip-link:focus {
    top: 0;
    outline: 3px solid var(--atlas-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--atlas-focus-halo);
}
/* The target is programmatically focusable so the jump moves the caret too,
   but it must not grow a ring of its own when clicked. */
.atlas-main:focus { outline: none; }
.atlas-main:focus-visible { outline: 3px solid var(--atlas-focus); outline-offset: -3px; box-shadow: none; }

/* Hide all breadcrumbs site-wide (theme + OJS core — not used in this theme) */
body.atlas-body .atlas-breadcrumb,
body.atlas-body .cmp_breadcrumbs,
body.atlas-body nav.cmp_breadcrumbs,
body.atlas-body .pkp_structure_breadcrumb { display: none !important; }

/* Hide OJS core recommendation-plugin output on the article page. The
   theme renders its own "Similar articles in this journal" block, so the
   plain lists injected by recommendBySimilarity / recommendByAuthor via
   the Article::Footer::PageFooter hook would be a duplicate. */
body.atlas-body #articlesBySimilarityList,
body.atlas-body #articlesBySameAuthorList { display: none !important; }

/* ───────────── Generic content pages (prose, tables, forms) ───────────── */
.atlas-prose {
    font-size: 16px;
    line-height: 1.7;
    color: var(--atlas-ink-2);
}
.atlas-prose h2 {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -.015em;
    color: var(--atlas-ink);
    margin: 40px 0 14px;
}
.atlas-prose h3 {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 22px;
    color: var(--atlas-ink);
    margin: 32px 0 12px;
}
.atlas-prose p { margin: 0 0 16px; }
.atlas-prose a { color: var(--atlas-link); text-decoration: underline; text-underline-offset: 2px; }
.atlas-prose ul, .atlas-prose ol { padding-inline-start: 20px; margin: 0 0 16px; }
.atlas-prose li { margin-bottom: 8px; }

/* Section heading reused by subscription/category pages */
.atlas-page-h3 {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    margin: 40px 0 8px;
}

/* Data table */
.atlas-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 8px;
    font-size: 14.5px;
    color: var(--atlas-ink-2);
}
.atlas-table th {
    text-align: start;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--atlas-line-2);
}
.atlas-table td {
    padding: 14px;
    border-bottom: 1px solid var(--atlas-line);
    vertical-align: top;
}
.atlas-table .subscription_name { font-weight: 600; color: var(--atlas-ink); }
.atlas-table .subscription_description { font-size: 13px; color: var(--atlas-muted); margin-top: 4px; }
.atlas-sub-active   { color: var(--atlas-success-text); font-weight: 600; }
.atlas-sub-disabled { color: var(--atlas-muted); }

/* Category intro */
.atlas-cat-intro { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 28px; }
.atlas-cat-cover { width: 160px; flex: none; border-radius: var(--atlas-radius); border: 1px solid var(--atlas-line); }
.atlas-cat-count {
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-bottom: 12px;
}
@media (max-width: 600px) {
    .atlas-cat-intro { flex-direction: column; }
    .atlas-cat-cover { width: 120px; }
}

/* Simple form field block (subscription purchase forms) */
.atlas-field { margin-bottom: 20px; }
.atlas-field > label { display: block; }
.atlas-field .label {
    display: block;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-bottom: 7px;
}
.atlas-field input[type="text"],
.atlas-field select,
.atlas-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--atlas-line-2);
    border-radius: var(--atlas-radius-sm);
    background: var(--atlas-bg-elev);
    color: var(--atlas-ink);
    font: inherit;
    font-size: 15px;
}
.atlas-field textarea { min-height: 90px; resize: vertical; }
.atlas-field .description { font-size: 13px; color: var(--atlas-muted); margin: 6px 0 0; }
.atlas-field .required { color: var(--atlas-accent-text); }

/* ── Submissions page ── */
.atlas-sub-intro {
    font-size: 17px;
    line-height: 1.6;
    color: var(--atlas-ink-2);
    padding: 18px 22px;
    border: 1px solid var(--atlas-line-2);
    border-inline-start: 3px solid var(--atlas-accent-ring);
    border-radius: var(--atlas-radius);
    background: var(--atlas-bg-elev);
}
.atlas-sub-intro a { color: var(--atlas-link); text-decoration: underline; text-underline-offset: 2px; }
.atlas-sub-cta { margin-top: 20px; }
.atlas-sub-section { margin-top: 8px; }
.atlas-sub-sectionlink {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--atlas-ink-2);
}
.atlas-sub-sectionlink a { color: var(--atlas-link); text-decoration: underline; text-underline-offset: 2px; }

.atlas-checklist {
    list-style: none;
    margin: 12px 0 8px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.atlas-checklist li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--atlas-ink-2);
}
.atlas-check-ico {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
}

/* ── Contact page ── */
.atlas-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    gap: 20px;
    justify-content: start;
}
.atlas-contact-card {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 24px 24px 26px;
    box-shadow: var(--atlas-shadow-card);
}
.atlas-contact-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-bottom: 16px;
}
.atlas-contact-badge {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
}
.atlas-contact-name {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    margin-bottom: 2px;
}
.atlas-contact-aff {
    font-size: 13.5px;
    color: var(--atlas-muted);
    margin-bottom: 10px;
}
.atlas-contact-addr {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--atlas-ink-2);
}
.atlas-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 14.5px;
    color: var(--atlas-ink-2);
    transition: color .15s;
    word-break: break-word;
}
.atlas-contact-row svg { flex: none; color: var(--atlas-muted); transition: color .15s; }
.atlas-contact-row:hover { color: var(--atlas-accent-text); }
.atlas-contact-row:hover svg { color: var(--atlas-accent-text); }
@media (max-width: 600px) {
    .atlas-contact-grid { grid-template-columns: 1fr; }
}

/* ───────────── Article: share tray (toggled by Share button) ───────────── */
.atlas-share-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding-inline-end: 264px;
    animation: atlas-share-in .2s ease;
}
.atlas-share-tray[hidden] { display: none; }
@media (max-width: 1099px) { .atlas-share-tray { padding-inline-end: 0; } }
@keyframes atlas-share-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.atlas-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: var(--atlas-font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--atlas-ink-2);
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line-2);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.atlas-share-btn:hover,
.atlas-share-btn:focus-visible {
    color: var(--atlas-accent-text);
    border-color: var(--atlas-accent-ring);
    background: var(--atlas-accent-soft);
    transform: translateY(-1px);
}
.atlas-share-btn svg {
    flex: none;
    color: var(--atlas-muted);
    transition: color .15s, transform .15s;
}
.atlas-share-btn:hover svg,
.atlas-share-btn:focus-visible svg {
    color: var(--atlas-accent-text);
    transform: scale(1.06);
}
/* Brand sub-classes (s-x, s-fb …) kept on the markup for semantic clarity
   but no color override is applied — every button shares the same
   editorial palette so the row reads as part of the theme, not as a
   loud strip of vendor colours. */

/* Copy is icon-only — square padding so it doesn't look stretched next
   to the labelled platform pills. A toast confirms the action so the
   missing text label isn't a discoverability problem. */
.atlas-share-btn.s-copy {
    padding: 9px;
}

/* ───────────── Article: references show-more ───────────── */
[data-refs]:not(.expanded) .atlas-ref-extra { display: none; }
.atlas-refs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 9px 16px;
    border: 1px solid var(--atlas-line-2);
    border-radius: 999px;
    background: var(--atlas-bg-elev);
    color: var(--atlas-ink-2);
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .15s;
}
.atlas-refs-toggle:hover { border-color: var(--atlas-accent-ring); color: var(--atlas-accent-text); }
.atlas-refs-toggle svg { transition: transform .2s; }
[data-refs].expanded ~ .atlas-refs-toggle svg,
.atlas-refs-toggle.is-open svg { transform: rotate(180deg); }

/* Outline action item (How to cite → opens modal) */
.atlas-outline-action .atlas-outline-ix { color: var(--atlas-accent-text); }

/* ───────────── Article: how-to-cite modal ───────────── */
.atlas-cite-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 9, 7, .45);
    backdrop-filter: blur(3px);
    animation: atlas-fade-in .18s ease;
}
.atlas-cite-modal.hidden { display: none; }
@keyframes atlas-fade-in { from { opacity: 0; } to { opacity: 1; } }
.atlas-cite-modal-box {
    width: 100%;
    max-width: 680px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    box-shadow: var(--atlas-shadow-hover);
    overflow: hidden;
    animation: atlas-modal-pop .2s ease;
}
@keyframes atlas-modal-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.atlas-cite-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--atlas-line);
}
.atlas-cite-modal-head h3 {
    margin: 0;
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 21px;
    color: var(--atlas-ink);
}
.atlas-cite-modal-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg);
    color: var(--atlas-ink-2);
    cursor: pointer;
    transition: all .15s;
}
.atlas-cite-modal-close:hover { border-color: var(--atlas-accent-ring); color: var(--atlas-accent-text); }
.atlas-cite-modal .atlas-cite-card {
    border: 0;
    border-radius: 0;
    margin: 0;
}

/* ───────────── Hero ───────────── */
.atlas-hero {
    position: relative;
    padding: 64px 0 80px;
    border-bottom: 1px solid var(--atlas-line);
    overflow: hidden;
}
.atlas-hero-mesh {
    position: absolute;
    inset: 0;
    opacity: .7;
    pointer-events: none;
    z-index: 0;
}
.atlas-hero-mesh::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--atlas-accent-soft, rgba(208,70,23,.18)), transparent 65%);
    top: -180px;
    right: -120px;
    filter: blur(8px);
}
.atlas-hero-mesh::after {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15,118,110,.14), transparent 65%);
    bottom: -160px;
    left: -80px;
    filter: blur(8px);
}
:root[data-theme="dark"] .atlas-hero-mesh::after { background: radial-gradient(circle, rgba(94,234,212,.1), transparent 65%); }

.atlas-hero-inner { position: relative; z-index: 1; }

.atlas-hero-tags {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.atlas-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--atlas-ink-2);
}
.atlas-tag-pill .atlas-dot {
    width: 6px;
    height: 6px;
    background: var(--atlas-accent);
    border-radius: 999px;
}
.atlas-tag-pill.live .atlas-dot {
    background: var(--atlas-success);
    box-shadow: 0 0 0 4px rgba(15,157,88,.18);
}

.atlas-hero-grid {
    display: grid;
    /* Wide text column on the left; the cover stays its own (modest) size on
       the right so it never balloons — only the text area grows. */
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: center;
}
@media (max-width: 920px) {
    .atlas-hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.atlas-hero-title {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.07;
    letter-spacing: -.018em;
    margin: 0 0 28px;
    color: var(--atlas-ink);
    text-wrap: balance;
    /* A word longer than the text column breaks instead of running under
       the cover beside it. "anywhere", because the title is split into
       inline-block word spans for its entrance, and break-word never
       breaks inside those. */
    overflow-wrap: anywhere;
}
.atlas-hero-title em {
    font-style: italic;
    color: var(--atlas-accent-text);
    font-weight: 400;
}
.atlas-hero-lede {
    font-size: 20px;
    line-height: 1.5;
    color: var(--atlas-ink-3);
    max-width: 54ch;
    margin: 0 0 36px;
    text-wrap: pretty;
}
/* Author names under an Editor's Pick hero title */
.atlas-hero-authors {
    font-family: var(--atlas-font-mono);
    font-size: 13.5px;
    letter-spacing: .02em;
    color: var(--atlas-ink-3);
    margin: 0 0 32px;
    max-width: 54ch;
    line-height: 1.5;
}
.atlas-hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.atlas-hero-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--atlas-line);
    font-size: 13px;
    color: var(--atlas-muted);
    flex-wrap: wrap;
}
.atlas-hero-meta .atlas-dot-sep {
    width: 3px;
    height: 3px;
    background: var(--atlas-line-2);
    border-radius: 999px;
}
.atlas-hero-meta b { color: var(--atlas-ink); font-weight: 600; }

/* hero visual */
/* Make the whole hero slide (title + cover) navigate to the article. */
.atlas-hero-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 100%;
    transition: background-size .35s ease, color .15s;
}
.atlas-hero-title a:hover,
.atlas-hero-title a:focus-visible {
    color: var(--atlas-accent-text);
    background-size: 100% 1px;
}
.atlas-hero-art-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
    color: transparent;
    border-radius: inherit;
    cursor: pointer;
}
/* The link covers the whole cover, and the cover clips anything outside
   it, so its ring is drawn inside, with the halo on both sides of the
   outline. The extra .atlas outranks the general .atlas :focus-visible
   rule, which comes later and would push the ring outside (and out of
   sight). */
.atlas .atlas-hero-art-link:focus-visible {
    outline: 2px solid var(--atlas-focus);
    outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--atlas-focus-halo);
    border-radius: inherit;
}

/* ── Hover choreography for the clickable cover ── */
.atlas-hero-art:has(.atlas-hero-art-link) {
    cursor: pointer;
    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
    will-change: transform;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover {
    transform: translateY(-6px);
    box-shadow:
        0 26px 56px -22px rgba(10,9,7,.32),
        0 0 0 1px var(--atlas-accent-soft);
}
.atlas-hero-art .atlas-ring,
.atlas-hero-art .atlas-ovl,
.atlas-hero-art .atlas-corner,
.atlas-hero-art .atlas-glyph,
.atlas-hero-art .atlas-hero-art-authors {
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        opacity .35s ease,
        letter-spacing .35s ease;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-ring.r1 {
    transform: scale(1.06) rotate(6deg);
    opacity: .95;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-ring.r2 {
    transform: scale(1.10) rotate(-8deg);
    opacity: .85;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-corner.tl {
    transform: translate(-2px, -2px);
    letter-spacing: .22em;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-corner.tr {
    transform: translate(2px, -2px);
    letter-spacing: .22em;
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-glyph {
    transform: scale(1.05) rotate(-2deg);
}
.atlas-hero-art:has(.atlas-hero-art-link):hover .atlas-hero-art-authors {
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .atlas-hero-art:has(.atlas-hero-art-link),
    .atlas-hero-art:has(.atlas-hero-art-link):hover,
    .atlas-hero-art .atlas-ring,
    .atlas-hero-art .atlas-ovl,
    .atlas-hero-art .atlas-corner,
    .atlas-hero-art .atlas-glyph,
    .atlas-hero-art .atlas-hero-art-authors {
        transition: none;
        transform: none !important;
    }
}

.atlas-hero-art {
    position: relative;
    aspect-ratio: 5/6;
    border-radius: var(--atlas-radius-xl);
    overflow: hidden;
    background: var(--atlas-primary-grad);
    box-shadow: var(--atlas-shadow-hover);
}
.atlas-hero-art .atlas-ovl {
    position: absolute;
    inset: 0;
    /* Scrim under the cover text. Its strength is computed from the primary
       colour (--atlas-cover-scrim, 0 when the colour needs no help). The
       former white sheen sat right under the text and lowered its contrast. */
    background: linear-gradient(180deg, rgba(0, 0, 0, var(--atlas-cover-scrim, 0)) 0%, rgba(0, 0, 0, var(--atlas-cover-scrim, 0)) 55%, rgba(0, 0, 0, 0) 90%);
}
.atlas-hero-art .atlas-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,.92);
    font-size: clamp(92px, 13vw, 168px);
    line-height: .8;
    letter-spacing: -.04em;
    text-shadow: 0 30px 80px rgba(0,0,0,.25);
}

/* Editor's Pick — author "contributors" panel inside the cover */
.atlas-hero-art-authors {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 14px;
    padding: 64px 32px;
    overflow: hidden;
    z-index: 1;
}
.atlas-hero-art-author {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    padding-inline-start: 16px;
}
.atlas-hero-art-author::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    bottom: 7px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
}
.atlas-hero-art-author-name {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.012em;
    color: rgba(255, 255, 255, .97);
    text-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.atlas-hero-art-author-flag { font-size: 15px; line-height: 1; }
.atlas-hero-art-author-aff {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    line-height: 1.4;
    color: rgba(255, 255, 255, .95);
    /* Shown whole. A line clamp cut the affiliation, and cut more of it once a
       reader widened text spacing (WCAG 1.4.12); when the cover runs out of
       room, initHeroAuthors() drops the last authors into "+N more" instead. */
}
.atlas-hero-art-more {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    padding-inline-start: 16px;
}
.atlas-hero-art[data-tone="cream"] .atlas-hero-art-author-name { color: rgba(58, 38, 15, .95); text-shadow: none; }
.atlas-hero-art[data-tone="cream"] .atlas-hero-art-author-aff { color: rgba(58, 38, 15, .7); }
.atlas-hero-art[data-tone="cream"] .atlas-hero-art-more { color: rgba(58, 38, 15, .7); }
.atlas-hero-art[data-tone="cream"] .atlas-hero-art-author::before { background: rgba(58, 38, 15, .5); }
.atlas-hero-art[data-tone="cream"] .atlas-glyph { color: rgba(58,38,15,.85); }
.atlas-hero-art .atlas-corner {
    position: absolute;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: rgba(255,255,255,.95);
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1.4;
}
.atlas-hero-art[data-tone="cream"] .atlas-corner { color: rgba(58,38,15,.7); }
.atlas-hero-art .atlas-corner.tl { top: 24px; left: 28px; }
.atlas-hero-art .atlas-corner.tr { top: 24px; right: 28px; text-align: right; }
.atlas-hero-art .atlas-corner.bl { bottom: 24px; left: 28px; }
.atlas-hero-art .atlas-corner.br { bottom: 24px; right: 28px; text-align: right; }
.atlas-hero-art .atlas-ring {
    position: absolute;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
}
.atlas-hero-art .atlas-ring.r1 { width: 60%; height: 60%; top: -15%; right: -20%; }
.atlas-hero-art .atlas-ring.r2 { width: 40%; height: 40%; bottom: -10%; left: -10%; }
.atlas-hero-art[data-tone="cream"] .atlas-ring { border-color: rgba(58,38,15,.18); }

/* The controls come first in the DOM so keyboard users reach pause before
   the slides (WAI-ARIA APG carousel); keep them visually below. */
.atlas-hero-text { display: flex; flex-direction: column; }
.atlas-hero-text > .atlas-hero-controls { order: 1; }
.atlas-hero-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}
.atlas-hero-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.atlas-hero-dots .atlas-dot {
    width: 24px;
    height: 3px;
    background: var(--atlas-line-2);
    border-radius: 999px;
    transition: all .3s;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.atlas-hero-dots .atlas-dot.active {
    background: var(--atlas-ink);
    width: 48px;
}
.atlas-hero-controls .atlas-pp {
    margin-inline-start: auto;
    display: flex;
    gap: 6px;
}
.atlas-hero-controls .atlas-pp .atlas-iconbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
/* ─── Slide stack (left text column)
   All slides share the same grid cell so the hero block keeps a stable
   height — the cell auto-sizes to the tallest slide. */
.atlas-hero-slides {
    display: grid;
    grid-template-areas: "stack";
    align-items: start;
}
.atlas-hero-slide {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s ease;
    display: flex;
    flex-direction: column;
}
.atlas-hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ── Slide content entrance (staggered) — fires each time a slide
   becomes active, so navigating between Editor's Pick items feels like
   a real slide change, not a plain crossfade. ── */
.atlas-hero-slide.active .atlas-hero-tags  { animation: atlas-hero-rise .5s .04s both; }
.atlas-hero-slide.active .atlas-hero-lede  { animation: atlas-hero-rise .55s .34s both; }
.atlas-hero-slide.active .atlas-hero-cta   { animation: atlas-hero-rise .55s .46s both; }
@keyframes atlas-hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* Title fills in word by word */
.atlas-hero-title .atlas-hw { display: inline-block; opacity: 0; will-change: transform; }
.atlas-hero-slide.active .atlas-hero-title .atlas-hw {
    animation: atlas-word-in .55s cubic-bezier(.2,.75,.2,1) both;
    animation-delay: calc(.12s + var(--wi, 0) * .05s);
}
@keyframes atlas-word-in {
    from { opacity: 0; transform: translateY(.7em) rotate(1.5deg); }
    to   { opacity: 1; transform: none; }
}
/* Before JS splits the title (or if it contains markup) show it normally */
.atlas-hero-title:not(:has(.atlas-hw)) { opacity: 1; }
.atlas-hero-slide.active .atlas-hero-title:not(:has(.atlas-hw)) {
    animation: atlas-hero-rise .5s .1s both;
}

/* ─── Art stack (right column image card) — same stacking pattern.
   Fills its column so the cover sits parallel to the title block, forming a
   balanced full-width hero rectangle. */
.atlas-hero-art-stack {
    display: grid;
    grid-template-areas: "stack";
    width: 100%;
}
@media (max-width: 920px) {
    .atlas-hero-art-stack {
        width: 60%;
        margin: 0 auto;
    }
}
@media (max-width: 560px) {
    .atlas-hero-art-stack { width: 78%; }
}
.atlas-hero-art-stack .atlas-hero-art {
    grid-area: stack;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease;
}
.atlas-hero-art-stack .atlas-hero-art.active {
    opacity: 1;
    visibility: visible;
    animation: atlas-art-in .65s cubic-bezier(.2,.75,.2,1) both;
}
/* Cover slides in from the right as the slide changes */
@keyframes atlas-art-in {
    from { opacity: 0; transform: translateX(54px) scale(.93); }
    to   { opacity: 1; transform: none; }
}

@keyframes atlas-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Respect reduced-motion: show everything statically, no slide animation */
@media (prefers-reduced-motion: reduce) {
    .atlas-hero-slide.active .atlas-hero-tags,
    .atlas-hero-slide.active .atlas-hero-lede,
    .atlas-hero-slide.active .atlas-hero-cta,
    .atlas-hero-slide.active .atlas-hero-title .atlas-hw,
    .atlas-hero-slide.active .atlas-hero-title:not(:has(.atlas-hw)),
    .atlas-hero-art-stack .atlas-hero-art.active {
        animation: none !important;
    }
    .atlas-hero-title .atlas-hw { opacity: 1 !important; transform: none !important; }
}

/* hero (inner pages variant) */
.atlas-hero.atlas-hero-inner {
    padding: 48px 0 56px;
    text-align: center;
}
.atlas-hero-inner .atlas-hero-title {
    margin: 0 auto 16px;
    font-size: clamp(32px, 4.4vw, 56px);
}

/* ───────────── Section frame ───────────── */
.atlas-section {
    padding: 96px 0;
    border-bottom: 1px solid var(--atlas-line);
    position: relative;
}
.atlas-section.bg-tint { background: var(--atlas-bg-soft); }
.atlas-section-narrow { padding: 64px 0; }

/* On inner pages the page title is rendered in the nameplate strip
   immediately above <main>. The first content section then sits with a
   huge 96px top gap, leaving the title floating in space. Tighten the
   top padding for that first section only — every later section still
   keeps its full breathing room. */
body.atlas-body .atlas-main > .atlas-section:first-child,
body.atlas-body .atlas-main > section.atlas-section:first-of-type {
    padding-top: 36px;
}
@media (max-width: 720px) {
    body.atlas-body .atlas-main > .atlas-section:first-child,
    body.atlas-body .atlas-main > section.atlas-section:first-of-type {
        padding-top: 24px;
    }
}

/* ── Issue page: tighter, more professional layout ─────────────────
   The default current-issue grid is sized for the homepage hero. On
   the single-issue page the cover doesn't need to be 320px wide, and
   the giant 96/96 padding between the header section and the TOC
   leaves a vast empty band. Compress both for a deliberate, editorial
   density. */
body.atlas-body.pkp_page_issue .atlas-cur-grid {
    grid-template-columns: 240px 1fr;
    gap: 56px;
    align-items: start;
}
body.atlas-body.pkp_page_issue .atlas-cover-stack { max-width: 240px; }
body.atlas-body.pkp_page_issue .atlas-main > .atlas-section:first-child {
    padding-top: 32px;
    padding-bottom: 48px;
}
body.atlas-body.pkp_page_issue .atlas-section.bg-tint {
    padding-top: 56px;
    padding-bottom: 72px;
}
@media (max-width: 920px) {
    body.atlas-body.pkp_page_issue .atlas-cur-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    body.atlas-body.pkp_page_issue .atlas-cover-stack {
        max-width: 200px;
        margin: 0 auto;
    }
}

.atlas-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.atlas-sec-head .atlas-sec-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 64ch;
}
.atlas-sec-num {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}
.atlas-sec-num::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--atlas-accent);
}
.atlas-sec-title {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 56px);
    letter-spacing: -.02em;
    line-height: 1.04;
    margin: 0;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-sec-title em {
    font-style: italic;
    color: var(--atlas-accent-text);
}
.atlas-sec-sub {
    color: var(--atlas-ink-3);
    max-width: 54ch;
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}

/* ───────────── Indexing strip (auto-scrolling marquee) ───────────── */
.atlas-idx {
    position: relative;
    overflow: hidden;
    padding: 24px 0;
    border-bottom: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    width: 100%;
}

/* Edge fades — items soften as they slide into / out of the viewport */
.atlas-idx::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(to right,
            var(--atlas-bg-elev) 0,
            rgba(0, 0, 0, 0) 100px,
            rgba(0, 0, 0, 0) calc(100% - 100px),
            var(--atlas-bg-elev) 100%);
}

.atlas-idx-rail {
    display: flex;
    width: max-content;
    align-items: center;
    position: relative;
    z-index: 1;
    /* The motion mode is decided at runtime by initIndexStrip():
         .is-marquee → content overflows  → seamless infinite scroll
         .is-pan     → content fits        → gentle left/right drift */
}
/* Many items: seamless marquee. Two identical copies sit side by side and
   the rail translates by exactly one copy (-50%), so items leaving on the
   left re-enter on the right with no jump. Duration is set in JS from the
   content width to keep a constant, calm speed. */
.atlas-idx-rail.is-marquee {
    width: max-content;
    animation: atlas-marquee var(--atlas-idx-dur, 60s) linear infinite;
}
/* Few items: the second copy is hidden in JS, the row is centred and it
   drifts a small amount each way (±--atlas-idx-amp) so nothing ever slides
   off-screen. */
.atlas-idx-rail.is-pan {
    width: 100%;
    justify-content: center;
    animation: atlas-idx-pan var(--atlas-idx-dur, 8s) ease-in-out infinite alternate;
}
.atlas-idx-rail.is-pan .atlas-idx-group { padding-right: 0; }
.atlas-idx:hover .atlas-idx-rail,
.atlas-idx:focus-within .atlas-idx-rail {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .atlas-idx-rail.is-marquee,
    .atlas-idx-rail.is-pan { animation: none; }
}

.atlas-idx-group {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-shrink: 0;
    padding-right: 48px; /* gap between consecutive groups */
}

.atlas-idx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--atlas-ink-2);
    font-size: 15px;
    transition: color .15s;
    white-space: nowrap;
}
.atlas-idx-item:hover { color: var(--atlas-accent-text); }
.atlas-idx-item .atlas-idx-glyph {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--atlas-bg-soft);
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    color: var(--atlas-ink);
    border: 1px solid var(--atlas-line);
    flex-shrink: 0;
}
.atlas-idx-item small {
    font-size: 11px;
    color: var(--atlas-muted);
    font-weight: 400;
    margin-inline-start: 4px;
}
/* Index logos pulled from the Indexing Page Manager plugin. Kept to a calm,
   uniform height; a broken/missing logo is hidden by JS so the name remains. */
.atlas-idx-logo {
    height: 26px;
    width: auto;
    max-width: 132px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.atlas-idx-name { white-space: nowrap; }

/* Pause / resume for the moving strips (WCAG 2.2.2). Sits on the inline-end
   fade, so it never covers an item that is fully legible. */
.atlas-idx > .atlas-strip-pp,
.atlas-timeline > .atlas-strip-pp {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--atlas-line-2);
    background: var(--atlas-bg-elev);
    color: var(--atlas-ink-2);
    cursor: pointer;
}
.atlas-idx > .atlas-strip-pp[hidden],
.atlas-timeline > .atlas-strip-pp[hidden] { display: none; }
.atlas-strip-pp:hover { color: var(--atlas-ink); background: var(--atlas-bg-soft); }
.atlas-timeline > .atlas-strip-pp { top: 38px; }
.atlas-idx.is-paused .atlas-idx-rail,
.atlas-timeline.is-paused .atlas-tl-rail { animation-play-state: paused; }
/* Keyboard focus inside a strip: the motion stops and the edge fades go, so
   the browser can scroll the focused item fully into view (initStrips()). A
   transform-animated item cannot be scrolled to and would sit off-screen. */
.atlas-idx.is-kbd .atlas-idx-rail,
.atlas-timeline.is-kbd .atlas-tl-rail { animation: none; }
.atlas-idx.is-kbd::after,
.atlas-timeline.is-kbd::after { display: none; }
.atlas-idx,
.atlas-timeline { scroll-padding-inline: 48px; }

/* ───────────── Current Issue ───────────── */
.atlas-cur-grid {
    display: grid;
    /* minmax(0, …): the content column may get narrower than its widest
       row (stats, recent issues) - the rows then wrap or shrink instead of
       pushing past the screen edge when the page is zoomed. */
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}
@media (max-width: 920px) {
    .atlas-cur-grid { grid-template-columns: 1fr; gap: 40px; }
}

.atlas-cover-stack {
    position: relative;
    /* Cover frames follow the artwork's own proportions (set per cover by the
       atlas_cover_ar modifier); 3/4 is only the fallback when it cannot be
       measured. Paired with object-fit:contain below, so a cover is never
       cropped — journals put the issue date at the bottom of the artwork. */
    aspect-ratio: var(--atlas-cover-ar, 3/4);
    perspective: 1000px;
    width: 100%;
    max-width: 320px;
}
@media (max-width: 920px) {
    .atlas-cover-stack { margin: 0 auto; }
}
/* Whole cover is a click target → goes to the current issue */
.atlas-cover-stack-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: var(--atlas-radius-lg);
}

/* Current issue title is clickable */
.atlas-cur-title-link {
    color: inherit;
    transition: color .15s;
}
.atlas-cur-title-link:hover { color: var(--atlas-accent-text); }
.atlas-cover {
    position: absolute;
    inset: 0;
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    background: var(--atlas-primary-grad);
    box-shadow: var(--atlas-shadow-hover);
    transform-origin: center bottom;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.atlas-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.atlas-cover-stack:hover .atlas-cover { transform: rotate(-2deg); }
.atlas-cover-stack:hover .atlas-cover.back { transform: rotate(2deg) translateX(20px); }
.atlas-cover.back {
    transform: scale(.97) translate(8px, 8px);
    background: linear-gradient(135deg, #1a1d2e, #0a0a14);
    z-index: 0;
    opacity: .5;
}
.atlas-cover.front { z-index: 2; }
.atlas-cover .atlas-cover-cap {
    position: absolute;
    inset: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}
.atlas-cover .atlas-cover-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}
/* The big numeral takes the room left between the top line and the title
   block, and its size follows that room and its own length (container query
   units; --atlas-glyph-len is set by the template). With the old viewport-
   based size a 200px numeral sat in a 240px cover: it ran into the labels
   and out of the cover, and pushed the title off the bottom, worse at 200 %
   zoom. It is decorative - the number is written in the volume line too. */
.atlas-cover .atlas-cover-glyph {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,.95);
}
.atlas-cover .atlas-cover-glyph > span {
    font-size: min(clamp(120px, 18vw, 200px), 95cqb, calc(100cqi / (max(var(--atlas-glyph-len, 1), 1) * .62)));
    line-height: .9;
    letter-spacing: -.05em;
    padding-inline-end: .06em;
}
/* "Current Issue" label on the fallback cover (no uploaded cover image) */
.atlas-cover .atlas-cover-label {
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(34px, 4.2vw, 48px);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: rgba(255, 255, 255, .96);
    margin: auto 0;
    text-wrap: balance;
    text-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}
.atlas-cover .atlas-cover-bot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    /* On a narrow cover the volume line moves under the title instead of
       being pushed out of the cover (a long word or a 3-digit number). */
    flex-wrap: wrap;
}
.atlas-cover .atlas-cover-bot h3,
.atlas-cover .atlas-cover-bot .atlas-cover-ttl {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0;
    flex: 1;
    color: #fff;
    text-wrap: balance;
}
.atlas-cover .atlas-cover-bot .atlas-cover-vol {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    text-align: end;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.atlas-cur-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.atlas-cur-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
}
.atlas-cur-content h1,
.atlas-cur-content h2 {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 48px);
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0;
    color: var(--atlas-ink);
    text-wrap: balance;
}
/* Title + "View issue page" button on one row */
.atlas-cur-titlerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.atlas-cur-titlerow h1,
.atlas-cur-titlerow h2 { flex: 1 1 auto; }
.atlas-cur-viewbtn { flex: 0 0 auto; white-space: nowrap; }

/* Last 4 issue covers under the stats */
.atlas-cur-recent {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 4px;
}
@media (max-width: 520px) {
    .atlas-cur-recent { grid-template-columns: repeat(2, 1fr); }
}
.atlas-cur-recent-card {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 13px 15px;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--atlas-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.atlas-cur-recent-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--atlas-shadow-hover);
}
/* Legibility scrim — darkens the top and bottom for white text */
.atlas-cur-recent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 58%, rgba(0,0,0,.30) 100%);
    pointer-events: none;
}
.atlas-cur-recent-card > * { position: relative; z-index: 1; }

.atlas-cur-recent-year {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
.atlas-cur-recent-foot {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.atlas-cur-recent-vol {
    text-transform: uppercase;
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.atlas-cur-recent-link {
    font-family: var(--atlas-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
    transition: opacity .15s;
}
.atlas-cur-recent-card:hover .atlas-cur-recent-link { color: #fff; }
.atlas-cur-content h1 em,
.atlas-cur-content h2 em { font-style: italic; }
.atlas-cur-content .atlas-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--atlas-ink-3);
    text-wrap: pretty;
    max-width: 60ch;
}
/* Issue description rendered full page-width below the header block (moved out
   of the narrow cover/meta grid). No max-width so it spans the container. */
.atlas-issue-lede {
    font-size: 17px;
    line-height: 1.7;
    color: var(--atlas-ink-2);
    text-wrap: pretty;
    max-width: none;
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid var(--atlas-line);
}
.atlas-issue-lede p { margin: 0 0 14px; }
.atlas-issue-lede p:last-child { margin-bottom: 0; }
.atlas-cur-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--atlas-line);
    border-bottom: 1px solid var(--atlas-line);
    margin: 8px 0;
}
@media (max-width: 600px) {
    .atlas-cur-stats { grid-template-columns: repeat(2, 1fr); }
}
.atlas-cur-stats .atlas-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atlas-cur-stats .atlas-stat .atlas-stat-k {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-cur-stats .atlas-stat .atlas-stat-v {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
}
.atlas-cur-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ───────────── Article toolbar + cards ───────────── */
.atlas-art-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding: 14px 18px;
    background: var(--atlas-bg-soft);
    border-radius: 14px;
    border: 1px solid var(--atlas-line);
}
.atlas-art-toolbar .atlas-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}
.atlas-chip {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--atlas-ink-2);
    border: 1px solid transparent;
    transition: all .15s;
    letter-spacing: -.005em;
    cursor: pointer;
}
.atlas-chip:hover {
    background: var(--atlas-bg-elev);
    border-color: var(--atlas-line);
}
.atlas-chip.active {
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    border-color: var(--atlas-ink);
}
.atlas-art-toolbar .atlas-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}
.atlas-art-toolbar select {
    height: 32px;
    padding: 0 28px 0 12px;
    background: var(--atlas-bg-elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1px solid var(--atlas-line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--atlas-ink);
    appearance: none;
    -webkit-appearance: none;
}

.atlas-art-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.atlas-art-grid[data-cols="1"] { grid-template-columns: 1fr; }
.atlas-art-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 840px) {
    .atlas-art-grid,
    .atlas-art-grid[data-cols="3"] { grid-template-columns: 1fr; gap: 24px; }
}

.atlas-art-card {
    display: flex;
    flex-direction: column;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    transition: all .22s cubic-bezier(.2,.8,.2,1);
    position: relative;
}
.atlas-art-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--atlas-shadow-hover);
    border-color: var(--atlas-line-2);
}
.atlas-art-thumb {
    display: block;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
    background: var(--atlas-bg-soft);
    text-decoration: none;
    color: inherit;
}
.atlas-art-thumb svg, .atlas-art-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .6s ease;
}
.atlas-art-card:hover .atlas-art-thumb svg,
.atlas-art-card:hover .atlas-art-thumb img { transform: scale(1.04); }
.atlas-art-thumb .atlas-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    color: var(--atlas-ink);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: 999px;
    font-family: var(--atlas-font-mono);
    text-transform: uppercase;
}
.atlas-art-thumb .atlas-badge .atlas-swatch {
    width: 7px;
    height: 7px;
    border-radius: 999px;
}
.atlas-art-thumb .atlas-num {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    /* .56 keeps 4.5:1 even over a white thumbnail (B16) */
    color: rgba(255,255,255,.95);
    background: rgba(0,0,0,.56);
    backdrop-filter: blur(6px);
    padding: 5px 10px;
    border-radius: 999px;
}

.atlas-art-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.atlas-art-title {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 23px;
    line-height: 1.16;
    letter-spacing: -.02em;
    margin: 0;
    color: var(--atlas-accent-text);
    text-wrap: balance;
    transition: color .15s, filter .15s;
}
.atlas-art-title a { color: inherit; }
.atlas-art-card:hover .atlas-art-title { color: var(--atlas-accent-text); filter: brightness(.88); }

/* Authors — mono "byline" metadata, clearly distinct from the serif
   title above and the sans abstract below. */
.atlas-art-authors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .03em;
    color: var(--atlas-muted);
    margin-top: -4px;
}
.atlas-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    color: var(--atlas-muted);
}
.atlas-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #6b21a8, #831843);
}
.atlas-author-chip .atlas-author-name {
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--atlas-ink-3);
}
.atlas-author-chip .atlas-sep {
    margin: 0 4px;
    color: var(--atlas-line-2);
}
.atlas-art-keys {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.atlas-art-keys span {
    font-size: 11.5px;
    letter-spacing: -.005em;
    color: var(--atlas-muted);
    padding: 3px 8px;
    background: var(--atlas-bg-soft);
    border-radius: 6px;
}
.atlas-art-abstract {
    font-family: var(--atlas-font-sans);
    font-size: 14px;
    line-height: 1.62;
    color: var(--atlas-ink-3);
    margin: 2px 0 0;
    opacity: .92;
}

.atlas-art-foot {
    margin-top: auto;
    padding: 16px 24px;
    border-top: 1px solid var(--atlas-line);
    background: var(--atlas-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.atlas-art-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    color: var(--atlas-muted);
    letter-spacing: .04em;
    flex-wrap: wrap;
}
.atlas-art-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.atlas-art-meta-row b {
    color: var(--atlas-ink-2);
    font-weight: 600;
}
.atlas-art-foot .atlas-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}
/* Bare DOI (10.…) with a small link icon, shown just left of the copy
   icon, right-aligned, ellipsized so it always fits on the footer line */
.atlas-art-doi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 160px;
    margin-inline-end: 2px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .01em;
    color: var(--atlas-muted);
}
/* Official DOI mark (Academicons glyph) */
.atlas-art-doi-ico {
    flex: 0 0 auto;
    color: var(--atlas-ink-3);
    display: block;
}
/* A DOI longer than the footer slot wraps onto a second line instead of
   being cut to "…" (the text grows with text zoom; the slot does not). */
.atlas-art-doi-num {
    min-width: 0;
    overflow-wrap: anywhere;
}
.atlas-iconmini {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    color: var(--atlas-ink-2);
    transition: all .15s;
    cursor: pointer;
}
.atlas-iconmini:hover {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
}

/* featured (first) article card — bigger */
.atlas-art-card.feat {
    grid-column: 1 / -1;
    flex-direction: row;
}
.atlas-art-card.feat .atlas-art-thumb {
    aspect-ratio: auto;
    width: 46%;
    flex: 0 0 auto;
}
.atlas-art-card.feat .atlas-art-body {
    padding: 36px 40px;
    gap: 18px;
    justify-content: center;
}
.atlas-art-card.feat .atlas-art-title {
    font-size: 32px;
    line-height: 1.08;
}
.atlas-art-card.feat .atlas-art-foot { padding: 18px 40px; }
@media (max-width: 840px) {
    .atlas-art-card.feat { flex-direction: column; }
    .atlas-art-card.feat .atlas-art-thumb { width: 100%; aspect-ratio: 16/9; }
    .atlas-art-card.feat .atlas-art-body { padding: 24px; }
    .atlas-art-card.feat .atlas-art-foot { padding: 16px 24px; }
    .atlas-art-card.feat .atlas-art-title { font-size: 22px; }
}

/* OA badge */
.atlas-oa-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: var(--atlas-font-mono);
}

/* ───────────── Metrics ───────────── */
.atlas-met-wrap {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
}
@media (max-width: 860px) {
    .atlas-met-wrap { grid-template-columns: 1fr; }
}
.atlas-met-grid-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    border: 1px solid var(--atlas-line);
}
@media (max-width: 600px) {
    .atlas-met-grid-stats { grid-template-columns: repeat(2, 1fr); }
}
.atlas-met-stat {
    background: var(--atlas-bg-elev);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
    min-height: 140px;
    transition: background .15s;
    position: relative;
}
.atlas-met-stat:hover { background: var(--atlas-bg-soft); }
.atlas-met-stat .atlas-met-k {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-met-stat .atlas-met-v {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 44px;
    line-height: .95;
    letter-spacing: -.025em;
    color: var(--atlas-ink);
    font-feature-settings: "tnum";
}
.atlas-met-stat .atlas-met-delta {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-met-stat .atlas-met-delta.up { color: var(--atlas-success-text); }

.atlas-chart-card {
    padding: 28px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.atlas-chart-card .atlas-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.atlas-chart-card .atlas-chart-head .atlas-met-k {
    margin-bottom: 6px;
}
.atlas-chart-card .atlas-chart-head .atlas-chart-v {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 38px;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--atlas-ink);
}
.atlas-chart-card .atlas-chart-head .atlas-chart-delta {
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    color: var(--atlas-success-text);
    font-weight: 600;
}
.atlas-chart-card svg { width: 100%; height: 160px; display: block; }
.atlas-chart-card .atlas-chart-axis {
    display: flex;
    justify-content: space-between;
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}

/* ───────────── Timeline ───────────── */
.atlas-timeline {
    position: relative;
    overflow: hidden;
    padding: 24px 0 8px;
    width: 100%;
}

/* Subtle horizontal line behind the dots
   24px (timeline padding-top) + 14px = 38px, matching the original card-edge alignment */
.atlas-timeline::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 38px;
    height: 1px;
    background: var(--atlas-line);
    z-index: 1;
    pointer-events: none;
}

/* Edge fades so cards softly disappear into the section background */
.atlas-timeline::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        linear-gradient(to right,
            var(--atlas-bg-soft) 0,
            rgba(0, 0, 0, 0) 100px,
            rgba(0, 0, 0, 0) calc(100% - 100px),
            var(--atlas-bg-soft) 100%);
}
.atlas-section:not(.bg-tint) .atlas-timeline::after {
    background:
        linear-gradient(to right,
            var(--atlas-bg) 0,
            rgba(0, 0, 0, 0) 100px,
            rgba(0, 0, 0, 0) calc(100% - 100px),
            var(--atlas-bg) 100%);
}

.atlas-tl-rail {
    display: flex;
    width: max-content;
    align-items: stretch;
    position: relative;
    z-index: 1;
    animation: atlas-marquee 90s linear infinite;
}

.atlas-tl-rail.atlas-tl-static {
    animation: none;
    padding: 0 32px;
    gap: 20px;
}

/* Pause when the user hovers/focuses the rail */
.atlas-timeline:hover .atlas-tl-rail,
.atlas-timeline:focus-within .atlas-tl-rail {
    animation-play-state: paused;
}

@keyframes atlas-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Gentle back-and-forth drift for the few-items case */
@keyframes atlas-idx-pan {
    from { transform: translateX(calc(-1 * var(--atlas-idx-amp, 0px))); }
    to   { transform: translateX(var(--atlas-idx-amp, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-tl-rail { animation: none; }
}

/* Each duplicated group lays out its own cards with internal gaps */
.atlas-tl-group {
    display: flex;
    gap: 20px;
    align-items: stretch;
    flex-shrink: 0;
    padding-inline-end: 20px; /* gap between this group and the next */
}

.atlas-tl-card {
    flex: 0 0 280px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    border-radius: var(--atlas-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: all .18s;
    text-align: start;
    z-index: 1;
}
.atlas-tl-card::before {
    content: "";
    position: absolute;
    left: 22px;
    top: -7px;
    width: 13px;
    height: 13px;
    background: var(--atlas-bg);
    border: 1px solid var(--atlas-line);
    border-radius: 999px;
    z-index: 2;
}
.atlas-tl-card.current::before {
    background: var(--atlas-accent);
    border-color: var(--atlas-accent-ring);
    box-shadow: 0 0 0 4px var(--atlas-accent-soft);
}
.atlas-tl-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--atlas-shadow-card);
    border-color: var(--atlas-line-2);
}
.atlas-tl-card .atlas-tl-year {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-tl-card .atlas-tl-vol {
    text-transform: uppercase;
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--atlas-ink);
}
.atlas-tl-card .atlas-tl-ttl {
    font-size: 14px;
    color: var(--atlas-ink-3);
    line-height: 1.4;
    min-height: 40px;
}
.atlas-tl-card .atlas-tl-ct {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--atlas-accent-text);
    font-weight: 600;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.atlas-tl-card.current {
    background: linear-gradient(135deg, #fff7e6, #ffe6cc);
    border-color: var(--atlas-accent-ring);
}
:root[data-theme="dark"] .atlas-tl-card.current {
    background: linear-gradient(135deg, #1f1410, #2a1a10);
}

/* ───────────── Announcements ───────────── */
.atlas-ann-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
@media (max-width: 860px) {
    .atlas-ann-wrap { grid-template-columns: 1fr; }
}
.atlas-ann {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.atlas-ann:hover {
    transform: translateY(-2px);
    box-shadow: var(--atlas-shadow-card);
    border-color: var(--atlas-line-2);
}
.atlas-ann-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.atlas-ann-tag {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}
.atlas-ann-date {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-ann h4,
.atlas-ann .atlas-ann-h {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-ann h4 a,
.atlas-ann .atlas-ann-h a { color: inherit; }
.atlas-ann h4 a:hover,
.atlas-ann .atlas-ann-h a:hover { color: var(--atlas-accent-text); }
.atlas-ann p {
    margin: 0;
    color: var(--atlas-ink-3);
    font-size: 14.5px;
    line-height: 1.55;
}
/* The summary is stored as HTML (its own <p>); a <div> wrapper keeps it
   valid so its lang attribute applies. The margin reproduces the spacing the
   old <p> wrapper produced (two empty paragraphs = two extra flex gaps). */
.atlas-ann .atlas-ann-sum {
    margin: 14px 0;
    color: var(--atlas-ink-3);
    font-size: 14.5px;
    line-height: 1.55;
}

/* Two classes: the reset ".atlas a { color: inherit }" outweighs a single one,
   and the link colour never reached this link. */
.atlas .atlas-ann-more {
    font-size: 13px;
    font-weight: 500;
    color: var(--atlas-link);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -.005em;
    transition: gap .15s;
}
.atlas-ann:hover .atlas-ann-more { gap: 10px; }

/* ───────────── CTA card ───────────── */
.atlas-cta {
    background: linear-gradient(135deg, var(--atlas-ink) 0%, #26221a 100%);
    color: #f5efe2;
    border-radius: var(--atlas-radius-xl);
    padding: 64px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.atlas-cta::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--atlas-accent-soft, rgba(208,70,23,.4)), transparent 60%);
    top: -100px;
    right: -100px;
    filter: blur(20px);
}
@media (max-width: 860px) {
    .atlas-cta { grid-template-columns: 1fr; padding: 40px; gap: 24px; }
}
.atlas-cta-eyebrow {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.atlas-cta-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--atlas-accent);
}
.atlas-cta h3 {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -.02em;
    line-height: 1.05;
    margin: 0 0 16px;
    text-wrap: balance;
}
.atlas-cta h3 em {
    font-style: italic;
    color: var(--atlas-accent-text-on-dark, var(--atlas-accent));
}
.atlas-cta p {
    font-size: 16px;
    color: rgba(255,255,255,.72);
    max-width: 46ch;
    margin: 0;
    line-height: 1.55;
}
.atlas-cta .atlas-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.atlas-cta .atlas-actions .atlas-btn {
    justify-content: center;
    height: 48px;
}
.atlas-cta .atlas-actions .atlas-btn-accent {
    background: var(--atlas-accent);
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-fg);
    font-weight: 600;
}
.atlas-cta .atlas-actions .atlas-btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,.25);
    color: #fff;
}
.atlas-cta .atlas-actions .atlas-btn-outline:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.4);
}

/* ───────────── Footer ───────────── */
.atlas-foot {
    position: relative;
    background: var(--atlas-bg-soft);
    padding: 44px 0 40px;
    border-top: 1px solid var(--atlas-line);
}
/* thin accent hairline pinned to the top edge */
.atlas-foot::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--atlas-accent) 0%, transparent 38%);
    opacity: .6;
}

/* ── Back to top (footer bottom-right) ── */
.atlas-foot-totop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-ink-2);
    padding: 8px 14px;
    border: 1px solid var(--atlas-line);
    border-radius: 999px;
    background: var(--atlas-bg-elev);
    transition: all .16s;
    flex: none;
}
.atlas-foot-totop svg { transition: transform .2s; }
.atlas-foot-totop:hover {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
}
.atlas-foot-totop:hover svg { transform: translateY(-3px); }

.atlas-foot-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 48px;
}
@media (max-width: 860px) {
    .atlas-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
    .atlas-foot-grid { grid-template-columns: 1fr; }
    .atlas-foot-colophon { padding: 32px 0; margin-bottom: 36px; }
}
.atlas-foot h5,
.atlas-foot .atlas-foot-h {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: var(--atlas-muted);
}
.atlas-foot ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--atlas-ink-2);
}
.atlas-foot ul li { line-height: 1.45; }
.atlas-foot a:hover { color: var(--atlas-accent-text); }
.atlas-foot-content { color: var(--atlas-ink-2); font-size: 14px; line-height: 1.55; }
.atlas-foot-content p { margin: 0 0 12px; }
.atlas-foot-content a { color: var(--atlas-ink); text-decoration: underline; }
.atlas-foot-content ul { gap: 8px; }
.atlas-foot-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.atlas-foot-brand .atlas-brand-mark {
    width: 42px;
    height: 42px;
    font-size: 24px;
}
.atlas-foot-name {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -.02em;
    color: var(--atlas-ink);
    line-height: 1;
}
.atlas-foot-soc {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.atlas-foot-soc a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    border: 1px solid var(--atlas-line);
    color: var(--atlas-ink-2);
    background: var(--atlas-bg-elev);
    transition: all .15s;
}
.atlas-foot-soc a:hover {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
}
.atlas-foot-bot {
    margin-top: 64px;
    padding-top: 24px;
    border-top: 1px solid var(--atlas-line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--atlas-muted);
}
@media (max-width: 600px) {
    .atlas-foot-bot { grid-template-columns: 1fr; }
}
.atlas-foot-bot p { margin: 0; }
.atlas-foot-bot a { transition: color .15s; color: var(--atlas-ink-2); }
.atlas-foot-bot a:hover { color: var(--atlas-ink); }
.atlas-foot-bot .atlas-foot-bot-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    text-align: end;
}
.atlas-foot-bot .atlas-foot-bot-right .atlas-foot-bot-links { display: inline; }
/* The back-to-top is an <a>; keep its accent hover instead of the generic
   footer-bottom link hover. */
.atlas-foot-bot .atlas-foot-totop:hover { color: var(--atlas-accent-text); }
@media (max-width: 600px) {
    .atlas-foot-bot .atlas-foot-bot-right {
        justify-content: space-between;
        text-align: start;
    }
}

/* ───────────── Command Palette ───────────── */
.atlas-cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10,9,7,.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 14vh;
    animation: atlas-fadein .18s ease;
}
.atlas-cmd-overlay.hidden { display: none; }
.atlas-cmd {
    width: min(660px, 92vw);
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 18px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
    animation: atlas-cmdin .25s cubic-bezier(.2,.8,.2,1);
}
@keyframes atlas-cmdin {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .atlas-cmd-overlay,
    .atlas-cmd { animation: none; }
}
.atlas-cmd-input {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--atlas-line);
}
.atlas-cmd-input svg { flex: 0 0 auto; color: var(--atlas-muted); }
.atlas-cmd-input input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 17px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
}
.atlas-cmd-input input::placeholder { color: var(--atlas-muted); }
.atlas-cmd-input .atlas-esc {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    padding: 4px 8px;
    border: 1px solid var(--atlas-line);
    border-radius: 5px;
    color: var(--atlas-muted);
    background: var(--atlas-bg-soft);
}
.atlas-cmd-list {
    overflow-y: auto;
    padding: 8px 8px 12px;
}
.atlas-cmd-section {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    padding: 14px 14px 6px;
}
.atlas-cmd-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    text-align: start;
    transition: background .12s;
    color: inherit;
    text-decoration: none;
}
.atlas-cmd-row .atlas-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--atlas-ink-2);
}
.atlas-cmd-row .atlas-cmd-body { flex: 1; min-width: 0; }
.atlas-cmd-row .atlas-cmd-ttl {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--atlas-ink);
}
.atlas-cmd-row .atlas-cmd-sub {
    font-size: 12.5px;
    color: var(--atlas-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.atlas-cmd-row .atlas-cmd-meta {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    color: var(--atlas-muted);
    flex: 0 0 auto;
}
.atlas-cmd-row.active,
.atlas-cmd-row:hover { background: var(--atlas-bg-soft); }
.atlas-cmd-q { color: var(--atlas-accent-text); font-weight: 600; }
.atlas-cmd-row.active .atlas-ico {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
}
.atlas-cmd-foot {
    border-top: 1px solid var(--atlas-line);
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--atlas-muted);
    background: var(--atlas-bg-soft);
}
.atlas-cmd-foot .atlas-keys {
    display: flex;
    gap: 14px;
}
.atlas-cmd-foot .atlas-keys span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.atlas-cmd-foot .atlas-kbd-inline {
    padding: 2px 6px;
    border: 1px solid var(--atlas-line);
    border-radius: 4px;
    background: var(--atlas-bg-elev);
}

/* ───────────── Toast ───────────── */
.atlas-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    z-index: 200;
    box-shadow: 0 12px 36px -10px rgba(0,0,0,.3);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.atlas-toast.show { transform: translateX(-50%) translateY(0); }
.atlas-toast .atlas-toast-check {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    display: grid;
    place-items: center;
}

/* ───────────── selection / focus ───────────── */
.atlas ::selection { background: var(--atlas-accent); color: var(--atlas-accent-fg); }
/* Focus indicator (WCAG 2.4.13): an ink outline inside a halo of the page
   ground, whatever the accent colour is. Ink and ground are more than 12:1
   apart in every surface tone and mode, so against any background - page,
   cover gradient, dark block or photo - one of the two stands out from it
   by more than 3:1. Resolved on :root, so a section that redefines its own
   ink or ground does not change the pair. */
:root {
    --atlas-focus: var(--atlas-ink);
    --atlas-focus-halo: var(--atlas-bg);
}
.atlas :focus-visible {
    outline: 2px solid var(--atlas-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--atlas-focus-halo);
    border-radius: 4px;
}
/* The Citation Style Language plugin takes the outline off its "More
   Citation Formats" button and format links (outline: 0 on :focus, one
   class deeper than the rule above). The ring comes back for keyboard
   focus (WCAG 2.4.7). */
.atlas .citation_display .citation_formats_button:focus-visible,
.atlas .citation_display .citation_formats_styles a:focus-visible {
    outline: 2px solid var(--atlas-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--atlas-focus-halo);
}

/* ───────────── User dropdown (header right) ───────────── */
.atlas-user {
    position: relative;
}
.atlas-user-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    border-radius: 10px;
    font-size: 13px;
    color: var(--atlas-ink);
    cursor: pointer;
}
/* Editorial task count. OJS ships it as <span class="task_count"> inside the
   Dashboard entry; without a style it reads as a stray number. It carries the
   journal's own brand colour — the same one the Submit button uses — so the
   header stays one palette; --atlas-badge overrides it if a site wants the
   classic red alert colour instead. */
.atlas-user-menu .task_count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-inline-start: 8px;
    border-radius: 999px;
    background: var(--atlas-badge, var(--atlas-primary));
    color: var(--atlas-primary-fg);
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* Nothing pending — the badge would just be noise (JS sets the flag). */
.atlas-user-menu .task_count.atlas-task-zero { display: none; }
.atlas-user-menu .atlas-user-menu-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Same count echoed on the trigger, tucked into the top-right of the button so
   an editor sees outstanding tasks before opening the menu. */
.atlas-user-trigger { position: relative; }
.atlas-user-trigger .atlas-task-bubble {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--atlas-badge, var(--atlas-primary));
    border: 2px solid var(--atlas-bg-tint, #fff);
    color: var(--atlas-primary-fg);
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.atlas-user-trigger:hover {
    background: var(--atlas-bg-soft);
    border-color: var(--atlas-line-2);
}
.atlas-user-menu {
    position: absolute;
    top: calc(100% + 6px);
    /* Logical, so the panel hangs off the correct edge in Arabic too. */
    inset-inline-end: 0;
    min-width: 220px;
    max-width: calc(100vw - 24px);
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    box-shadow: var(--atlas-shadow-hover);
    padding: 8px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    /* Closed = hidden, not just transparent: its links leave the tab order
       and the accessibility tree. visibility switches at the end of the fade
       out and at the start of the fade in. */
    visibility: hidden;
    transition: all .18s ease;
    z-index: 50;
}
.atlas-user-trigger[aria-expanded="true"] + .atlas-user-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
    .atlas-user-menu { transform: none; }
}
/* OJS renders the user menu as a plain <ul><li><a>; strip the list chrome so it
   inherits the dropdown / util-bar link styles defined just below. */
.atlas-user-menu .atlas-user-menu-list,
.atlas-utilbar-auth .atlas-user-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.atlas-user-menu .atlas-user-menu-list li { width: 100%; list-style: none; }
.atlas-user-menu .atlas-user-menu-list ul {
    list-style: none;
    margin: 0;
    padding-inline-start: 10px;
}
/* The trigger button already carries the username, so the menu's own parent
   row (the same username) is a duplicate: hide it and lift its children. */
.atlas-user-menu .atlas-user-menu-list > li:has(> ul) > a { display: none; }
.atlas-user-menu .atlas-user-menu-list > li:has(> ul) > ul { padding-inline-start: 0; }
.atlas-utilbar-auth .atlas-user-menu-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atlas-utilbar-auth .atlas-user-menu-list li { list-style: none; }
.atlas-user-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--atlas-ink-2);
    border-radius: 8px;
    transition: background .12s;
}
.atlas-user-menu a:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
}

/* ============================================================
   ARTICLE DETAIL PAGE (JTECH article design)
   ============================================================ */

/* ── Breadcrumb ───────────────────────────────────────────── */
.atlas-breadcrumb {
    padding: 24px 0 0;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.atlas-breadcrumb a { transition: color .15s; }
.atlas-breadcrumb a:hover { color: var(--atlas-ink); }
.atlas-breadcrumb .atlas-bc-sep { color: var(--atlas-line-2); }
.atlas-breadcrumb .atlas-bc-here { color: var(--atlas-ink-2); }

/* ── Article hero (large) ─────────────────────────────────── */
.atlas-ahero {
    padding: 48px 0 64px;
    border-bottom: 1px solid var(--atlas-line);
    position: relative;
    overflow: hidden;
}
.atlas-ahero::before {
    content: "";
    position: absolute;
    width: 540px;
    height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--atlas-accent-soft, rgba(208,70,23,.16)), transparent 65%);
    top: -220px;
    right: -140px;
    pointer-events: none;
    filter: blur(8px);
}
.atlas-ahero-inner { position: relative; z-index: 1; }
.atlas-ahero-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
/* Article type / section pill sits at the far right of the hero pill row */
.atlas-ahero-pills .atlas-pill-type { margin-inline-start: auto; }
@media (max-width: 600px) { .atlas-ahero-pills .atlas-pill-type { margin-inline-start: 0; } }
.atlas-tag-pill.solid {
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    border-color: var(--atlas-accent-ring);
}
.atlas-tag-pill.solid .atlas-dot { background: var(--atlas-accent-fg); }

.atlas-ahero h1 {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.022em;
    margin: 0 0 36px;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-ahero h1 em {
    font-style: italic;
    color: var(--atlas-accent-text);
    font-weight: 400;
}

/* Author cards row */
/* Two-column author grid on desktop; collapses to one column on small screens. */
.atlas-author-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
    margin-bottom: 32px;
}
@media (max-width: 760px) {
    .atlas-author-row { grid-template-columns: 1fr; }
}
.atlas-auth {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-width: 0;
}
/* Corresponding-author contact e-mail — shown inside the author card, directly
   under the affiliation, for the author already tagged as corresponding. */
.atlas-auth .atlas-auth-email {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    /* 8px of padding below makes the link a 24px-tall target (WCAG 2.5.8)
       that grows downwards, away from the ORCID / ROR targets above it; the
       negative margin cancels it, so the text stays exactly where it was. */
    padding-block: 0 8px;
    margin-block: 1px -8px;
    font-size: 13px;
    color: var(--atlas-accent-text);
    word-break: break-word;
}
.atlas-auth .atlas-auth-email svg { flex: none; opacity: .85; }
.atlas-auth .atlas-auth-email:hover { text-decoration: underline; }
.atlas-auth .atlas-auth-av {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-mono);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .02em;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px -4px rgba(10,9,7,.18);
}
.atlas-auth .atlas-auth-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}
.atlas-auth .atlas-auth-name {
    font-family: var(--atlas-font-serif);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.atlas-auth .atlas-auth-name .atlas-auth-flag { font-size: 15px; }
.atlas-auth .atlas-auth-name .atlas-auth-corr {
    font-size: 10.5px;
    font-family: var(--atlas-font-mono);
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 600;
}
.atlas-auth .atlas-auth-aff { font-size: 13px; color: var(--atlas-ink-3); }
.atlas-auth .atlas-auth-country {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
/* ORCID / ROR identifier icons — inline on the affiliation line, icon only. */
.atlas-auth-idlink {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    vertical-align: middle;
    /* A 24x24 target (WCAG 2.5.8) around the 14px icon. The negative margins
       keep the icon where it was (7px after the text) and the line height
       unchanged; only the clickable area grows - upwards, over the author
       name, so it never reaches the e-mail link on the line below. */
    min-width: 24px;
    min-height: 24px;
    margin-block: -10px 0;
    margin-inline: 2px -5px;
    color: var(--atlas-ink-2);
    transition: transform .15s, color .15s;
}
.atlas-auth-idlink:hover { transform: translateY(-1px); }
/* Two identifier icons side by side: their 24px boxes must not overlap, so
   the icons sit 10px apart instead of 7px (the least 2.5.8 allows). */
.atlas-auth-idlink + .atlas-auth-idlink { margin-inline-start: 5px; }
.atlas-idsvg { display: block; height: 14px; width: auto; }
.atlas-idsvg-orcid { width: 14px; height: 14px; }
.atlas-idlink-ror:hover { color: var(--atlas-accent-text); }
/* An ORCID the author has not authenticated yet keeps the mark but loses the
   brand green, so a verified iD stays distinguishable at a glance. */
.atlas-idlink-orcid-pending .atlas-idsvg-orcid circle { fill: var(--atlas-muted); }
.atlas-idlink-orcid-pending { opacity: .75; }
.atlas-idlink-orcid-pending:hover { opacity: 1; }
/* Icon-only corresponding-author link. With no address beside it the bare
   12px glyph is far too small to notice or tap, so give it a real target. */
.atlas-auth .atlas-auth-email-icon {
    gap: 0;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-top: 3px;
    border-radius: 999px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg-tint);
}
.atlas-auth .atlas-auth-email-icon svg { width: 14px; height: 14px; opacity: 1; }
.atlas-auth .atlas-auth-email-icon:hover {
    border-color: var(--atlas-accent-ring);
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    text-decoration: none;
}

/* Meta pills */
.atlas-ahero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.atlas-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 10px;
    font-size: 13px;
    color: var(--atlas-ink-2);
    transition: all .15s;
    cursor: default;
}
button.atlas-meta-pill { cursor: pointer; }
.atlas-meta-pill:hover {
    border-color: var(--atlas-line-2);
    background: var(--atlas-bg-soft);
}
.atlas-meta-pill .atlas-meta-k {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-meta-pill .atlas-meta-v {
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--atlas-ink);
}
.atlas-meta-pill .atlas-meta-v.tabular { font-variant-numeric: tabular-nums; }
.atlas-meta-pill .atlas-meta-v.mono {
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    letter-spacing: 0;
}

.atlas-ahero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
    align-items: center;
}
.atlas-ahero-actions .atlas-btn {
    height: 44px;
    padding: 0 20px;
    font-size: 14px;
}

/* ── Floating issue card (top-right of hero, gently wobbling) ─────── */
.atlas-ahero-inner { position: relative; }

.atlas-ahero-issue-float {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 220px;
    text-decoration: none;
    color: inherit;
    z-index: 2;
}

@media (min-width: 1100px) {
    .atlas-ahero-issue-float {
        position: absolute;
        top: 0;
        /* Align the card's end edge to the CONTENT edge (same line as the
           nameplate ISSN and the body sidebar). The containing block is the
           .atlas-wrap padding box, so an offset of 0 would sit at the outer
           gutter edge and stick out ~32px past everything else. Offsetting by
           the wrap gutter (32px) pulls it onto the shared line. Logical, so in
           right-to-left pages the card sits on the left, where the room below
           is reserved - with right: it covered the title and first author. */
        inset-inline-end: 32px;
        animation: atlas-issue-wobble 6s ease-in-out infinite;
        transform-origin: center center;
        will-change: transform;
    }
    .atlas-ahero-issue-float:hover {
        animation-play-state: paused;
    }
    /* Reserve room on the right for the floating issue card so hero
       content (title, authors, meta, actions) never slides underneath it.
       The h1 fills the full width up to the card (the wide title area) and
       wraps there instead of being capped narrow. */
    .atlas-ahero h1,
    .atlas-ahero-pills,
    .atlas-author-row,
    .atlas-ahero-meta,
    .atlas-ahero-actions {
        padding-inline-end: 264px;
    }
}
@media (max-width: 1099px) {
    .atlas-ahero-issue-float { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .atlas-ahero-issue-float { animation: none; }
}

@keyframes atlas-issue-wobble {
    0%, 100% { transform: rotate(-1.2deg) translateY(0); }
    50%      { transform: rotate( 1.2deg) translateY(-3px); }
}

.atlas-ahero-issue-cover {
    aspect-ratio: var(--atlas-cover-ar, 3/4);
    border-radius: 14px;
    overflow: hidden;
    background: var(--atlas-primary-grad);
    position: relative;
    box-shadow: 0 24px 50px -18px rgba(10, 9, 7, .35),
                0 6px 14px -4px rgba(10, 9, 7, .2);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.atlas-ahero-issue-float:hover .atlas-ahero-issue-cover {
    transform: scale(1.03);
    box-shadow: 0 30px 60px -18px rgba(10, 9, 7, .4),
                0 8px 16px -4px rgba(10, 9, 7, .25);
}
.atlas-ahero-issue-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.atlas-ahero-issue-cover-cap {
    position: absolute;
    inset: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.atlas-ahero-issue-cover-glyph {
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 96px;
    line-height: 1;
    color: rgba(255, 255, 255, .95);
    margin: auto 0;
    text-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}
.atlas-ahero-issue-cover-top {
    align-self: flex-start;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}
.atlas-ahero-issue-cover-vol {
    align-self: flex-end;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .25);
    padding: 4px 8px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.atlas-ahero-issue-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px;
}
.atlas-ahero-issue-info small {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-ahero-issue-info b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-ahero-issue-info .atlas-ahero-issue-cta {
    font-family: var(--atlas-font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--atlas-accent-text);
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .15s;
}
.atlas-ahero-issue-float:hover .atlas-ahero-issue-cta { gap: 10px; }

/* ── Article body grid ────────────────────────────────────── */
.atlas-abody {
    padding: 64px 0 96px;
    background: var(--atlas-bg);
    border-bottom: 1px solid var(--atlas-line);
}
.atlas-abody-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}
@media (max-width: 980px) {
    .atlas-abody-grid { grid-template-columns: 1fr; gap: 48px; }
}

.atlas-amain {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
/* Keep prose paragraphs readable even though the column is now wider */
.atlas-amain > section > p,
.atlas-amain .atlas-dropcap { max-width: 72ch; }
/* Abstract spans the full content column (page-standard width, like the
   references below it) and is justified for a clean block edge. */
.atlas-amain #abstract .atlas-dropcap { text-align: justify; max-width: none; }
/* The abstract keeps the structure the journal gave it: paragraphs, bold run-in
   headings (Background., Methods.…), lists, sub/superscripts. The drop cap still
   lands on the first letter: ::first-letter reaches into the first paragraph. */
.atlas-amain .atlas-abstract {
    font-family: var(--atlas-font-serif);
    font-size: 18.5px;
    line-height: 1.7;
    color: var(--atlas-ink-2);
}
.atlas-amain .atlas-abstract > * { margin: 0; }
.atlas-amain .atlas-abstract > * + * { margin-top: .85em; clear: both; } /* a short first paragraph: the next one starts below the drop cap */
.atlas-amain .atlas-abstract :is(ul, ol) { padding-inline-start: 1.4em; }
.atlas-amain .atlas-abstract :is(strong, b) { font-weight: 600; color: var(--atlas-ink); }
.atlas-amain section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-margin-top: 80px;
}
.atlas-amain h2 {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: 32px;
    letter-spacing: -.018em;
    line-height: 1.1;
    margin: 0;
    color: var(--atlas-ink);
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.atlas-amain h2::before {
    content: attr(data-num);
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-accent-text);
    position: relative;
    top: -2px;
}
.atlas-amain p {
    font-family: var(--atlas-font-serif);
    font-size: 18.5px;
    line-height: 1.7;
    color: var(--atlas-ink-2);
    margin: 0;
    text-wrap: pretty;
}

.atlas-dropcap::first-letter {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-style: italic;
    font-size: 5.6em;
    line-height: .85;
    float: inline-start;
    margin-block: .06em -.05em; margin-inline: -.02em .12em;
    color: var(--atlas-accent-text);
}

/* Keyword chips */
.atlas-kw-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.atlas-kw {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--atlas-bg-soft);
    border: 1px solid var(--atlas-line);
    font-size: 13px;
    color: var(--atlas-ink-2);
    font-weight: 500;
    letter-spacing: -.005em;
    transition: all .15s;
}
.atlas-kw:hover {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
}
.atlas-kw .atlas-kw-h { color: var(--atlas-muted); font-weight: 400; }

/* References list */
.atlas-refs {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ref;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.atlas-refs li {
    counter-increment: ref;
    padding: 14px 18px 14px 56px;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--atlas-ink-2);
    position: relative;
    font-family: var(--atlas-font-serif);
    transition: all .15s;
}
.atlas-refs li::before {
    content: counter(ref);
    position: absolute;
    left: 18px;
    top: 14px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
}
.atlas-refs li:hover {
    border-color: var(--atlas-line-2);
    transform: translateX(2px);
}
.atlas-refs li i,
.atlas-refs li em { font-style: italic; color: var(--atlas-ink); }

/* Citation card with tabs */
.atlas-cite-card {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    overflow: hidden;
}

/* Single‑line tab strip. When tabs don't fit, JS moves the trailing tabs
   into a "More" dropdown anchored to the right edge. Container stays
   strictly one row tall — never wraps. NOTE: do not set overflow here;
   the dropdown menu is positioned below the strip and would be clipped. */
.atlas-cite-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--atlas-line);
    background: var(--atlas-bg-soft);
    padding: 6px;
    position: relative;
    min-width: 0;
}
/* Inner tab row (role="tablist"); lays the tabs out exactly as before. */
.atlas-cite-tablist {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
}
.atlas-cite-tab {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--atlas-font-mono);
    letter-spacing: .06em;
    color: var(--atlas-ink-3);
    border-radius: 7px;
    transition: all .15s;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}
.atlas-cite-tab[hidden] { display: none; }
.atlas-cite-tab:hover {
    color: var(--atlas-ink);
    background: rgba(255,255,255,.5);
}
:root[data-theme="dark"] .atlas-cite-tab:hover {
    background: rgba(255,255,255,.05);
}
.atlas-cite-tab.active {
    background: var(--atlas-ink);
    color: var(--atlas-bg);
}

/* "More" overflow button + dropdown menu */
.atlas-cite-more-wrap {
    margin-inline-start: auto;
    flex-shrink: 0;
    position: relative;
}
.atlas-cite-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--atlas-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-ink-3);
    border-radius: 7px;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
    transition: all .15s;
}
.atlas-cite-more:hover {
    color: var(--atlas-ink);
    background: rgba(255,255,255,.5);
}
:root[data-theme="dark"] .atlas-cite-more:hover {
    background: rgba(255,255,255,.05);
}
.atlas-cite-more.has-active {
    background: var(--atlas-ink);
    color: var(--atlas-bg);
}
.atlas-cite-more svg {
    transition: transform .15s;
}
.atlas-cite-more-wrap[aria-expanded="true"] .atlas-cite-more svg {
    transform: rotate(180deg);
}

.atlas-cite-more-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 10px;
    box-shadow: var(--atlas-shadow-hover);
    padding: 6px;
    min-width: 160px;
    display: none;
    z-index: 30;
    flex-direction: column;
    gap: 2px;
}
.atlas-cite-more-menu.open { display: flex; }
.atlas-cite-more-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    text-align: start;
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atlas-ink-3);
    transition: background .15s, color .15s;
    line-height: 1.2;
}
.atlas-cite-more-item:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
}
.atlas-cite-more-item.active {
    background: var(--atlas-ink);
    color: var(--atlas-bg);
}
.atlas-cite-body {
    padding: 20px 22px;
    font-family: var(--atlas-font-serif);
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--atlas-ink-2);
    position: relative;
    word-break: break-word;
}
.atlas-cite-body.atlas-cite-code {
    font-family: var(--atlas-font-mono);
    font-size: 12.5px;
    line-height: 1.7;
    white-space: pre-wrap;
}
.atlas-cite-pane { display: none; }
.atlas-cite-pane.active { display: block; }
.atlas-cite-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--atlas-line);
    background: var(--atlas-bg);
}
.atlas-cite-foot .atlas-cite-lab {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-cite-foot .atlas-cite-acts {
    display: flex;
    gap: 6px;
}

/* License card */
.atlas-lic {
    background: var(--atlas-bg-soft);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    padding: 24px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
}
@media (max-width: 540px) {
    .atlas-lic { grid-template-columns: 1fr; }
}
.atlas-lic-mark {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.02em;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
}
.atlas-lic-mark span {
    display: block;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    font-style: normal;
    font-weight: 600;
    margin-top: 2px;
    opacity: .6;
}
.atlas-lic-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.atlas-lic-text b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 18px;
    color: var(--atlas-ink);
    letter-spacing: -.01em;
}
.atlas-lic-text p {
    margin: 0;
    font-size: 14px;
    color: var(--atlas-ink-3);
    line-height: 1.55;
    font-family: var(--atlas-font-sans);
}
.atlas-lic-text a {
    color: var(--atlas-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
/* Per-article copyright line (shown when the publication has a copyright
   holder; hidden when cleared). Sits under the licence badge. */
.atlas-lic-copyright {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--atlas-muted);
    font-family: var(--atlas-font-mono);
    letter-spacing: -.01em;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.atlas-aside {
    position: sticky;
    top: 96px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 14px;
}
@media (max-width: 980px) {
    .atlas-aside { position: static; }
}
.atlas-aside-card {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.atlas-aside-card h5,
.atlas-aside-card .atlas-aside-h {
    margin: 0;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}

/* Plugin-injected detail blocks (citation counts, altmetrics, social sharing)
   from the Templates::Article::Details hook — automatically card each top-level
   block so it matches the stats / keyword aside cards. */
/* Article Number plugin: the theme prints the number itself (card footer,
   article header). The plugin's own line under a card and its sidebar item
   said it a second time; the line carries an inline display, hence !important. */
body.atlas-body .articleNumberToc,
body.atlas-body .atlas-aside-plugins .item.articleNumber { display: none !important; }
.atlas-aside-plugins { display: flex; flex-direction: column; gap: 20px; }
.atlas-aside-plugins:empty { display: none; }
/* Card every visible top-level block; skip non-visual nodes (script/link/style)
   that plugins may emit so they never become empty cards. */
.atlas-aside-plugins > *:not(script):not(link):not(style):not(meta) {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    padding: 20px;
    margin: 0;
}

/* OJS sidebar block plugins rendered inside the article aside — restyle the
   plain .pkp_block markup so each block reads as an Atlas aside card. */
.atlas-aside-blocks { display: flex; flex-direction: column; gap: 20px; }
.atlas-aside-blocks:empty { display: none; }
.atlas-aside-blocks .pkp_block {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    padding: 20px;
}
.atlas-aside-blocks .pkp_block .title {
    margin: 0 0 14px;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    line-height: 1.3;
    display: block;
}
.atlas-aside-blocks .pkp_block .content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--atlas-ink-2);
}
.atlas-aside-blocks .pkp_block .content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.atlas-aside-blocks .pkp_block .content li { line-height: 1.45; }
.atlas-aside-blocks .pkp_block .content a {
    color: var(--atlas-ink-2);
    transition: color .15s;
}
.atlas-aside-blocks .pkp_block .content a:hover { color: var(--atlas-accent-text); }
/* Keyword cloud chips */
.atlas-aside-blocks .pkp_block #wordcloud { line-height: 2.1; }
.atlas-aside-blocks .pkp_block #wordcloud a { margin-inline-end: 6px; }

/* ── Most Read block — ranked rows with a view-count eye (CSS-only;
   the plugin markup is untouched) ── */
.atlas-aside-blocks .most_read {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: atlas-mr;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atlas-aside-blocks .most_read_article {
    counter-increment: atlas-mr;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid var(--atlas-line);
}
.atlas-aside-blocks .most_read_article:first-child { border-top: 0; padding-top: 0; }
/* Per-row rank badge (acts as the row's icon) */
.atlas-aside-blocks .most_read_article::before {
    content: counter(atlas-mr, decimal-leading-zero);
    grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.atlas-aside-blocks .most_read_article_title {
    font-size: 13.5px;
    line-height: 1.4;
}
.atlas-aside-blocks .most_read_article_title a {
    color: var(--atlas-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.atlas-aside-blocks .most_read_article_title a:hover { color: var(--atlas-accent-text); }
.atlas-aside-blocks .most_read_article_journal {
    margin-top: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--atlas-muted);
}
/* Eye icon before the view count — the plugin emits an empty .fa-eye span
   (FontAwesome isn't loaded), so we paint our own eye via a mask. */
.atlas-aside-blocks .most_read_article_journal .fa-eye {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ════════════════════════════════════════════════════════════════════
   LAUNCH MODE — new / empty journal homepage
   ════════════════════════════════════════════════════════════════════ */
.atlas-leyebrow {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-bottom: 14px;
}
.atlas-ltitle {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -.02em;
    color: var(--atlas-ink);
    margin: 0 0 14px;
}

/* Hero */
.atlas-lhero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--atlas-line);
    background: linear-gradient(180deg, var(--atlas-bg-soft), var(--atlas-bg));
}
.atlas-lhero-glow {
    position: absolute;
    width: 680px; height: 420px;
    top: -200px; right: -120px;
    background: radial-gradient(circle, var(--atlas-accent-soft), transparent 70%);
    pointer-events: none;
}
.atlas-lhero-in {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: 56px;
    align-items: center;
    padding: 64px 0 72px;
}
.atlas-lbadge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
    border: 1px solid rgba(208,70,23,.2);
    padding: 7px 13px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.atlas-lbadge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--atlas-accent); }
.atlas-lhero-title {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 58px);
    line-height: 1.05;
    letter-spacing: -.022em;
    color: var(--atlas-ink);
    margin: 0 0 20px;
    max-width: 16ch;
    text-wrap: balance;
}
.atlas-lhero-lede {
    font-size: 18px;
    line-height: 1.6;
    color: var(--atlas-ink-2);
    max-width: 54ch;
    margin: 0 0 30px;
}
.atlas-lhero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.atlas-lhero-art {
    position: relative;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: 290px;     /* ~30% smaller than the column; sits to the right */
    margin-inline-start: auto;
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    background: linear-gradient(150deg, #f3e9d3, #e0c896 55%, #caa55f);
    box-shadow: 0 30px 60px -30px rgba(10,9,7,.4);
}
.atlas-lhero-art.has-img { background: var(--atlas-bg-soft); }
.atlas-lhero-art.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-lhero-art .atlas-ring { position: absolute; border: 1px solid rgba(58,38,15,.18); border-radius: 50%; }
.atlas-lhero-art .atlas-ring.r1 { width: 62%; height: 62%; top: -14%; right: -18%; }
.atlas-lhero-art .atlas-ring.r2 { width: 42%; height: 42%; bottom: -8%; left: -10%; }
.atlas-lhero-art-top, .atlas-lhero-art-bot {
    position: absolute; left: 26px; right: 26px;
    font-family: var(--atlas-font-mono);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(50,40,20,.62);
}
.atlas-lhero-art-top { top: 24px; }
.atlas-lhero-art-bot { bottom: 24px; }
.atlas-lhero-art-glyph {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--atlas-font-serif);
    font-style: italic; font-weight: 300;
    font-size: clamp(90px, 12vw, 150px);
    color: rgba(50,40,20,.85);
}

/* Aims & scope */
.atlas-laims { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.atlas-laims-text { font-size: 16px; line-height: 1.7; color: var(--atlas-ink-2); }
.atlas-laims-text p { margin: 0 0 14px; }
.atlas-lscope { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.atlas-lscope span {
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    color: var(--atlas-ink-3);
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: 999px;
    padding: 6px 13px;
}

/* Get-started link cards */
.atlas-lfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 36px; }
.atlas-lfeat-card {
    display: block;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 24px;
    color: inherit;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
a.atlas-lfeat-card:hover {
    border-color: var(--atlas-accent-ring);
    transform: translateY(-3px);
    box-shadow: var(--atlas-shadow-card);
}
.atlas-lfeat-ico {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    margin-bottom: 16px;
    transition: background .15s;
}
a.atlas-lfeat-card:hover .atlas-lfeat-ico { background: var(--atlas-accent); color: var(--atlas-accent-fg); }
.atlas-lfeat-card h3 {
    font-family: var(--atlas-font-serif);
    font-weight: 500; font-size: 20px;
    margin: 0 0 8px; color: var(--atlas-ink);
}
.atlas-lfeat-card p { font-size: 14px; line-height: 1.6; color: var(--atlas-ink-3); margin: 0; }

/* Call for papers */
.atlas-lcfp {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap;
    background: #1f1a12;
    background-image: radial-gradient(120% 160% at 90% -20%, #2a2114, #171109);
    color: #f3efe6;
    border-radius: var(--atlas-radius-xl);
    padding: 40px 44px;
}
.atlas-lcfp-k {
    font-family: var(--atlas-font-mono);
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--atlas-cyan); margin-bottom: 12px;
}
.atlas-lcfp h2 {
    font-family: var(--atlas-font-serif);
    font-weight: 400; font-size: 30px;
    margin: 0 0 10px; color: #f7f2e8; letter-spacing: -.01em;
}
.atlas-lcfp p { margin: 0; color: #bdb6a4; font-size: 15px; line-height: 1.6; max-width: 52ch; }
.atlas-lcfp-deadline { font-family: var(--atlas-font-mono); font-size: 12px; color: var(--atlas-gold); margin-top: 14px; letter-spacing: .04em; }
.atlas-lcfp .atlas-btn-primary { flex: none; }

/* Editorial board preview */
.atlas-leb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.atlas-leb-card {
    display: flex; gap: 16px; align-items: center;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 22px;
}
.atlas-leb-av {
    width: 54px; height: 54px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    color: #fff;
    font-family: var(--atlas-font-mono); font-weight: 600; font-size: 16px;
}
.atlas-leb-nm { font-family: var(--atlas-font-serif); font-weight: 500; font-size: 18px; color: var(--atlas-ink); line-height: 1.2; }
.atlas-leb-af { font-size: 13px; color: var(--atlas-muted); margin-top: 4px; }
.atlas-leb-more { margin-top: 24px; }

/* How to submit steps */
.atlas-lsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 36px; }
.atlas-lstep {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 24px;
}
.atlas-lstep-n {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    font-family: var(--atlas-font-mono); font-size: 13px; font-weight: 600;
    margin-bottom: 16px;
}
.atlas-lstep h3 { font-family: var(--atlas-font-serif); font-weight: 500; font-size: 18px; margin: 0 0 6px; color: var(--atlas-ink); }
.atlas-lstep p { font-size: 13.5px; line-height: 1.55; color: var(--atlas-ink-3); margin: 0; }

/* Contact */
.atlas-lcontact { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.atlas-lcontact-sub { color: var(--atlas-ink-3); font-size: 15px; margin: 0; }

@media (max-width: 880px) {
    .atlas-lhero-in, .atlas-laims { grid-template-columns: 1fr; gap: 36px; }
    .atlas-lhero-art { max-width: 290px; margin: 0 auto; }
    .atlas-lfeat, .atlas-leb, .atlas-lsteps { grid-template-columns: 1fr; }
}

/* ── Editorial board carousel (homepage, both modes) ── */
.atlas-eb-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.atlas-eb-head .atlas-leyebrow { margin-bottom: 12px; }
.atlas-eb-head .atlas-ltitle { margin: 0; }
.atlas-eb-controls { display: flex; align-items: center; gap: 8px; }
.atlas-eb-all { margin-inline-end: 4px; }
.atlas-eb-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.atlas-eb-track::-webkit-scrollbar { display: none; }
.atlas-eb-slide {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 24px 20px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.atlas-eb-slide:hover { border-color: var(--atlas-line-2); transform: translateY(-2px); box-shadow: var(--atlas-shadow-card); }
.atlas-eb-photo { position: relative; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; }
.atlas-eb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-eb-initials {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-family: var(--atlas-font-mono);
    font-weight: 600; font-size: 24px;
    letter-spacing: .02em;
}
.atlas-eb-info { min-width: 0; }
.atlas-eb-nm { font-family: var(--atlas-font-serif); font-weight: 500; font-size: 17px; color: var(--atlas-ink); line-height: 1.25; }
.atlas-eb-ro { font-family: var(--atlas-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--atlas-accent-text); margin-top: 5px; }
.atlas-eb-af { font-size: 13px; color: var(--atlas-muted); margin-top: 5px; line-height: 1.4; }
@media (max-width: 880px) {
    .atlas-eb-track { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
    .atlas-eb-track { grid-auto-columns: 78%; }
}

/* On-this-page outline */
.atlas-outline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.atlas-outline a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--atlas-ink-3);
    transition: all .15s;
    letter-spacing: -.005em;
}
.atlas-outline a:hover {
    background: var(--atlas-bg-soft);
    color: var(--atlas-ink);
}
.atlas-outline a.active {
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
    font-weight: 500;
}
.atlas-outline .atlas-outline-ix {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    color: var(--atlas-muted);
    font-weight: 500;
}

/* Statistics block */
.atlas-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--atlas-line);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--atlas-line);
}
.atlas-stat-row .atlas-stat-cell {
    background: var(--atlas-bg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atlas-stat-row .atlas-stat-cell .v {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--atlas-ink);
}
.atlas-stat-row .atlas-stat-cell .l {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-aside-card .atlas-delta {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    color: var(--atlas-success-text);
    font-weight: 600;
}

/* Download button */
.atlas-dl-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--atlas-line);
    background: var(--atlas-bg);
    border-radius: 10px;
    transition: all .15s;
    text-align: start;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.atlas-dl-btn:hover {
    border-color: var(--atlas-accent-ring);
    background: var(--atlas-accent-soft);
}
.atlas-dl-btn .atlas-dl-ico {
    width: 40px;
    height: 40px;
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    transition: background .15s;
}
.atlas-dl-btn:hover .atlas-dl-ico { background: var(--atlas-accent); color: var(--atlas-accent-fg); }
.atlas-dl-btn .atlas-dl-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.atlas-dl-btn .atlas-dl-info b {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--atlas-ink);
}
.atlas-dl-btn .atlas-dl-info small {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--atlas-muted);
    text-transform: uppercase;
}

/* Issue mini card in sidebar */
.atlas-issue-mini {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.atlas-issue-mini-cover {
    width: 80px;
    aspect-ratio: var(--atlas-cover-ar, 3/4);
    border-radius: 8px;
    overflow: hidden;
    background: var(--atlas-primary-grad);
    position: relative;
    flex-shrink: 0;
}
.atlas-issue-mini-cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.atlas-issue-mini-cover .atlas-issue-mini-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 48px;
    color: rgba(255,255,255,.92);
}
.atlas-issue-mini-cover .atlas-issue-mini-vol {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-family: var(--atlas-font-mono);
    font-size: 8px;
    color: #fff;
    letter-spacing: .1em;
    opacity: .85;
}
.atlas-issue-mini-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atlas-issue-mini-body small {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--atlas-muted);
    text-transform: uppercase;
}
.atlas-issue-mini-body b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--atlas-ink);
    text-wrap: balance;
}
.atlas-issue-mini-body a {
    color: var(--atlas-accent-text);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Tag list (categories etc.) */
.atlas-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.atlas-tag-list a {
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--atlas-bg-soft);
    border: 1px solid var(--atlas-line);
    font-size: 12px;
    font-weight: 500;
    color: var(--atlas-ink-2);
    transition: all .15s;
    letter-spacing: -.005em;
}
.atlas-tag-list a:hover {
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-text);
    background: var(--atlas-accent-soft);
}

/* ── Next / previous in issue ─────────────────────────────── */
.atlas-next-prev {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding-top: 32px;
    margin-top: 8px;
    border-top: 1px solid var(--atlas-line);
}
@media (max-width: 680px) {
    .atlas-next-prev { grid-template-columns: 1fr; }
}
.atlas-np-card {
    padding: 20px;
    border: 1px solid var(--atlas-line);
    border-radius: 12px;
    background: var(--atlas-bg-elev);
    transition: all .18s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.atlas-np-card:hover {
    border-color: var(--atlas-line-2);
    transform: translateY(-2px);
    box-shadow: var(--atlas-shadow-card);
}
.atlas-np-card .atlas-np-lab {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.atlas-np-card.next .atlas-np-lab { justify-content: flex-end; }
.atlas-np-card .atlas-np-ttl {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
}
.atlas-np-card.next .atlas-np-ttl { text-align: end; }

/* Galleys list (used in side card) */
.atlas-galleys {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atlas-galley-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: var(--atlas-accent-soft);
    color: var(--atlas-accent-text);
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    transition: all .15s;
}
.atlas-galley-link:hover {
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
}

/* ───────────── Sidebar (default OJS sidebar blocks) ───────────── */
.atlas-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.atlas-sidebar .pkp_block {
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 20px;
}
.atlas-sidebar .pkp_block .title {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin: 0 0 12px;
    padding: 0;
    border: 0;
}
.atlas-sidebar .pkp_block .content { font-size: 14px; color: var(--atlas-ink-2); }
.atlas-sidebar .pkp_block ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================
   ISSUE ARCHIVE PAGE (JTECH archive design — covers / list / by year)
   ============================================================ */

/* ── Archive hero ──────────────────────────────────────────── */
.atlas-arc-hero {
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--atlas-line);
    position: relative;
    overflow: hidden;
}
.atlas-arc-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--atlas-accent-soft, rgba(208,70,23,.14)), transparent 65%);
    top: -220px;
    right: -160px;
    pointer-events: none;
    filter: blur(8px);
}
.atlas-arc-hero-inner { position: relative; z-index: 1; }
.atlas-arc-hero h1 {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: 1.04;
    letter-spacing: -.022em;
    margin: 0 0 20px;
    color: var(--atlas-ink);
    text-wrap: balance;
    max-width: 18ch;
}
.atlas-arc-hero h1 em { font-style: italic; color: var(--atlas-accent-text); }
.atlas-arc-hero p {
    font-size: 17px;
    color: var(--atlas-ink-3);
    max-width: 60ch;
    margin: 0;
    line-height: 1.55;
}

/* ── Decorative deck on the right (3 fanned issue covers, glassy) ── */
.atlas-arc-hero-deck {
    position: absolute;
    top: -8px;
    right: 24px;
    width: 380px;
    height: 280px;
    pointer-events: none;
    z-index: 1;
}
@media (max-width: 1100px) {
    .atlas-arc-hero-deck { display: none; }
}

/* Subtle grid behind the deck — fades into the page on the left side */
.atlas-arc-hero-deck::before {
    content: "";
    position: absolute;
    inset: -40px -40px -40px -120px;
    background-image:
        linear-gradient(to right,  var(--atlas-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--atlas-line) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .35;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 70% 50%, black 0%, transparent 75%);
    pointer-events: none;
}

.atlas-arc-hero-deck-card {
    --rot: 0deg;
    position: absolute;
    width: 165px;
    aspect-ratio: 3/4;
    border-radius: 14px;
    overflow: hidden;
    transform: rotate(var(--rot));
    box-shadow:
        0 24px 48px -18px rgba(10, 9, 7, .3),
        0 10px 20px -6px rgba(10, 9, 7, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .18);
    will-change: transform;
}

/* Glass + light reflection on top */
.atlas-arc-hero-deck-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .28), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, transparent 35%);
    pointer-events: none;
    z-index: 1;
}

.atlas-arc-hero-deck-card[data-idx="0"] {
    --rot: 6deg;
    top: 0;
    right: 0;
    z-index: 3;
    animation: atlas-deck-float 7s ease-in-out infinite;
    transform-origin: center bottom;
}
.atlas-arc-hero-deck-card[data-idx="1"] {
    --rot: -3deg;
    top: 26px;
    right: 86px;
    z-index: 2;
    opacity: .92;
    animation: atlas-deck-float 9s ease-in-out -2s infinite;
    transform-origin: center bottom;
}
.atlas-arc-hero-deck-card[data-idx="2"] {
    --rot: -12deg;
    top: 50px;
    right: 172px;
    z-index: 1;
    opacity: .78;
    animation: atlas-deck-float 11s ease-in-out -4s infinite;
    transform-origin: center bottom;
}

@keyframes atlas-deck-float {
    0%, 100% { transform: rotate(var(--rot)) translateY(0); }
    50%      { transform: rotate(var(--rot)) translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
    .atlas-arc-hero-deck-card { animation: none !important; }
}

.atlas-arc-hero-deck-cap {
    position: absolute;
    inset: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}
.atlas-arc-hero-deck-top,
.atlas-arc-hero-deck-bot {
    font-family: var(--atlas-font-mono);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .9);
    display: flex;
    justify-content: space-between;
    gap: 6px;
}
.atlas-arc-hero-deck-bot {
    align-items: flex-end;
}
.atlas-arc-hero-deck-bot span:last-child {
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    padding: 3px 6px;
    border-radius: 5px;
}
.atlas-arc-hero-deck-glyph {
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 70px;
    line-height: .9;
    letter-spacing: -.04em;
    align-self: center;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}

/* Stats grid (4 boxes; 3 when the journal is not open access) */
.atlas-arc-stats.atlas-arc-stats-3 { grid-template-columns: repeat(3, 1fr); }
.atlas-arc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--atlas-line);
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 48px;
}
@media (max-width: 680px) { .atlas-arc-stats { grid-template-columns: 1fr 1fr; } .atlas-arc-stats.atlas-arc-stats-3 { grid-template-columns: 1fr; } }
.atlas-arc-stats .atlas-arc-stat {
    background: var(--atlas-bg-elev);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.atlas-arc-stats .atlas-arc-stat-v {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 38px;
    letter-spacing: -.022em;
    line-height: 1;
    color: var(--atlas-ink);
    font-variant-numeric: tabular-nums;
}
.atlas-arc-stats .atlas-arc-stat-k {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}

/* ── Style switcher (Covers / List / By year) ──────────────── */
.atlas-arc-switch {
    display: inline-flex;
    background: var(--atlas-bg-soft);
    border: 1px solid var(--atlas-line);
    border-radius: 12px;
    padding: 5px;
    gap: 2px;
}
.atlas-arc-switch button {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--atlas-ink-3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .15s;
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 1.2;
}
.atlas-arc-switch button:hover { color: var(--atlas-ink); }
.atlas-arc-switch button.active {
    background: var(--atlas-bg-elev);
    color: var(--atlas-ink);
    box-shadow: 0 1px 3px rgba(10,9,7,.06), 0 0 0 1px var(--atlas-line);
}
:root[data-theme="dark"] .atlas-arc-switch button.active {
    box-shadow: 0 0 0 1px var(--atlas-line-2);
}
.atlas-arc-switch .atlas-arc-switch-ico {
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ── View containers ──────────────────────────────────────── */
.atlas-arc-views > [data-arc-view] { display: none; }
.atlas-arc-views > [data-arc-view].active { display: block; }
.atlas-arc-views > [data-arc-view="covers"].active { display: grid; }
.atlas-arc-views > [data-arc-view="year"].active   { display: flex; }

/* ── Variant: COVERS ──────────────────────────────────────── */
.atlas-arc-covers {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    /* Covers keep their own proportions, so a journal that mixes cover sizes
       would otherwise get a tall row with empty tails under the shorter cards.
       Let each card end where its content ends instead. */
    align-items: start;
}
@media (max-width: 920px) { .atlas-arc-covers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .atlas-arc-covers { grid-template-columns: 1fr; } }
.atlas-arc-cv {
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: transparent;
    transition: transform .25s ease;
    text-decoration: none;
    color: inherit;
}
.atlas-arc-cv:hover { transform: translateY(-4px); }
.atlas-arc-cv-frame {
    aspect-ratio: var(--atlas-cover-ar, 3/4);
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--atlas-shadow-card);
    transition: box-shadow .25s ease;
}
.atlas-arc-cv:hover .atlas-arc-cv-frame { box-shadow: var(--atlas-shadow-hover); }
.atlas-arc-cv-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.atlas-arc-cv-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%);
    pointer-events: none;
}
.atlas-arc-cv-cap {
    position: absolute;
    inset: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    z-index: 1;
}
.atlas-arc-cv-cap-top {
    display: flex;
    justify-content: space-between;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
/* Same as the issue cover numeral: sized by the room between the top and
   bottom lines, so it cannot overlap them on a narrow card. */
.atlas-arc-cv-glyph {
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Sits 10px above the middle, where the old -20px margin put it. */
    padding-bottom: 20px;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,.95);
    text-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.atlas-arc-cv-glyph > span {
    font-size: min(120px, 95cqb, calc(100cqi / (max(var(--atlas-glyph-len, 1), 1) * .62)));
    line-height: .85;
    letter-spacing: -.04em;
}
.atlas-arc-cv-cap-bot {
    display: flex;
    justify-content: space-between;
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
.atlas-arc-cv-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atlas-arc-cv-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
    flex-wrap: wrap;
}
.atlas-arc-cv-meta .atlas-arc-cv-dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--atlas-line-2);
}
.atlas-arc-cv-meta .atlas-arc-cv-live {
    color: var(--atlas-accent-text);
    font-weight: 600;
}
.atlas-arc-cv-meta .atlas-arc-cv-live::before {
    content: "●";
    margin-inline-end: 5px;
    color: var(--atlas-accent-text);
}
.atlas-arc-cv-ttl {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -.012em;
    color: var(--atlas-ink);
    margin: 0;
    text-wrap: balance;
    transition: color .15s;
}
.atlas-arc-cv:hover .atlas-arc-cv-ttl { color: var(--atlas-accent-text); }
.atlas-arc-cv-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--atlas-ink-3);
    padding-top: 8px;
}
.atlas-arc-cv-foot .atlas-arc-cv-k {
    text-transform: uppercase;
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    color: var(--atlas-muted);
    letter-spacing: .06em;
}

/* ── Variant: LIST ──────────────────────────────────────── */
.atlas-arc-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--atlas-bg-elev);
}
.atlas-arc-row {
    display: grid;
    grid-template-columns: 120px 1fr 220px 140px 80px;
    gap: 24px;
    align-items: center;
    padding: 22px 28px;
    border-bottom: 1px solid var(--atlas-line);
    transition: background .15s;
    text-align: start;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.atlas-arc-row:last-child { border-bottom: 0; }
.atlas-arc-row:hover { background: var(--atlas-bg-soft); }
.atlas-arc-row .atlas-arc-row-vol {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--atlas-ink);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.atlas-arc-row .atlas-arc-row-vol small {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-arc-row .atlas-arc-row-ttl {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.012em;
    color: var(--atlas-ink);
    margin: 0;
    text-wrap: balance;
    transition: color .15s;
}
.atlas-arc-row .atlas-arc-row-ttl small {
    display: block;
    font-family: var(--atlas-font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--atlas-ink-3);
    margin-top: 6px;
    line-height: 1.5;
    letter-spacing: -.005em;
    text-transform: none;
}
.atlas-arc-row:hover .atlas-arc-row-ttl { color: var(--atlas-accent-text); }
.atlas-arc-row .atlas-arc-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--atlas-ink-3);
}
.atlas-arc-row .atlas-arc-row-meta b { color: var(--atlas-ink); font-weight: 500; }
.atlas-arc-row .atlas-arc-row-meta .atlas-arc-row-meta-k {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    margin-bottom: 2px;
}
.atlas-arc-row .atlas-arc-row-ct {
    font-family: var(--atlas-font-mono);
    font-size: 13px;
    color: var(--atlas-ink-2);
    font-weight: 500;
    letter-spacing: .04em;
    text-align: end;
}
.atlas-arc-row .atlas-arc-row-ct b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -.01em;
    display: block;
    color: var(--atlas-ink);
}
.atlas-arc-row .atlas-arc-row-ct small {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-arc-row .atlas-arc-row-arr {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--atlas-line);
    color: var(--atlas-ink-2);
    transition: all .2s;
    justify-self: end;
}
.atlas-arc-row:hover .atlas-arc-row-arr {
    border-color: var(--atlas-accent-ring);
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    transform: translateX(3px);
}
.atlas-arc-row.live {
    background: linear-gradient(90deg, var(--atlas-accent-soft, rgba(208,70,23,.05)), transparent 80%);
}
:root[data-theme="dark"] .atlas-arc-row.live {
    background: linear-gradient(90deg, rgba(255,122,69,.08), transparent 80%);
}
.atlas-arc-row .atlas-arc-row-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    border-radius: 999px;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
    width: fit-content;
}
.atlas-arc-row .atlas-arc-row-live-pill .atlas-arc-row-live-dot {
    width: 5px;
    height: 5px;
    background: var(--atlas-accent-fg);
    border-radius: 999px;
}
@media (max-width: 1180px) {
    .atlas-arc-row { grid-template-columns: 110px 1fr 160px 60px; gap: 18px; }
    .atlas-arc-row .atlas-arc-row-ct { display: none; }
}
@media (max-width: 820px) {
    .atlas-arc-row { grid-template-columns: 90px 1fr 60px; padding: 20px 22px; gap: 16px; }
    .atlas-arc-row .atlas-arc-row-meta { display: none; }
}

/* ── Variant: BY YEAR ──────────────────────────────────────── */
.atlas-arc-year {
    flex-direction: column;
    gap: 64px;
}
.atlas-arc-yblock {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 48px;
    align-items: start;
    padding-top: 40px;
    border-top: 1px solid var(--atlas-line);
}
.atlas-arc-yblock:first-child {
    padding-top: 0;
    border-top: 0;
}
@media (max-width: 780px) {
    .atlas-arc-yblock {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
.atlas-arc-yside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
@media (max-width: 780px) {
    .atlas-arc-yside {
        position: static;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        border-bottom: 1px solid var(--atlas-line);
        padding-bottom: 16px;
    }
}
.atlas-arc-ynum {
    font-family: var(--atlas-font-serif);
    font-weight: 400;
    font-size: 96px;
    line-height: .85;
    letter-spacing: -.038em;
    color: var(--atlas-ink);
    font-variant-numeric: tabular-nums;
}
.atlas-arc-yblock.live .atlas-arc-ynum { color: var(--atlas-accent-text); }
@media (max-width: 780px) { .atlas-arc-ynum { font-size: 64px; } }

.atlas-arc-ymeta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.atlas-arc-ymeta-lab {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-arc-ymeta-v {
    font-size: 14.5px;
    color: var(--atlas-ink-2);
    font-weight: 500;
    letter-spacing: -.005em;
}
.atlas-arc-ymeta-v b {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    margin-inline-end: 4px;
    font-variant-numeric: tabular-nums;
}

.atlas-arc-yissues {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.atlas-arc-yr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px 26px;
    border: 1px solid var(--atlas-line);
    border-radius: 14px;
    background: var(--atlas-bg-elev);
    transition: all .2s ease;
    text-align: start;
    text-decoration: none;
    color: inherit;
}
.atlas-arc-yr:hover {
    border-color: var(--atlas-line-2);
    transform: translateX(4px);
    box-shadow: var(--atlas-shadow-card);
}
.atlas-arc-yr-marker {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    border-radius: 10px;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -.02em;
    flex: 0 0 auto;
    text-align: center;
}
.atlas-arc-yr-marker span {
    display: block;
    font-family: var(--atlas-font-mono);
    font-style: normal;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: .12em;
    margin-top: 2px;
    opacity: .65;
}
.atlas-arc-yr.live .atlas-arc-yr-marker {
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
}
/* On the accent fill the number keeps full strength: --atlas-accent-fg is
   chosen for 4.5:1 at full opacity, the .65 fade would undo that. */
.atlas-arc-yr.live .atlas-arc-yr-marker span { opacity: 1; }
.atlas-arc-yr-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.atlas-arc-yr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.atlas-arc-yr-head .atlas-arc-yr-vn {
    font-family: var(--atlas-font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
    font-weight: 500;
}
.atlas-arc-yr-head .atlas-arc-yr-vn b {
    color: var(--atlas-ink-2);
    font-weight: 600;
}
.atlas-arc-yr-head .atlas-arc-yr-livetag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
    border-radius: 999px;
    font-family: var(--atlas-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.atlas-arc-yr-head .atlas-arc-yr-livetag .atlas-arc-yr-livetag-dot {
    width: 5px;
    height: 5px;
    background: var(--atlas-accent-fg);
    border-radius: 999px;
}
.atlas-arc-yr-ttl {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    margin: 0;
    text-wrap: balance;
    transition: color .15s;
}
.atlas-arc-yr:hover .atlas-arc-yr-ttl { color: var(--atlas-accent-text); }
.atlas-arc-yr-ttl small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--atlas-font-sans);
    color: var(--atlas-ink-3);
    margin-top: 4px;
    letter-spacing: -.005em;
    text-transform: none;
    line-height: 1.5;
}
.atlas-arc-yr-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}
.atlas-arc-yr-ct {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--atlas-muted);
    text-align: end;
}
.atlas-arc-yr-ct b {
    display: block;
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--atlas-ink);
    font-variant-numeric: tabular-nums;
}
.atlas-arc-yr-arr {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid var(--atlas-line);
    display: grid;
    place-items: center;
    color: var(--atlas-ink-2);
    transition: all .18s;
    flex: 0 0 auto;
}
.atlas-arc-yr:hover .atlas-arc-yr-arr {
    border-color: var(--atlas-accent-ring);
    background: var(--atlas-accent);
    color: var(--atlas-accent-fg);
}
@media (max-width: 680px) {
    .atlas-arc-yr-right .atlas-arc-yr-ct { display: none; }
}

/* ── Legacy: simple grid (used by indexSite.tpl) ─────────── */
.atlas-issue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
}
/* Admin-chosen 4-per-row on the publisher landing (data-cols="4"). */
.atlas-issue-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .atlas-issue-grid[data-cols="4"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .atlas-issue-grid, .atlas-issue-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .atlas-issue-grid, .atlas-issue-grid[data-cols="4"] { grid-template-columns: 1fr; } }
.atlas-issue-card {
    display: flex;
    flex-direction: column;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    overflow: hidden;
    transition: all .22s;
}
.atlas-issue-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--atlas-shadow-hover);
    border-color: var(--atlas-line-2);
}
.atlas-issue-cover-frame {
    aspect-ratio: var(--atlas-cover-ar, 3/4);
    background: var(--atlas-primary-grad);
    position: relative;
    overflow: hidden;
}
.atlas-issue-cover-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.atlas-issue-card-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atlas-issue-card-body .atlas-issue-vol {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--atlas-muted);
}
.atlas-issue-card-body h3 {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    color: var(--atlas-ink);
    letter-spacing: -.015em;
}
.atlas-issue-card-body h3 a:hover { color: var(--atlas-accent-text); }

/* ============================================================
   EDITORIAL TEAM PAGE — Atlas skin for plugin-rendered content
   The plugin owns the inner markup; we constrain width, fix
   typography, and make any cards/links/photos feel native to
   the theme without touching the plugin's HTML.
   ============================================================ */

/* Constrain plugin output that's NOT already wrapped by us. Targets the
   case where a plugin replaces the editorialTeam.tpl entirely and emits
   content directly into <main class="atlas-main">. */
body.atlas-body.pkp_op_editorialTeam .atlas-main > *:not(section):not(.atlas-section):not(.atlas-arc-hero):not(.atlas-ahero):not(footer):not(header):not(.atlas-cmd-overlay):not(.atlas-toast),
body.atlas-body.pkp_op_editorialteam .atlas-main > *:not(section):not(.atlas-section):not(.atlas-arc-hero):not(.atlas-ahero):not(footer):not(header):not(.atlas-cmd-overlay):not(.atlas-toast),
body.atlas-body.pkp_page_editorialTeam .atlas-main > *:not(section):not(.atlas-section):not(.atlas-arc-hero):not(.atlas-ahero):not(footer):not(header):not(.atlas-cmd-overlay):not(.atlas-toast) {
    max-width: var(--atlas-container, 1280px);
    margin-left: auto;
    margin-right: auto;
    padding: 64px 32px 96px;
    box-sizing: border-box;
}

/* Wrapper used by our editorialTeam.tpl. Tight top padding so the
   plugin's own H1 sits close to the header without dead space. */
.atlas-team-section { padding: 32px 0 64px; }
.atlas-team-wrap { max-width: var(--atlas-container, 1280px); }
.atlas-team-wrap > *:first-child { margin-top: 0 !important; }

/* Hide the duplicate <header class="ebm-page-header"> that the
   editorial board plugin emits — its <h1> is shown again as a
   section title further down inside the plugin's own content. */
body.atlas-body.pkp_op_editorialTeam .ebm-page-header,
body.atlas-body.pkp_op_editorialteam .ebm-page-header,
body.atlas-body .ebm-page-header { display: none !important; }

/* ── Typography for plugin output ───────────────────────────── */
body.atlas-body.pkp_op_editorialTeam .atlas-main h1,
body.atlas-body.pkp_op_editorialteam .atlas-main h1,
.atlas-team-wrap h1 {
    font-family: var(--atlas-font-serif);
    color: var(--atlas-ink);
    font-weight: 400;
    font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -.022em;
    margin: 0 0 24px;
    padding: 0;
}

body.atlas-body.pkp_op_editorialTeam .atlas-main h2,
body.atlas-body.pkp_op_editorialteam .atlas-main h2,
.atlas-team-wrap h2 {
    font-family: var(--atlas-font-serif);
    color: var(--atlas-ink);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.1;
    letter-spacing: -.018em;
    margin: 56px 0 24px;
    padding: 0;
    border: 0;
}
body.atlas-body.pkp_op_editorialTeam .atlas-main h2:first-child,
body.atlas-body.pkp_op_editorialteam .atlas-main h2:first-child,
.atlas-team-wrap h2:first-child {
    margin-top: 0;
}
/* Decorative dash + underline removed — the editorial board plugin
   handles its own section header layout (title left · count right). */

body.atlas-body.pkp_op_editorialTeam .atlas-main h3,
body.atlas-body.pkp_op_editorialteam .atlas-main h3,
.atlas-team-wrap h3 {
    font-family: var(--atlas-font-serif);
    color: var(--atlas-ink);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -.012em;
    margin: 28px 0 12px;
}

body.atlas-body.pkp_op_editorialTeam .atlas-main h4,
body.atlas-body.pkp_op_editorialteam .atlas-main h4,
.atlas-team-wrap h4 {
    font-family: var(--atlas-font-serif);
    color: var(--atlas-ink);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 20px 0 8px;
}

body.atlas-body.pkp_op_editorialTeam .atlas-main p,
body.atlas-body.pkp_op_editorialteam .atlas-main p,
.atlas-team-wrap p {
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--atlas-ink-2);
    margin: 0 0 14px;
}

/* No further opinions on plugin internals — the editorial board plugin
   ships with its own card layout, member counts and avatars. We stay
   out of its way. */

/* ───────────── Form pages (login, register, search) ───────────── */
.atlas-form-page {
    padding: 64px 0 80px;
}
.atlas-form-card {
    max-width: 520px;
    margin: 0 auto;
    background: var(--atlas-bg-elev);
    border: 1px solid var(--atlas-line);
    border-radius: var(--atlas-radius-lg);
    padding: 36px;
}
.atlas-form-card h1 {
    font-family: var(--atlas-font-serif);
    font-weight: 500;
    font-size: 32px;
    margin: 0 0 8px;
    letter-spacing: -.015em;
    color: var(--atlas-ink);
}
.atlas-form-card .atlas-form-sub {
    color: var(--atlas-muted);
    font-size: 14px;
    margin: 0 0 28px;
}

/* generic pkp form polish */
body.atlas-body .pkp_page_index .pkp_structure_main,
body.atlas-body .pkp_structure_main { color: var(--atlas-ink-2); }
body.atlas-body .pkp_structure_main h1,
body.atlas-body .pkp_structure_main h2,
body.atlas-body .pkp_structure_main h3 {
    font-family: var(--atlas-font-serif);
    color: var(--atlas-ink);
    letter-spacing: -.015em;
}
/* Accent link color only for prose content (paragraphs, list items inside
   long‑form sections), NOT every anchor — buttons, cards and chips style
   themselves explicitly. */
body.atlas-body .atlas-foot-content a,
body.atlas-body .atlas-article-abstract a,
body.atlas-body .atlas-amain > section p a,
body.atlas-body .atlas-amain > section li a:not(.atlas-kw):not(.atlas-tag-list a),
body.atlas-body .atlas-lic-text a {
    color: var(--atlas-accent-text);
}
body.atlas-body .atlas-foot-content a:hover,
body.atlas-body .atlas-article-abstract a:hover,
body.atlas-body .atlas-amain > section p a:hover,
body.atlas-body .atlas-amain > section li a:hover,
body.atlas-body .atlas-lic-text a:hover { text-decoration: underline; }

/* Links inside running text are underlined, so they are not told apart by
   colour alone (WCAG 1.4.1): references and other article body text, the
   announcement text, issue descriptions and the footer's free-text field.
   Only anchors without a class — buttons, pills, cards, menus and badges
   style themselves with classes and keep their own look. Static pages
   (.atlas-prose) and the footer columns were underlined already. */
body.atlas-body .atlas-article-abstract a:not([class]),
body.atlas-body .atlas-amain > section p a:not([class]),
body.atlas-body .atlas-amain > section li a:not([class]),
body.atlas-body .atlas-ann-body a:not([class]),
body.atlas-body .atlas-lede a:not([class]),
body.atlas-body .atlas-foot-bot > div:first-child a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

/* The header search field (shown when the command palette is off) has no
   outline of its own; the pill around it shows keyboard focus instead. */
form.atlas-searchbtn:focus-within { outline: 2px solid var(--atlas-focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--atlas-focus-halo); }
/* The pill carries the ring; the field inside it draws none of its own. */
body.atlas-body form.atlas-searchbtn input:focus { outline: 0; box-shadow: none; }

/* Hard‑lock button text colors so OJS / parent‑theme link colors can never
   bleed in. Specificity is high enough to beat any
   body … .pkp_structure_main a rule the host page may inject. */
body.atlas-body a.atlas-btn,
body.atlas-body button.atlas-btn { color: var(--atlas-ink); text-decoration: none; }
body.atlas-body a.atlas-btn:hover,
body.atlas-body button.atlas-btn:hover { color: var(--atlas-ink); text-decoration: none; }

body.atlas-body a.atlas-btn-primary,
body.atlas-body button.atlas-btn-primary {
    background: var(--atlas-ink);
    border-color: var(--atlas-ink);
    color: var(--atlas-bg);
}
body.atlas-body a.atlas-btn-primary:hover,
body.atlas-body button.atlas-btn-primary:hover {
    background: var(--atlas-ink-2);
    border-color: var(--atlas-ink-2);
    color: var(--atlas-bg);
}

body.atlas-body a.atlas-btn-accent,
body.atlas-body button.atlas-btn-accent {
    background: var(--atlas-accent);
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-fg);
}
body.atlas-body a.atlas-btn-accent:hover,
body.atlas-body button.atlas-btn-accent:hover {
    background: var(--atlas-accent);
    border-color: var(--atlas-accent-ring);
    color: var(--atlas-accent-fg);
    filter: brightness(1.08);
}

body.atlas-body a.atlas-btn-ghost,
body.atlas-body button.atlas-btn-ghost,
body.atlas-body a.atlas-btn-outline,
body.atlas-body button.atlas-btn-outline { color: var(--atlas-ink); }

/* Same protection for icon buttons, mini buttons, chips, pills, cards,
   galley links and the dark CTA action buttons. */
body.atlas-body a.atlas-iconbtn,
body.atlas-body button.atlas-iconbtn,
body.atlas-body a.atlas-iconmini,
body.atlas-body button.atlas-iconmini,
body.atlas-body a.atlas-chip,
body.atlas-body button.atlas-chip,
body.atlas-body a.atlas-tag-pill,
body.atlas-body a.atlas-author-chip,
body.atlas-body a.atlas-cite-tab,
body.atlas-body button.atlas-cite-tab,
body.atlas-body a.atlas-art-card,
body.atlas-body a.atlas-issue-card,
body.atlas-body a.atlas-tl-card,
body.atlas-body a.atlas-np-card,
body.atlas-body a.atlas-cmd-row,
body.atlas-body a.atlas-meta-pill,
body.atlas-body button.atlas-meta-pill,
body.atlas-body a.atlas-utilbar-submit,
body.atlas-body a.atlas-galley-link,
body.atlas-body a.atlas-dl-btn,
body.atlas-body a.atlas-kw {
    text-decoration: none;
}
body.atlas-body a.atlas-utilbar-submit { color: var(--atlas-primary-fg); }
body.atlas-body a.atlas-galley-link { color: var(--atlas-accent-text); }
body.atlas-body a.atlas-galley-link:hover { color: var(--atlas-accent-fg); }

/* CTA accent action keeps its on-accent text colour on hover too */
body.atlas-body .atlas-cta a.atlas-btn-accent,
body.atlas-body .atlas-cta button.atlas-btn-accent { color: var(--atlas-accent-fg); }

/* Hero art glyph + corner labels never accent‑shift */
body.atlas-body .atlas-hero-art a { color: inherit; }
body.atlas-body .atlas-cover a { color: inherit; }
body.atlas-body input[type="text"],
body.atlas-body input[type="email"],
body.atlas-body input[type="password"],
body.atlas-body input[type="search"],
body.atlas-body select,
body.atlas-body textarea {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    background: var(--atlas-bg);
    border: 1px solid var(--atlas-line-2);
    border-radius: 10px;
    font-size: 14px;
    color: var(--atlas-ink);
    transition: border-color .15s;
}
body.atlas-body textarea {
    height: auto;
    padding: 12px 14px;
    line-height: 1.5;
}
body.atlas-body input:focus,
body.atlas-body select:focus,
body.atlas-body textarea:focus {
    outline: 2px solid var(--atlas-focus);
    outline-offset: 2px;
    border-color: var(--atlas-accent-ring);
    box-shadow: 0 0 0 6px var(--atlas-focus-halo);
}
body.atlas-body button[type="submit"],
body.atlas-body input[type="submit"] {
    height: 42px;
    padding: 0 18px;
    background: var(--atlas-ink);
    color: var(--atlas-bg);
    border: 1px solid var(--atlas-ink);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
body.atlas-body button[type="submit"]:hover,
body.atlas-body input[type="submit"]:hover {
    background: var(--atlas-ink-2);
    border-color: var(--atlas-ink-2);
}

/* ════════════════════════════════════════════════════════════════════
   SITE (PUBLISHER) LANDING — indexSite.tpl
   ════════════════════════════════════════════════════════════════════ */
.atlas-site-logobar {
    padding: 28px 0;
    border-bottom: 1px solid var(--atlas-line);
    background: var(--atlas-bg-elev);
    text-align: center;
}
.atlas-site-logobar img { max-height: 72px; display: inline-block; }

.atlas-site-intro { padding-bottom: 24px; }
/* Centered publisher logo (logo = "intro"), above the name. */
.atlas-site-intro-logo {
    display: block;
    margin: 0 auto 20px;
    max-height: 76px;
    width: auto;
}
/* Eyebrow + publisher name centred; the about text runs full width, justified. */
.atlas-site-intro .atlas-leyebrow { text-align: center; }
.atlas-site-title { margin: 8px 0 0; text-align: center; }
.atlas-site-about {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--atlas-ink-2);
    text-align: justify;
}
.atlas-site-about p { margin: 0 0 12px; }
.atlas-site-about p:last-child { margin-bottom: 0; }

/* Journal mono cover (no favicon) — acronym + initial over the primary grad */
.atlas-jrnl-mono {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    color: #fff;
}
.atlas-jrnl-acr {
    font-family: var(--atlas-font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
}
.atlas-jrnl-initial {
    align-self: flex-end;
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 88px;
    line-height: .8;
    letter-spacing: -.04em;
    text-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
/* Published-stats line on the publisher landing journal cards (replaces the
   old free-text description). */
.atlas-jrnl-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--atlas-font-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--atlas-ink-3);
    margin: 10px 0 0;
    letter-spacing: .01em;
}
.atlas-jrnl-stats svg { flex: none; color: var(--atlas-primary-text); opacity: .85; }
.atlas-jrnl-cta {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--atlas-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--atlas-primary-text);
}
/* Publisher-landing journal cards: let the body fill the (grid-stretched)
   card height and pin the CTA to the bottom so "Enter journal →" lines up
   across every card regardless of name/description length. Scoped to
   .atlas-jrnl-card so journal-page issue summaries are untouched. */
.atlas-jrnl-card .atlas-issue-card-body { flex: 1 1 auto; }
.atlas-jrnl-card .atlas-jrnl-cta { margin-top: auto; padding-top: 14px; align-self: center; text-align: center; }

/* ───────────── Forced colours (Windows High Contrast) ─────────────
   The browser repaints text, fills and borders in the reader's system
   colours, which loses two things: a state shown by its fill alone (the
   current language, the pressed filter, the selected view or citation
   style, the palette row, the section being read, the current slide) and
   a control drawn only with a fill (menu bars, slider dots, reading
   progress). Selected states take the system highlight pair and drawn
   controls the button text colour; forced-color-adjust: none lets those
   system colours through, so everything inside is set here too. Kept at
   the end of the file so it outranks each component's own state rule. */
@media (forced-colors: active) {
    :root:root .atlas-utilbar-lang a.on,
    :root:root .atlas-lang-switch a.active,
    :root:root .atlas-chip.active,
    :root:root .atlas-arc-switch button.active,
    :root:root .atlas-cite-tab.active,
    :root:root .atlas-cite-more-item.active,
    :root:root .atlas-cmd-row.active,
    :root:root .atlas-outline a.active {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
    }
    :root:root .atlas-utilbar-lang a.on *,
    :root:root .atlas-lang-switch a.active *,
    :root:root .atlas-chip.active *,
    :root:root .atlas-arc-switch button.active *,
    :root:root .atlas-cite-tab.active *,
    :root:root .atlas-cite-more-item.active *,
    :root:root .atlas-cmd-row.active *,
    :root:root .atlas-outline a.active * {
        color: HighlightText;
        border-color: HighlightText;
        background: transparent;
    }
    .atlas-mobile-toggle span,
    .atlas-hero-dots .atlas-dot {
        forced-color-adjust: none;
        background: ButtonText;
    }
    .atlas-hero-dots .atlas-dot.active,
    .atlas-progress span {
        forced-color-adjust: none;
        background: Highlight;
    }
    /* The current issue in the timeline was marked by a tinted fill. */
    .atlas-tl-card.current { border-width: 3px; }
    /* forced-color-adjust: none above also keeps these controls' focus ring
       in the theme's own colours: Atlas dark mode under a light contrast
       theme drew a near-white ring on a near-white page. The ring takes the
       system text colour instead; the page-colour halo is dropped. */
    :root:root .atlas-utilbar-lang a.on:focus-visible,
    :root:root .atlas-lang-switch a.active:focus-visible,
    :root:root .atlas-chip.active:focus-visible,
    :root:root .atlas-arc-switch button.active:focus-visible,
    :root:root .atlas-cite-tab.active:focus-visible,
    :root:root .atlas-cite-more-item.active:focus-visible,
    :root:root .atlas-cmd-row.active:focus-visible,
    :root:root .atlas-outline a.active:focus-visible,
    :root:root .atlas-hero-dots .atlas-dot:focus-visible {
        outline-color: CanvasText;
        box-shadow: none;
    }
}