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

/* ───────────── Tokens ───────────── */
: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: #76705f;
    --atlas-line: #e8e2d2;
    --atlas-line-2: #d6cebc;
    --atlas-accent-fg: #ffffff;
    /* 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;
    /* "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: #7a6f59;
    --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;
    scroll-behavior: smooth;
}
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; }
}
.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-accent-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-accent-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;
}
.atlas-utilbar-user .atlas-user-trigger > svg:last-child {
    opacity: .5;
    transition: transform .15s;
}
.atlas-utilbar-user[aria-expanded="true"] .atlas-user-trigger > svg:last-child {
    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; }
.atlas-hdr-actions { flex: 0 0 auto; }
.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:focus-within > 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;
}
.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;
}
.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-accent-fg);
    border-color: var(--atlas-primary);
}
.atlas-btn-accent:hover {
    background: var(--atlas-primary);
    filter: brightness(1.08);
    color: var(--atlas-accent-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);
}

/* 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 */
    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-hdr-row { grid-template-columns: auto 1fr auto; }
    .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;
    }
    /* While the menu is open (html.atlas-menulock, set by JS) the page
       behind stays put — only the menu panel scrolls. */
    html.atlas-menulock,
    html.atlas-menulock body {
        overflow: hidden;
    }
    /* 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;
    }
}

/* ───────────── 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; }

.atlas-masthead-logo {
    max-height: 54px;
    max-width: 200px;
    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); }
.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; }
}

/* ───────────── 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); }
.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); }
.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);
    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; }
}

/* 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); 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); }

/* ── 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);
    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);
}

/* ── 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);
}
.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); }
.atlas-contact-row:hover svg { color: var(--atlas-accent); }
@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);
    border-color: var(--atlas-accent);
    background: var(--atlas-accent-soft);
    transform: translateY(-1px);
    outline: none;
}
.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);
    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); color: var(--atlas-accent); }
.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); }

/* ───────────── 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); color: var(--atlas-accent); }
.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;
}
.atlas-hero-title em {
    font-style: italic;
    color: var(--atlas-accent);
    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);
    background-size: 100% 1px;
    outline: none;
}
.atlas-hero-art-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none;
    color: transparent;
    border-radius: inherit;
    cursor: pointer;
}
.atlas-hero-art-link:focus-visible {
    outline: 2px solid var(--atlas-accent);
    outline-offset: -4px;
}

/* ── 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;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%);
}
.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, .72);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.atlas-hero-art-more {
    font-family: var(--atlas-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    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,.85);
    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); }

.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);
}
.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); }
.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; }

/* ───────────── Current Issue ───────────── */
.atlas-cur-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 920px) {
    .atlas-cur-grid { grid-template-columns: 1fr; gap: 40px; }
}

.atlas-cover-stack {
    position: relative;
    aspect-ratio: 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); }
.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: cover;
}
.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);
}
.atlas-cover .atlas-cover-glyph {
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(120px, 18vw, 200px);
    line-height: .9;
    letter-spacing: -.05em;
    color: rgba(255,255,255,.95);
    align-self: flex-end;
}
/* "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;
}
.atlas-cover .atlas-cover-bot h3 {
    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;
}

.atlas-cur-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.atlas-cur-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
}
.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 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, 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 {
    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 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;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.32);
    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-wrap: balance;
    transition: color .15s, filter .15s;
}
.atlas-art-title a { color: inherit; }
.atlas-art-card:hover .atlas-art-title { color: var(--atlas-accent); 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;
}
.atlas-art-doi-num {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.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);
    color: var(--atlas-accent);
    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);
    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); }

.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);
    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);
    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 {
    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);
    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);
}
: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);
    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 {
    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 { color: inherit; }
.atlas-ann h4 a:hover { color: var(--atlas-accent); }
.atlas-ann p {
    margin: 0;
    color: var(--atlas-ink-3);
    font-size: 14.5px;
    line-height: 1.55;
}
.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);
}
.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);
    color: #fff;
    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);
    color: var(--atlas-accent);
}
.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 {
    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); }
.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);
    color: var(--atlas-accent);
    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); }
@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; }
}
.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); font-weight: 600; }
.atlas-cmd-row.active .atlas-ico {
    border-color: var(--atlas-accent);
    color: var(--atlas-accent);
    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: #fff;
    display: grid;
    place-items: center;
}

/* ───────────── selection / focus ───────────── */
.atlas ::selection { background: var(--atlas-accent); color: var(--atlas-accent-fg); }
.atlas :focus-visible {
    outline: 2px solid var(--atlas-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ───────────── 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-accent-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-accent-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);
    right: 0;
    min-width: 220px;
    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;
    transition: all .18s ease;
    z-index: 50;
}
.atlas-user[aria-expanded="true"] .atlas-user-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* 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);
}
.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);
    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;
    margin-top: 1px;
    font-size: 13px;
    color: var(--atlas-accent);
    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);
    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: center;
    vertical-align: middle;
    margin-inline-start: 7px;
    color: var(--atlas-ink-2);
    transition: transform .15s, color .15s;
}
.atlas-auth-idlink:hover { transform: translateY(-1px); }
.atlas-idsvg { display: block; height: 14px; width: auto; }
.atlas-idsvg-orcid { width: 14px; height: 14px; }
.atlas-idlink-ror:hover { color: var(--atlas-accent); }

/* 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 right edge to the CONTENT edge (same right line as
           the nameplate ISSN and the body sidebar). The containing block is
           the .atlas-wrap padding box, so right: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 right line. */
        right: 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: 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: cover;
}
.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);
    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; }
.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);
    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);
}

/* 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);
    color: var(--atlas-accent);
    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);
    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;
}
.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-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 {
    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. */
.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); }
/* 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);
    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); }
.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);
    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);
    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);
    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);
    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;
    scroll-behavior: smooth;
    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); 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);
    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);
    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);
    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); }
.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: 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: cover;
}
.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);
    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);
    color: var(--atlas-accent);
    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);
    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); }
.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) */
.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-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;
}
@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: 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: cover;
}
.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;
}
.atlas-arc-cv-glyph {
    font-family: var(--atlas-font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: 120px;
    line-height: .85;
    letter-spacing: -.04em;
    color: rgba(255,255,255,.95);
    align-self: center;
    margin-top: -20px;
    text-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.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);
    font-weight: 600;
}
.atlas-arc-cv-meta .atlas-arc-cv-live::before {
    content: "●";
    margin-inline-end: 5px;
    color: var(--atlas-accent);
}
.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); }
.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 {
    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); }
.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);
    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); }
@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);
}
.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); }
.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);
    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;
}
/* 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: 3/4;
    background: var(--atlas-primary-grad);
    position: relative;
    overflow: hidden;
}
.atlas-issue-cover-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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); }

/* ============================================================
   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);
}
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; }

/* 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);
    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);
    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-accent-fg); }
body.atlas-body a.atlas-galley-link { color: var(--atlas-accent); }
body.atlas-body a.atlas-galley-link:hover { color: var(--atlas-accent-fg); }

/* CTA accent action keeps white text on hover too */
body.atlas-body .atlas-cta a.atlas-btn-accent,
body.atlas-body .atlas-cta button.atlas-btn-accent { color: #fff; }

/* 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: 0;
    border-color: var(--atlas-accent);
    box-shadow: 0 0 0 3px var(--atlas-accent-soft);
}
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); 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);
}
/* 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; }