/* ==========================================================================
   Public website
   ========================================================================== */
body.site { background: var(--surface); }

/* ---------- top bar + navbar ---------- */
.topbar { background: var(--ink); color: #c7d2e3; font-size: .8rem; }
.topbar a { color: #c7d2e3; }
.topbar a:hover { color: #fff; }
.topbar .container { min-height: 38px; }

.site-nav { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--border); transition: box-shadow .25s ease; }
.site-nav.scrolled { box-shadow: var(--shadow); }
.site-nav .navbar { padding: .85rem 0; }
.site-nav .nav-link { color: var(--ink-2); font-weight: 500; font-size: .93rem; padding: .5rem .9rem !important; border-radius: 999px; }
.site-nav .nav-link:hover { color: var(--primary); background: var(--primary-50); }
.site-nav .nav-link.active { color: var(--primary); font-weight: 600; }
.site-nav .navbar-toggler { border: 0; box-shadow: none; font-size: 1.6rem; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: radial-gradient(1200px 500px at 85% -10%, rgba(20, 163, 154, .35), transparent 60%), linear-gradient(135deg, var(--ink) 0%, #12345a 55%, var(--primary) 100%); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 30%, transparent); }
.hero .carousel-item { padding: 5.5rem 0 2rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: #9fe3dc; margin-bottom: 1rem; }
.hero-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); }
.hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 700; margin-bottom: 1.25rem; }
.hero p.lead { color: #c9d6e8; font-size: 1.1rem; max-width: 560px; margin-bottom: 2rem; }
.hero .btn-outline-light { border-color: rgba(255,255,255,.45); }
.hero-panel { display: grid; gap: 1rem; }
.hero-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 1rem; backdrop-filter: blur(6px); transition: transform .25s ease, background .25s ease; }
.hero-chip:hover { transform: translateX(-4px); background: rgba(255,255,255,.12); }
.hero-chip .icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(20,163,154,.25); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #9fe3dc; flex-shrink: 0; }
.hero-chip small { display: block; color: #9fb2cc; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-chip strong { color: #fff; font-weight: 600; }
.hero-note { font-size: .85rem; color: #9fb2cc; margin-top: .25rem; }
.hero .carousel-indicators { position: static; margin: 0; padding: 0; justify-content: flex-start; gap: 6px; }
.hero .carousel-indicators [data-bs-target] { margin: 0; }
.hero .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 4px; border: 0; }
.hero-controls { position: relative; z-index: 3; padding-bottom: 4.5rem; }
.hero-controls .btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.hero-controls .btn:hover { background: rgba(255,255,255,.12); }

/* ---------- quick links strip ---------- */
.quick-links { margin-top: -3.25rem; position: relative; z-index: 5; }
.quick-links .grid { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.quick-link { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.5rem; color: var(--ink); border-right: 1px solid var(--border); transition: background .2s ease; }
.quick-link:last-child { border-right: 0; }
.quick-link:hover { background: var(--primary-50); color: var(--primary); }
.quick-link .num { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; color: var(--accent); }
.quick-link strong { font-weight: 600; font-size: .95rem; }
.quick-link i { margin-left: auto; opacity: .4; transition: transform .2s ease; }
.quick-link:hover i { transform: translateX(4px); opacity: 1; }

/* ---------- sections ---------- */
.section { padding: 5rem 0; }
.section-alt { background: var(--bg); }
.section-eyebrow { font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--accent); margin-bottom: .6rem; }
.section-title { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 700; margin-bottom: 1rem; }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; }

.feature-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--border); }
.feature-item:last-child { border-bottom: 0; }
.feature-item .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-50); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.feature-item h6 { margin-bottom: .2rem; font-weight: 600; }
.feature-item p { margin: 0; color: var(--muted); font-size: .92rem; }

.stat-band { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.stat-band .num { font-family: var(--font-head); font-size: 2.2rem; font-weight: 700; color: var(--primary); line-height: 1; }
.stat-band .lbl { color: var(--muted); font-size: .85rem; margin-top: .35rem; }

/* ---------- category chips ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-size: .87rem; font-weight: 500; transition: all .2s ease; }
.chip:hover, .chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip .count { font-size: .72rem; background: rgba(0,0,0,.06); border-radius: 999px; padding: 0 .45rem; }
.chip.active .count, .chip:hover .count { background: rgba(255,255,255,.2); }

/* ---------- journal cards ---------- */
.journal-card { height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; }
.journal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.journal-card .cover { width: 54px; height: 70px; border-radius: 6px 10px 10px 6px; background: linear-gradient(160deg, var(--primary), var(--ink)); color: #fff; display: flex; align-items: flex-end; padding: 6px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; box-shadow: inset 4px 0 0 rgba(255,255,255,.18); margin-bottom: 1rem; }
.journal-card .cover.c1 { background: linear-gradient(160deg, #14a39a, #0b5c7a); }
.journal-card .cover.c2 { background: linear-gradient(160deg, #e3a336, #a8590c); }
.journal-card .cover.c3 { background: linear-gradient(160deg, #6b5bd2, #2e2266); }
.journal-card .cover.c4 { background: linear-gradient(160deg, #d0546a, #7a1f33); }
.journal-card .cat { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.journal-card h5 { font-family: var(--font-head); font-size: 1.15rem; margin: .35rem 0 .6rem; line-height: 1.3; }
.journal-card h5 a { color: var(--ink); }
.journal-card h5 a::after { content: ""; position: absolute; inset: 0; }
.journal-card p { color: var(--muted); font-size: .9rem; flex-grow: 1; }
.journal-card .meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .5rem; }

/* ---------- article list ---------- */
.article-item { padding: 1.4rem 0; border-bottom: 1px solid var(--border); }
.article-item:first-child { padding-top: 0; }
.article-item .type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); background: var(--primary-50); padding: .2rem .55rem; border-radius: 6px; }
.article-item h5 { font-family: var(--font-head); font-size: 1.15rem; margin: .6rem 0 .35rem; line-height: 1.35; }
.article-item h5 a { color: var(--ink); }
.article-item h5 a:hover { color: var(--primary); }
.article-item .authors { color: var(--ink-2); font-size: .9rem; }
.article-item .meta { color: var(--muted); font-size: .82rem; margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* ---------- page header ---------- */
.page-hero { background: linear-gradient(135deg, var(--ink), var(--primary)); color: #fff; padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(20,163,154,.25); filter: blur(10px); }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .5rem; }
.page-hero p { color: #c9d6e8; margin: 0; max-width: 680px; }
.page-hero .breadcrumb { --bs-breadcrumb-divider-color: #9fb2cc; --bs-breadcrumb-item-active-color: #fff; font-size: .82rem; margin-bottom: .9rem; }
.page-hero .breadcrumb a { color: #9fe3dc; }

/* ---------- sidebar widgets ---------- */
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.25rem; }
.side-card h6 { font-weight: 700; margin-bottom: 1rem; }
/* article page: keywords box, one bordered tile per keyword */
.kw-box { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
.kw-title { display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .85rem; }
.kw-title .bi { color: var(--accent); font-size: 1rem; }
.kw-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kw { display: inline-flex; align-items: center; gap: .2rem; padding: .4rem .8rem; border-radius: 8px; background: var(--primary-50); border: 1px solid rgba(11, 92, 122, .14); color: var(--primary); font-size: .86rem; font-weight: 500; line-height: 1.3; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.kw .bi { font-size: .8rem; opacity: .6; }
.kw:hover, .kw:focus-visible { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); }
.kw:hover .bi { opacity: 1; }
/* article page: related articles ranked by shared keywords */
.rel-list { list-style: none; margin: 0; padding: 0; }
.rel-list li { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.rel-list li:first-child { padding-top: 0; }
.rel-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rel-title { display: block; color: var(--ink); font-weight: 600; font-size: .92rem; line-height: 1.4; }
.rel-title:hover { color: var(--primary); }
.rel-meta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.rel-kw { display: inline-flex; align-items: center; gap: .1rem; padding: .1rem .45rem; border-radius: 6px; background: var(--primary-50); color: var(--primary); font-size: .72rem; font-weight: 500; }
.rel-kw .bi { opacity: .6; }
.rel-src { font-size: .78rem; color: var(--muted); }
.side-links a { display: flex; align-items: center; justify-content: space-between; padding: .55rem .25rem; color: var(--ink-2); border-bottom: 1px solid var(--border); font-size: .92rem; }
.side-links a:last-child { border-bottom: 0; }
.side-links a:hover, .side-links a.active { color: var(--primary); }
.info-list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.info-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.info-list li:last-child { border-bottom: 0; }
.info-list span { color: var(--muted); }

/* ---------- CTA ---------- */
.cta-band { background: linear-gradient(120deg, var(--primary), var(--accent)); border-radius: calc(var(--radius) + 6px); color: #fff; padding: 3rem; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }
.cta-band::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border: 40px solid rgba(255,255,255,.1); border-radius: 50%; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #9fb2cc; padding: 4rem 0 0; font-size: .92rem; }
.site-footer h6 { color: #fff; font-weight: 600; margin-bottom: 1.1rem; }
.site-footer a { color: #c7d2e3; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .brand-text small { color: #9fb2cc; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 3rem; padding: 1.25rem 0; font-size: .82rem; }

.back-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: all .25s ease; z-index: 1030; }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { color: #fff; background: var(--primary-600); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Motion layer: hero slideshow + journals section
   ========================================================================== */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- hero: ambient background ---------- */
.hero .carousel { position: relative; z-index: 1; }
.hero .hero-title { color: #fff; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 700; margin-bottom: 1.25rem; }
.hero::before { animation: gridPan 24s linear infinite; }
@keyframes gridPan { to { background-position: 48px 48px, 48px 48px; } }
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-fx .orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.hero-fx .o1 { width: 420px; height: 420px; background: rgba(20, 163, 154, .55); top: -120px; right: 8%; animation: orbA 18s ease-in-out infinite alternate; }
.hero-fx .o2 { width: 340px; height: 340px; background: rgba(227, 163, 54, .28); bottom: -140px; left: 12%; animation: orbB 22s ease-in-out infinite alternate; }
.hero-fx .o3 { width: 260px; height: 260px; background: rgba(107, 91, 210, .35); top: 30%; left: 45%; animation: orbC 16s ease-in-out infinite alternate; }
@keyframes orbA { to { transform: translate(-140px, 90px) scale(1.15); } }
@keyframes orbB { to { transform: translate(160px, -70px) scale(.9); } }
@keyframes orbC { to { transform: translate(-90px, -60px) scale(1.25); } }

/* ---------- hero: per-slide entrance (classes set by site.js) ---------- */
.js-anim .carousel-item:not(.is-in) .ha,
.js-anim .carousel-item:not(.is-in) .hero-chip,
.js-anim .carousel-item:not(.is-in) .hero-title .w > span { opacity: 0; }
.js-anim .carousel-item.is-in .ha { animation: heroUp .9s var(--ease-out) backwards; animation-delay: calc(var(--enter, 0ms) + var(--d, 0) * 90ms); }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.hero-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .w > span { display: inline-block; }
.js-anim .carousel-item.is-in .hero-title .w > span { animation: wordUp .9s var(--ease-out) backwards; animation-delay: calc(var(--enter, 0ms) + 90ms + var(--wi) * 55ms); }
@keyframes wordUp { from { opacity: 0; transform: translateY(105%) rotate(4deg); } }
.js-anim .carousel-item.is-in .hero-chip { animation: chipIn .9s var(--ease-out) backwards; animation-delay: calc(var(--enter, 0ms) + var(--d, 0) * 90ms); }
@keyframes chipIn { from { opacity: 0; transform: translateX(60px) scale(.96); filter: blur(4px); } }
.hero-chip .icon i { display: inline-block; animation: iconBob 3.2s ease-in-out infinite alternate; }
.hero-chip:nth-child(2) .icon i { animation-delay: -1.1s; }
.hero-chip:nth-child(3) .icon i { animation-delay: -2.2s; }
@keyframes iconBob { to { transform: translateY(-4px) rotate(-6deg); } }
.hero-panel { transform: perspective(1000px) rotateX(var(--py, 0deg)) rotateY(var(--px, 0deg)); transition: transform .4s var(--ease-out); }
.hero .carousel-item-next .hero-panel, .hero .carousel-item-prev .hero-panel { transition: none; }

/* ---------- hero: autoplay progress on indicators ---------- */
.hero .carousel-indicators [data-bs-target] { position: relative; overflow: hidden; opacity: 1; background-color: rgba(255,255,255,.28); transition: width .4s var(--ease-out), background-color .3s; }
.hero .carousel-indicators [data-bs-target]:hover { background-color: rgba(255,255,255,.5); }
.hero .carousel-indicators .active { width: 52px; }
.hero .carousel-indicators [data-bs-target]::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hero .progress-on .carousel-indicators .active::after { animation: barFill var(--interval, 7s) linear forwards; }
.hero .progress-on.paused .carousel-indicators .active::after { animation-play-state: paused; }
@keyframes barFill { to { transform: scaleX(1); } }

/* ---------- journals: heading + chips ---------- */
.title-underline { position: relative; display: inline-block; }
.title-underline::after { content: ""; position: absolute; left: 0; bottom: -10px; height: 3px; width: 64px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--primary)); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out) .25s; }
.reveal.in .title-underline::after { transform: scaleX(1); }
.btn-arrow i { display: inline-block; transition: transform .25s var(--ease-out); }
.btn-arrow:hover i { transform: translateX(5px); }
.chip-row.reveal { opacity: 1; transform: none; }
.chip-row .chip { opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .45s ease, transform .6s var(--ease-back), background .2s, border-color .2s, color .2s, box-shadow .2s; transition-delay: calc(var(--i, 0) * 60ms); }
.chip-row.in .chip { opacity: 1; transform: none; }
.chip-row.in .chip:hover { transition-delay: 0s; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 92, 122, .25); }

/* ---------- journals: card wave entrance ---------- */
.reveal-card { transform: translateY(44px) scale(.96); transition: opacity .7s ease, transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- journals: 3D tilt, spotlight, rotating border ---------- */
.journal-card { isolation: isolate; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transition: transform .45s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.journal-card:hover { --lift: -6px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); box-shadow: 0 22px 44px rgba(15, 30, 54, .14); }
.journal-card.tilting { transition: transform .1s linear, box-shadow .3s ease, border-color .3s ease; }
.journal-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 163, 154, .13), transparent 45%); opacity: 0; transition: opacity .3s ease; }
.journal-card:hover::before { opacity: 1; }
.journal-card::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), var(--accent), var(--primary), #6b5bd2, var(--gold), var(--accent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s ease; }
.journal-card:hover::after { opacity: 1; animation: spinBorder 4s linear infinite; }
@keyframes spinBorder { to { --ang: 360deg; } }
.journal-card h5 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .4s var(--ease-out), color .2s; }
.journal-card:hover h5 a { color: var(--primary); background-size: 100% 1.5px; }

/* ---------- journals: book cover opens + shine ---------- */
.journal-card .cover { position: relative; overflow: hidden; transform-origin: left center; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.journal-card .cover span { position: relative; z-index: 1; }
.journal-card .cover::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.journal-card:hover .cover { transform: perspective(500px) rotateY(-24deg) translateZ(6px); box-shadow: inset 4px 0 0 rgba(255,255,255,.18), 3px 2px 0 #fff, 4px 3px 0 var(--border), 6px 4px 0 #fff, 7px 5px 0 var(--border), 12px 10px 18px rgba(15,30,54,.25); }
.journal-card:hover .cover::after { transform: translateX(120%); transition: transform .9s ease .1s; }
.journal-card .meta i { transition: color .2s, transform .3s var(--ease-back); display: inline-block; }
.journal-card:hover .meta i { color: var(--accent); transform: scale(1.15); }

/* ---------- live dot ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: .55rem; vertical-align: middle; position: relative; top: -1px; box-shadow: 0 0 0 0 rgba(20, 163, 154, .6); animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 8px rgba(20, 163, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 163, 154, 0); } }

/* ---------- latest research (home): dark magazine section ---------- */
.lr-section { position: relative; overflow: hidden; color: #c9d6e8; background: linear-gradient(160deg, var(--ink) 0%, #12345a 60%, #0d4a63 100%); }
.lr-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 80%); }
.lr-bg::before, .lr-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); }
.lr-bg::before { width: 420px; height: 420px; left: -140px; top: -120px; background: rgba(20, 163, 154, .28); animation: orbA 22s ease-in-out infinite alternate; }
.lr-bg::after { width: 360px; height: 360px; right: -120px; bottom: -100px; background: rgba(107, 91, 210, .22); animation: orbB 20s ease-in-out infinite alternate; }

/* header: title left, intro + link right */
.lr-head { display: grid; grid-template-columns: 1fr minmax(0, 380px); align-items: end; gap: 1.5rem 3rem; padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.lr-eyebrow { display: inline-flex; align-items: center; padding: .35rem .9rem; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #9fe3dc; background: rgba(20, 163, 154, .14); border: 1px solid rgba(159, 227, 220, .28); margin-bottom: 1rem; }
.lr-eyebrow .live-dot { top: 0; margin-right: .5rem; }
.lr-title { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 700; line-height: 1.05; margin: 0; }
.lr-title em { font-style: italic; background: linear-gradient(90deg, #9fe3dc, #f3c97a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lr-head-side p { font-size: .98rem; color: #9fb2cc; margin-bottom: .9rem; }
.lr-browse { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; padding-bottom: .2rem; border-bottom: 2px solid var(--accent); }
.lr-browse:hover { color: #9fe3dc; }
.lr-browse i { transition: transform .3s var(--ease-out); }
.lr-browse:hover i { transform: translateX(5px); }

/* featured article */
.lr-feature { position: relative; height: 100%; display: flex; flex-direction: column; padding: 2.1rem 2.1rem 1.8rem; border-radius: calc(var(--radius) + 6px); background: var(--surface); color: var(--text); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); transition: transform .45s var(--ease-out), box-shadow .45s ease, opacity .6s ease; }
.lr-feature::before { content: ""; position: absolute; left: 2.1rem; right: 2.1rem; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--accent), var(--primary), #6b5bd2); }
.lr-feature:hover { transform: translateY(-6px); box-shadow: 0 40px 70px rgba(0, 0, 0, .38); }
.lr-feature-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.4rem; }
.lr-tag { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .25rem .7rem; border-radius: 999px; color: var(--primary); background: var(--primary-50); }
.lr-new { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; padding: .25rem .7rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--primary)); }
.lr-new .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
.lr-date { margin-left: auto; font-size: .82rem; color: var(--muted); }
.lr-feature-journal { font-size: .85rem; font-weight: 600; color: var(--accent); margin-bottom: .6rem; }
.lr-feature h3 { font-family: var(--font-head); font-size: clamp(1.45rem, 2.4vw, 1.95rem); line-height: 1.25; margin-bottom: 1rem; }
.lr-feature h3 a { color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease-out), color .2s; }
.lr-feature h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lr-feature:hover h3 a { color: var(--primary); background-size: 100% 2px; }
.lr-abstract { color: var(--muted); font-size: .95rem; line-height: 1.7; margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lr-feature-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
.lr-authors-row { display: flex; align-items: center; gap: .65rem; min-width: 0; font-size: .86rem; color: var(--ink-2); }
.lr-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-read { border-radius: 999px; padding: .55rem 1.3rem; font-weight: 600; }
.lr-read i { display: inline-block; transition: transform .3s var(--ease-out); }
.lr-feature:hover .lr-read i { transform: translateX(4px); }

/* numbered list of the next articles */
.lr-list { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; gap: .75rem; }
.lr-item { position: relative; flex: 1; display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.15rem 1.25rem; border-radius: var(--radius); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); transition: background .3s, border-color .3s, transform .4s var(--ease-out), opacity .6s ease; transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 90ms); }
.lr-item:hover { background: rgba(255, 255, 255, .11); border-color: rgba(159, 227, 220, .4); transform: translateX(6px); }
.lr-num { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(159, 227, 220, .6); transition: color .3s; flex-shrink: 0; width: 2.4rem; }
.lr-item:hover .lr-num { color: #9fe3dc; }
.lr-item-body { min-width: 0; flex: 1; }
.lr-item-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #9fb2cc; margin-bottom: .35rem; }
.lr-item-meta span:first-child { color: #9fe3dc; }
.lr-item h3 { font-family: var(--font-head); font-size: 1.02rem; line-height: 1.4; margin-bottom: .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lr-item h3 a { color: #fff; }
.lr-item h3 a::after { content: ""; position: absolute; inset: 0; }
.lr-item-journal { font-size: .8rem; color: #9fb2cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-item-journal i { margin-right: .35rem; }
.lr-item-go { font-size: 1.05rem; color: rgba(255, 255, 255, .4); transition: color .3s, transform .35s var(--ease-back); }
.lr-item:hover .lr-item-go { color: #9fe3dc; transform: translate(3px, -3px); }

/* authors band */
.lr-authors { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; padding: 1.4rem 1.6rem; border-radius: calc(var(--radius) + 6px); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.lr-authors-intro { display: flex; align-items: center; gap: .9rem; }
.lr-authors-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #9fe3dc; background: rgba(20, 163, 154, .2); }
.lr-authors h3 { color: #fff; font-size: 1.05rem; font-weight: 700; margin: 0 0 .1rem; }
.lr-authors p { margin: 0; font-size: .84rem; color: #9fb2cc; }
.lr-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.lr-links a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 500; color: #dbe5f1; border: 1px solid rgba(255, 255, 255, .16); transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-back); }
.lr-links a i { color: #9fe3dc; }
.lr-links a:hover { color: #fff; background: rgba(20, 163, 154, .25); border-color: rgba(159, 227, 220, .5); transform: translateY(-2px); }
.lr-submit { border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; color: var(--primary); white-space: nowrap; }

@media (max-width: 991.98px) {
  .lr-head { grid-template-columns: 1fr; }
  .lr-list { height: auto; }
  .lr-authors { grid-template-columns: 1fr; }
  .lr-links { justify-content: flex-start; }
  .lr-submit { justify-self: start; }
}
@media (max-width: 575.98px) {
  .lr-head { margin-bottom: 1.75rem; padding-bottom: 1.5rem; }
  .lr-feature { padding: 1.6rem 1.25rem 1.4rem; }
  .lr-feature::before { left: 1.25rem; right: 1.25rem; }
  .lr-date { margin-left: 0; width: 100%; }
  .lr-read, .lr-submit { width: 100%; }
  .lr-item { padding: 1rem; gap: .8rem; }
  .lr-num { font-size: 1.5rem; width: 1.9rem; }
  .lr-authors { padding: 1.25rem; }
}

/* ---------- article list items ---------- */
.rf-item { position: relative; margin-bottom: 1.1rem; }
.rf-item:last-child { margin-bottom: 0; }
.rf-item.reveal { transition: opacity .7s ease, transform .8s var(--ease-out), filter .7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.rf-item.reveal:not(.in) { transform: translateX(-30px); filter: blur(4px); }

/* ---------- article cards ---------- */
.rf-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem 1.1rem; transition: transform .45s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
.rf-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--primary)); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease-out); }
.rf-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(20, 163, 154, .07) 50%, transparent 70%); transform: translateX(-100%); }
.rf-item:hover .rf-card { transform: translateX(6px); box-shadow: 0 16px 36px rgba(15, 30, 54, .1); border-color: transparent; }
.rf-item:hover .rf-card::before { transform: scaleY(1); transform-origin: top; }
.rf-item:hover .rf-card::after { transform: translateX(100%); transition: transform 1s ease; }
.rf-top { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.rf-num { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--primary); opacity: .35; transition: opacity .35s ease, transform .35s var(--ease-back); }
.rf-item:hover .rf-num { opacity: 1; }
.rf-item:hover .rf-num { transform: scale(1.12); }
.rf-type { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .6rem; border-radius: 999px; }
.tone-teal { color: #0d7f78; background: var(--accent-50); }
.tone-violet { color: #5546b8; background: #efedfb; }
.tone-rose { color: #b23a52; background: #fbecef; }
.tone-gold { color: #9a5d08; background: #fcf3e3; }
.tone-blue { color: var(--primary); background: var(--primary-50); }
.tone-slate { color: #475569; background: #eef2f6; }
.rf-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: linear-gradient(90deg, var(--accent), var(--primary)); padding: .22rem .65rem; border-radius: 999px; }
.rf-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.rf-date { margin-left: auto; font-size: .8rem; color: var(--muted); }
.rf-card h5 { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.35; margin: 0 0 .45rem; }
.rf-card h5 a { color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .45s var(--ease-out), color .2s; }
.rf-item:hover .rf-card h5 a { color: var(--primary); background-size: 100% 2px; }
.rf-card h5 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rf-abstract { color: var(--muted); font-size: .9rem; margin-bottom: .8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; border-top: 1px dashed var(--border); padding-top: .75rem; font-size: .82rem; }
.rf-authors { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); min-width: 0; }
.rf-avatars { display: inline-flex; }
.rf-avatars .av { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 700; letter-spacing: -.02em; color: #fff; border: 2px solid var(--surface); margin-left: -4px; transition: margin .35s var(--ease-out), transform .35s var(--ease-back); }
.rf-avatars .av:first-child { margin-left: 0; }
.rf-avatars .av0 { background: linear-gradient(135deg, #14a39a, #0b5c7a); }
.rf-avatars .av1 { background: linear-gradient(135deg, #6b5bd2, #2e2266); }
.rf-avatars .av2 { background: linear-gradient(135deg, #e3a336, #a8590c); }
.rf-avatars .av-more { background: #94a3b8; }
.rf-item:hover .rf-avatars .av { margin-left: 2px; }
.rf-item:hover .rf-avatars .av:first-child { margin-left: 0; }
.rf-item:hover .rf-avatars .av:nth-child(2) { transform: translateY(-3px); transition-delay: .05s; }
.rf-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; color: var(--muted); }
.rf-read { margin-left: auto; font-weight: 600; color: var(--primary); opacity: 0; transform: translateX(-10px); transition: opacity .3s ease, transform .35s var(--ease-out); }
.rf-read i { display: inline-block; transition: transform .3s var(--ease-out); }
.rf-item:hover .rf-read { opacity: 1; transform: none; }
.rf-item:hover .rf-read i { transform: translateX(4px); }
@media (hover: none) { .rf-read { opacity: 1; transform: none; } }

/* ---------- author + submit cards ---------- */
.author-card h6 { display: flex; align-items: center; gap: .6rem; }
.ac-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-50); color: var(--primary); transition: transform .4s var(--ease-back); }
.author-card:hover .ac-icon { transform: rotate(-12deg) scale(1.08); }
.author-card .side-links a { position: relative; transition: color .2s, padding .3s var(--ease-out), background .3s; border-radius: 8px; }
.author-card .side-links a span i { color: var(--muted); transition: color .2s; }
.author-card .side-links a > i { transition: transform .3s var(--ease-out); }
.author-card .side-links a:hover { padding-left: .75rem; background: var(--primary-50); }
.author-card .side-links a:hover span i { color: var(--accent); }
.author-card .side-links a:hover > i { transform: translateX(4px); }
.submit-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.6rem 1.5rem; color: #fff; background: linear-gradient(130deg, var(--ink), var(--primary), var(--accent), var(--primary)); background-size: 300% 300%; animation: gradShift 12s ease infinite; }
.submit-card::before, .submit-card::after { content: ""; position: absolute; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .07); }
.submit-card::before { width: 180px; height: 180px; right: -60px; bottom: -70px; animation: spinSlow 18s linear infinite; }
.submit-card::after { width: 90px; height: 90px; right: 40px; top: -40px; border-width: 14px; }
@keyframes gradShift { 50% { background-position: 100% 50%; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.submit-card h6 { color: #fff; font-weight: 700; font-size: 1.1rem; position: relative; }
.submit-card p { color: rgba(255, 255, 255, .82); font-size: .88rem; position: relative; }
.sc-plane { position: absolute; right: 18px; top: 16px; font-size: 1.6rem; color: rgba(255, 255, 255, .85); animation: planeFly 4.5s ease-in-out infinite; }
@keyframes planeFly { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(6px, -8px) rotate(8deg); } }
.btn-shine { position: relative; overflow: hidden; font-weight: 600; color: var(--primary); }
.btn-shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(20, 163, 154, .25), transparent); animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 60%, 100% { left: 130%; } }
.btn-shine i { display: inline-block; transition: transform .3s var(--ease-out); }
.btn-shine:hover i { transform: translateX(5px); }
@media (max-width: 575.98px) { .rf-date { margin-left: 0; width: 100%; } }

/* ==========================================================================
   Articles page
   ========================================================================== */
/* ---------- header ---------- */
.art-hero { padding: 3.5rem 0 4.5rem; }
.art-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, #000 20%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); animation: gridPan 24s linear infinite; }
.art-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }
.ah-in { animation: heroUp .9s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 110ms); }
.grad-text { background: linear-gradient(90deg, #9fe3dc, #fff, #f3c97a, #9fe3dc); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradSlide 6s linear infinite; }
@keyframes gradSlide { to { background-position: 300% 0; } }
.hero-search { position: relative; display: flex; align-items: center; gap: .5rem; margin-top: 1.75rem; max-width: 600px; padding: .4rem .4rem .4rem 1.1rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px); transition: background .3s, border-color .3s, box-shadow .4s; }
.hero-search:focus-within { background: rgba(255,255,255,.16); border-color: rgba(159,227,220,.7); box-shadow: 0 0 0 6px rgba(20,163,154,.18), 0 18px 40px rgba(0,0,0,.25); }
.hero-search > i { color: #9fe3dc; font-size: 1.1rem; transition: transform .4s var(--ease-back); }
.hero-search:focus-within > i { transform: scale(1.2) rotate(-10deg); }
.hero-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 1rem; padding: .55rem .25rem; }
.hero-search input::placeholder { color: rgba(255,255,255,.6); }
.hero-search .btn { border-radius: 999px; padding: .6rem 1.4rem; font-weight: 600; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.hero-stats > div { text-align: center; padding: 1.1rem .5rem; border-radius: var(--radius); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); transition: transform .35s var(--ease-out), background .3s; }
.hero-stats > div:hover { transform: translateY(-4px); background: rgba(255,255,255,.13); }
.hero-stats strong { display: block; font-family: var(--font-head); font-size: 2rem; line-height: 1; color: #fff; }
.hero-stats span { display: block; margin-top: .35rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: #9fe3dc; }

/* ---------- type pills ---------- */
.type-pills { display: flex; gap: .5rem; overflow-x: auto; padding: .4rem .4rem 1.4rem; margin: 0 -.4rem -.6rem; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
.type-pills::-webkit-scrollbar { display: none; }
.tp { flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-2); font-size: .87rem; font-weight: 500; animation: pillIn .6s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 60ms + 200ms); transition: background .25s, color .25s, border-color .25s, transform .3s var(--ease-back), box-shadow .3s; }
.tp span { font-size: .72rem; font-weight: 700; min-width: 22px; text-align: center; padding: .05rem .4rem; border-radius: 999px; background: var(--bg); transition: background .25s; }
.tp:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.tp.active { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--primary), var(--accent)); box-shadow: 0 6px 14px rgba(11,92,122,.25); }
.tp.active span { background: rgba(255,255,255,.22); }
@keyframes pillIn { from { opacity: 0; transform: translateY(12px) scale(.85); } }

/* ---------- filter sidebar ---------- */
@media (min-width: 992px) { .filter-aside { position: sticky; top: 96px; } }
.filter-card h6 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.filter-card:hover .ac-icon { transform: rotate(-12deg) scale(1.08); }
.filter-card .form-select { border-radius: 10px; transition: border-color .2s, box-shadow .3s; }
.filter-card .form-select:focus, .filter-card .cs-btn:focus-visible, .filter-card .cs.is-open .cs-btn { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(20,163,154,.15); }
.sort-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.sort-seg label { position: relative; z-index: 1; text-align: center; padding: .45rem 0; font-size: .85rem; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .3s; margin: 0; }
.sort-seg label.on { color: var(--primary); font-weight: 600; }
.sort-seg input { position: absolute; opacity: 0; pointer-events: none; }
.sort-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 9px; background: var(--surface); box-shadow: 0 2px 8px rgba(15,30,54,.1); transform: translateX(calc(var(--pos, 0) * 100%)); transition: transform .45s var(--ease-back); }
.btn-shine-dark { position: relative; overflow: hidden; }
.btn-shine-dark::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent); animation: shine 4s ease-in-out infinite; }
.tip-card { display: flex; gap: .9rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-50), var(--primary-50)); border: 1px solid rgba(20,163,154,.18); }
.tip-card > i { font-size: 1.4rem; color: var(--gold); animation: bulbGlow 2.6s ease-in-out infinite; }
.tip-card strong { font-size: .9rem; color: var(--ink); }
.tip-card p { margin: .15rem 0 0; font-size: .84rem; color: var(--muted); }
@keyframes bulbGlow { 50% { text-shadow: 0 0 14px rgba(227,163,54,.8); transform: scale(1.08); } }

/* ---------- results bar + active filters ---------- */
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.view-toggle { position: relative; display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.view-toggle button { position: relative; z-index: 1; width: 38px; height: 32px; border: 0; background: transparent; color: var(--muted); border-radius: 8px; transition: color .3s; }
.view-toggle button.on { color: var(--primary); }
.vt-thumb { position: absolute; top: 3px; left: 3px; width: 38px; height: 32px; border-radius: 8px; background: var(--surface); box-shadow: 0 2px 8px rgba(15,30,54,.1); transition: transform .4s var(--ease-back); }
.view-toggle.is-grid .vt-thumb { transform: translateX(38px); }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; }
.af-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .5rem .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--primary); background: var(--primary-50); border: 1px solid rgba(11,92,122,.15); animation: pillIn .5s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 70ms); transition: background .25s, color .25s, border-color .25s; }
.af-tag i { font-size: .65rem; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(11,92,122,.12); transition: transform .3s var(--ease-back), background .25s; }
.af-tag:hover { color: #b23a52; background: #fbecef; border-color: rgba(178,58,82,.25); }
.af-tag:hover i { transform: rotate(90deg); background: rgba(178,58,82,.15); }
.af-clear { font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.af-clear:hover { color: var(--primary); }

/* ---------- result cards (reuse .rf-* from the home timeline) ---------- */
.articles-list { display: grid; gap: 1rem; }
.articles-list.grid { grid-template-columns: repeat(2, 1fr); }
.articles-list.grid .rf-abstract { -webkit-line-clamp: 3; }
.articles-list.grid .rf-meta span + span { display: none; }
.articles-list.grid .rf-read { display: none; }
.articles-list.relayout .ac-item { animation: cardSwap .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cardSwap { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ac-item.reveal { transition: opacity .7s ease, transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.ac-item.reveal:not(.in) { transform: translateY(30px); }
.ac-card { height: 100%; display: flex; flex-direction: column; }
.ac-card .rf-abstract { flex-grow: 1; }
.ac-item:hover .rf-card { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,30,54,.11); border-color: transparent; }
.ac-item:hover .rf-card::before { transform: scaleY(1); transform-origin: top; }
.ac-item:hover .rf-card::after { transform: translateX(100%); transition: transform 1s ease; }
.ac-item:hover .rf-num { opacity: 1; transform: scale(1.12); }
.ac-item:hover .rf-card h5 a { color: var(--primary); background-size: 100% 2px; }
.ac-item:hover .rf-avatars .av { margin-left: 2px; }
.ac-item:hover .rf-avatars .av:first-child { margin-left: 0; }
.ac-item:hover .rf-read { opacity: 1; transform: none; }
.ac-item:hover .rf-read i { transform: translateX(4px); }
.ac-keys { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.ac-keys a { font-size: .76rem; padding: .18rem .6rem; border-radius: 6px; color: var(--ink-2); background: var(--bg); border: 1px solid var(--border); transition: color .2s, background .2s, border-color .2s, transform .3s var(--ease-back); }
.ac-keys a:hover { color: #fff; background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.articles-page mark { padding: 0; border-radius: 2px; color: inherit; background: linear-gradient(transparent 55%, rgba(227,163,54,.45) 55%); }

/* ---------- loading state while filters navigate ---------- */
.articles-list.is-loading .ac-item { pointer-events: none; }
.articles-list.is-loading .rf-card { opacity: .55; }
.articles-list.is-loading .rf-card::after { transform: none; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%); animation: skeleton 1s linear infinite; }
@keyframes skeleton { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- pagination ---------- */
.pager .pagination { gap: .35rem; }
.pager .page-link { border-radius: 10px !important; border-color: var(--border); color: var(--ink-2); min-width: 38px; text-align: center; transition: transform .3s var(--ease-back), background .2s, color .2s, box-shadow .3s; }
.pager .page-link:hover { transform: translateY(-2px); color: var(--primary); background: var(--primary-50); }
.pager .active .page-link { border-color: transparent; color: #fff; background: linear-gradient(120deg, var(--primary), var(--accent)); box-shadow: 0 6px 16px rgba(11,92,122,.3); }

/* ---------- empty state ---------- */
.empty-anim { text-align: center; padding: 3.5rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.ea-icon { position: relative; width: 90px; height: 90px; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-50); color: var(--primary); font-size: 2rem; }
.ea-icon i { animation: searchMove 3s ease-in-out infinite; }
.ea-icon .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ringOut 2.4s ease-out infinite; }
@keyframes searchMove { 25% { transform: translate(-8px, -4px) rotate(-10deg); } 75% { transform: translate(8px, 3px) rotate(8deg); } }
@keyframes ringOut { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.5); opacity: 0; } }

/* ==========================================================================
   Journals page
   ========================================================================== */
.tp > i { font-size: .95rem; opacity: .75; transition: transform .35s var(--ease-back); }
.tp:hover > i { transform: scale(1.2) rotate(-8deg); }
.tp.active > i { opacity: 1; }
.sort-seg.seg-2 { grid-template-columns: repeat(2, 1fr); min-width: 230px; }
.sort-seg.seg-2 .seg-thumb { width: calc((100% - 8px) / 2); }
.sort-seg.seg-2 label { padding: .4rem .9rem; }

/* ---------- featured journal ---------- */
.featured-journal { position: relative; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: center; margin: 1rem 0 2.5rem; padding: 2.25rem 2.5rem; border-radius: calc(var(--radius) + 6px); border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--ang), var(--accent), var(--primary), #6b5bd2, var(--gold), var(--accent)) border-box; animation: spinBorder 8s linear infinite; box-shadow: 0 24px 60px rgba(15, 30, 54, .1); }
.fj-glow { position: absolute; width: 420px; height: 420px; left: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(20,163,154,.18), transparent 65%); animation: orbA 14s ease-in-out infinite alternate; pointer-events: none; }
.fj-book-wrap { position: relative; display: flex; justify-content: center; perspective: 1200px; padding: 1rem 0 2rem; }
.fj-book { position: relative; width: 190px; height: 260px; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(6deg); animation: bookFloat 6s ease-in-out infinite; transition: transform .8s var(--ease-out); }
.featured-journal:hover .fj-book { animation-play-state: paused; transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); }
@keyframes bookFloat { 50% { transform: rotateY(-22deg) rotateX(4deg) translateY(-12px); } }
.fj-front { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; padding: 1.25rem 1.1rem 1.25rem 1.4rem; border-radius: 4px 12px 12px 4px; color: #fff; background: linear-gradient(160deg, var(--primary), var(--ink)); box-shadow: inset 6px 0 0 rgba(255,255,255,.18), inset 10px 0 18px rgba(0,0,0,.18); transform: translateZ(14px); overflow: hidden; }
.fj-front::after { content: ""; position: absolute; inset: -30%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); animation: coverShine 5s ease-in-out infinite; }
@keyframes coverShine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.fj-book.c1 .fj-front { background: linear-gradient(160deg, #14a39a, #0b5c7a); }
.fj-book.c2 .fj-front { background: linear-gradient(160deg, #e3a336, #a8590c); }
.fj-book.c3 .fj-front { background: linear-gradient(160deg, #6b5bd2, #2e2266); }
.fj-book.c4 .fj-front { background: linear-gradient(160deg, #d0546a, #7a1f33); }
.fj-cat { position: absolute; top: 1.1rem; left: 1.4rem; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(255,255,255,.16); }
.fj-front strong { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.25; position: relative; }
.fj-front small { font-size: .7rem; letter-spacing: .08em; opacity: .75; position: relative; }
.fj-pages { position: absolute; top: 6px; bottom: 6px; right: -12px; width: 26px; transform: rotateY(90deg); transform-origin: left; background: repeating-linear-gradient(90deg, #fff 0 2px, #e8edf3 2px 3px); border-radius: 0 3px 3px 0; }
.fj-shadow { position: absolute; bottom: 4px; left: 50%; width: 170px; height: 18px; margin-left: -85px; border-radius: 50%; background: rgba(15,30,54,.22); filter: blur(10px); animation: shadowPulse 6s ease-in-out infinite; }
@keyframes shadowPulse { 50% { transform: scale(.85); opacity: .6; } }
.fj-body { position: relative; }
.fj-label { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #fff; padding: .3rem .75rem; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #d97a1e); box-shadow: 0 6px 16px rgba(227,163,54,.35); }
.fj-category { margin-left: .6rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.fj-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .9rem 0 .6rem; }
.fj-body h2 a { color: var(--ink); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease-out), color .2s; }
.fj-body h2 a:hover { color: var(--primary); background-size: 100% 2px; }
.fj-body > p { color: var(--muted); max-width: 640px; }
.fj-facts { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
.fj-facts > div { padding: .65rem 1rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); transition: transform .35s var(--ease-back), border-color .25s; }
.fj-facts > div:hover { transform: translateY(-3px); border-color: var(--accent); }
.fj-facts span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fj-facts strong { font-size: .98rem; color: var(--ink); }
.fj-latest { display: flex; align-items: center; gap: .85rem; max-width: 640px; padding: .85rem 1rem; border-radius: 12px; color: var(--ink); background: linear-gradient(135deg, var(--accent-50), var(--primary-50)); border: 1px solid rgba(20,163,154,.2); transition: transform .35s var(--ease-out), box-shadow .3s; }
.fj-latest:hover { color: var(--ink); transform: translateX(6px); box-shadow: 0 10px 24px rgba(11,92,122,.12); }
.fj-latest .live-dot { flex-shrink: 0; margin: 0; }
.fj-latest span:not(.live-dot) { flex: 1; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.fj-latest small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-bottom: .1rem; }
.fj-latest > i { color: var(--primary); transition: transform .3s var(--ease-out); }
.fj-latest:hover > i { transform: translate(3px, -3px); }

/* ---------- journal card extras ---------- */
.jc-editor { display: flex; align-items: center; gap: .6rem; margin: -.25rem 0 .85rem; font-size: .84rem; color: var(--ink-2); }
.jc-editor > i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-50); color: var(--primary); transition: transform .35s var(--ease-back), background .25s, color .25s; }
.jc-editor small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.journal-card:hover .jc-editor > i { transform: rotate(-10deg) scale(1.08); background: var(--accent); color: #fff; }
.jc-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .86rem; font-weight: 600; color: var(--muted); transition: color .25s, gap .35s var(--ease-out); }
.journal-card:hover .jc-cta { color: var(--primary); gap: .75rem; }
.journals-grid.is-loading .journal-card { opacity: .5; pointer-events: none; animation: loadPulse 1s ease-in-out infinite; }
@keyframes loadPulse { 50% { opacity: .3; } }

@media (max-width: 991.98px) {
  .featured-journal { grid-template-columns: 1fr; gap: 1rem; padding: 1.75rem 1.5rem; }
  .fj-book { width: 150px; height: 205px; }
  .fj-front strong { font-size: .95rem; }
}
@media (max-width: 575.98px) {
  .results-bar { flex-wrap: wrap; }
  .results-bar form, .sort-seg.seg-2 { min-width: 0; width: 100%; }
}

/* ==========================================================================
   Content pages (page.php)
   ========================================================================== */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1040; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary), #6b5bd2); transform: scaleX(var(--read, 0)); transform-origin: left; box-shadow: 0 0 10px rgba(20,163,154,.6); }
.cms-title { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.cms-title h1 { margin: 0; }
.cms-icon { flex-shrink: 0; width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: linear-gradient(135deg, rgba(20,163,154,.6), rgba(107,91,210,.5)); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: iconFloat 5s ease-in-out infinite; }
@keyframes iconFloat { 50% { transform: translateY(-6px) rotate(-4deg); } }
.cms-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.cms-meta span { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; color: #dbe7f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.cms-meta i { color: #9fe3dc; }
@media (min-width: 992px) { .cms-aside { position: sticky; top: 96px; } }

.prose-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 2.25rem 2.5rem 1.5rem; box-shadow: 0 18px 50px rgba(15,30,54,.06); }
.prose-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0; background: linear-gradient(90deg, var(--accent), var(--primary), #6b5bd2, var(--gold)); background-size: 300% 100%; animation: gradSlide 8s linear infinite; }
.prose-fx > p:first-child { font-size: 1.15rem; color: var(--ink-2); }
.prose-fx h2, .prose-fx h3 { position: relative; padding-left: 1.1rem; scroll-margin-top: 110px; }
.prose-fx h2::before, .prose-fx h3::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--accent), var(--primary)); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease-out) .2s; }
.prose-fx h2.in::before, .prose-fx h3.in::before { transform: scaleY(1); }
.prose-fx a { color: var(--primary); font-weight: 500; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1.5px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
.prose-fx a:hover { color: var(--accent); background-size: 100% 100%; background-image: linear-gradient(var(--accent-50), var(--accent-50)); }
.prose-fx ul { list-style: none; padding-left: 0; }
.prose-fx ul > li { position: relative; padding-left: 1.9rem; }
.prose-fx ul > li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .1em; width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); }
.prose-fx ol { list-style: none; counter-reset: step; padding-left: 0; position: relative; }
.prose-fx ol > li { counter-increment: step; position: relative; padding: .2rem 0 1.1rem 3.2rem; margin: 0; }
.prose-fx ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; color: var(--primary); background: var(--surface); border: 2px solid var(--accent); z-index: 1; transition: background .3s, color .3s, transform .4s var(--ease-back); }
.prose-fx ol > li::after { content: ""; position: absolute; left: calc(1.1rem - 1px); top: 2.2rem; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), var(--border)); }
.prose-fx ol > li:last-child::after { display: none; }
.prose-fx ol > li:hover::before { background: var(--accent); color: #fff; transform: scale(1.12); }
.prose-fx ol > li > strong:first-child { color: var(--ink); }
.prose-fx blockquote { position: relative; padding: 1rem 1.25rem 1rem 3rem; border-left: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent-50), var(--primary-50)); }
.prose-fx blockquote::before { content: "\201C"; position: absolute; left: .9rem; top: -.2rem; font-family: var(--font-head); font-size: 3.2rem; color: var(--accent); opacity: .6; }
.prose-fx table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 1.25rem 0; font-size: .92rem; }
.prose-fx th { background: var(--primary-50); color: var(--ink); }
.prose-fx th, .prose-fx td { padding: .65rem .9rem; border-bottom: 1px solid var(--border); }
.prose-fx tr:last-child td { border-bottom: 0; }
.prose-fx tbody tr { transition: background .2s; }
.prose-fx tbody tr:hover { background: var(--bg); }
.prose-fx > * { transition: opacity .7s ease, transform .7s var(--ease-out); }
.prose-fx.js-reveal > *:not(.in) { opacity: 0; transform: translateY(16px); }
.prose-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px dashed var(--border); }
.icon-btn { position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 1.1rem; transition: transform .3s var(--ease-back), color .2s, border-color .2s, background .2s; }
.icon-btn:hover { transform: translateY(-2px); color: var(--primary); border-color: var(--primary); background: var(--primary-50); }
.icon-btn .tip, .cm-action .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; padding: .2rem .55rem; border-radius: 6px; font-size: .72rem; font-weight: 600; color: #fff; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out); }
.icon-btn:hover .tip, .icon-btn.done .tip, .cm-action:hover .tip, .cm-action.done .tip { opacity: 1; transform: translate(-50%, 0); }
.icon-btn.done, .cm-action.done { color: #fff !important; background: var(--accent) !important; border-color: var(--accent) !important; }

.toc-card h6 { display: flex; align-items: center; gap: .6rem; }
.toc-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--border); }
.toc-list li { margin: 0; }
.toc-list a { display: block; padding: .35rem .5rem; font-size: .9rem; color: var(--muted); border-radius: 8px; transition: color .2s, background .2s, padding .3s var(--ease-out); }
.toc-list a:hover { color: var(--primary); background: var(--primary-50); padding-left: .8rem; }
.toc-list a.active { color: var(--primary); font-weight: 600; }
.toc-list .lvl-3 a { padding-left: 1.2rem; font-size: .86rem; }
.toc-marker { position: absolute; left: -2px; top: 0; width: 2px; height: 0; background: linear-gradient(180deg, var(--accent), var(--primary)); transition: transform .4s var(--ease-out), height .4s var(--ease-out); }
.author-card .side-links a.active { color: var(--primary); font-weight: 600; background: var(--primary-50); padding-left: .75rem; }
.author-card .side-links a.active span i { color: var(--accent); }

.page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.pn { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--ink); transition: transform .4s var(--ease-out), box-shadow .3s, border-color .3s; }
.pn.next { justify-content: flex-end; text-align: right; grid-column: 2; }
.pn small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pn span { font-weight: 600; font-family: var(--font-head); }
.pn > i { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-50); color: var(--primary); transition: transform .35s var(--ease-out), background .25s, color .25s; }
.pn:hover { color: var(--ink); border-color: transparent; box-shadow: 0 14px 34px rgba(15,30,54,.1); }
.pn.prev:hover { transform: translateX(-4px); } .pn.next:hover { transform: translateX(4px); }
.pn:hover > i { background: var(--accent); color: #fff; }
.pn.prev:hover > i { transform: translateX(-3px); } .pn.next:hover > i { transform: translateX(3px); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-hero { padding-bottom: 7rem; }
.reply-badge { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.25rem; padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; color: #dbe7f3; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.reply-badge .live-dot { margin: 0; }
.contact-methods { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: -4rem; }
.cm-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.3rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transition: transform .45s var(--ease-out), box-shadow .3s; }
.cm-card.reveal { transition-delay: calc(var(--i, 0) * 100ms); }
.cm-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(15,30,54,.16); }
.cm-icon { position: relative; flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 8px 18px rgba(11,92,122,.3); transition: transform .45s var(--ease-back); }
.cm-card:hover .cm-icon { transform: rotate(-10deg) scale(1.08); }
.pin-ping { position: absolute; inset: 0; border-radius: 14px; border: 2px solid var(--accent); animation: ringOut 2.2s ease-out infinite; }
.cm-text { min-width: 0; flex: 1; }
.cm-text small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cm-text strong { display: block; font-size: .98rem; color: var(--ink); overflow-wrap: anywhere; }
.cm-text a:hover strong { color: var(--primary); }
.cm-action { position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-2); transition: color .2s, background .2s, border-color .2s, transform .3s var(--ease-back); }
.cm-action:hover { color: var(--primary); border-color: var(--primary); transform: scale(1.06); }

.contact-form-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 2rem 2.25rem; box-shadow: 0 18px 50px rgba(15,30,54,.06); overflow: hidden; }
.contact-form-card::before { content: ""; position: absolute; right: -80px; top: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(20,163,154,.12), transparent 70%); animation: orbB 12s ease-in-out infinite alternate; pointer-events: none; }
.cf-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.cf-head .ac-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 12px; }
.fx-field { position: relative; }
.fx-field .form-control { border-radius: 12px; border-width: 1.5px; background: var(--bg); transition: border-color .25s, box-shadow .3s, background .25s; }
.fx-field .form-control:hover { background: var(--surface); }
.fx-field .form-control:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(20,163,154,.13); }
.fx-field > label { color: var(--muted); transition: color .2s, transform .2s, opacity .2s; }
.fx-field > label i { transition: color .2s; }
.fx-field .form-control:focus ~ label, .fx-field .form-control:focus ~ label i { color: var(--accent); }
.fx-field .form-control.is-invalid, .was-validated .fx-field .form-control:invalid { animation: shake .45s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fx-field > .msg-area { min-height: 170px !important; padding-right: 3.4rem; resize: vertical; background-image: none !important; }
.char-ring { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; transform: rotate(-90deg); }
.char-ring circle { fill: none; stroke-width: 3.5; }
.char-ring .track { stroke: var(--border); }
.char-ring .bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: calc(94.25 * (1 - var(--fill, 0))); transition: stroke-dashoffset .3s ease, stroke .3s; }
.char-ring.warn .bar { stroke: var(--gold); }
.char-ring.max .bar { stroke: #d0546a; }
.topic-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .75rem; }
.topic { padding: .3rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 500; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); animation: pillIn .5s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 50ms + 300ms); transition: color .2s, background .2s, border-color .2s, transform .3s var(--ease-back); }
.topic:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.topic.on { color: #fff; border-color: transparent; background: linear-gradient(120deg, var(--primary), var(--accent)); }
.send-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .6rem; padding-right: 1.4rem; }
.send-btn .plane { display: inline-block; transition: transform .3s var(--ease-out); }
.send-btn:hover .plane { transform: translate(3px, -3px) rotate(-8deg); }
.send-btn.sending { pointer-events: none; }
.send-btn.sending .plane { animation: planeOff .9s cubic-bezier(.5, 0, .75, 0) forwards; }
.send-btn.sending .label { animation: labelPulse 1s ease-in-out infinite; }
@keyframes planeOff { 30% { transform: translate(-6px, 4px) rotate(10deg); } 100% { transform: translate(140px, -70px) rotate(-20deg) scale(.6); opacity: 0; } }
@keyframes labelPulse { 50% { opacity: .55; } }
.contact-page .alert-success { position: relative; padding-left: 3.4rem; border: 0; border-radius: 12px; color: #0d5f5a; background: linear-gradient(135deg, var(--accent-50), #f0faf8); animation: heroUp .6s var(--ease-out) backwards; }
.contact-page .alert-success > i { position: absolute; left: 1rem; top: .85rem; width: 1.6rem; height: 1.6rem; margin: 0 !important; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--accent); animation: popCheck .6s var(--ease-back) .2s backwards; }
@keyframes popCheck { from { transform: scale(0) rotate(-90deg); } }
.steps-card { position: relative; margin-bottom: 1.25rem; padding: 1.4rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.steps-card h6 { font-weight: 700; margin-bottom: 1rem; }
.steps-card ol { list-style: none; margin: 0; padding: 0; }
.steps-card li { position: relative; display: flex; gap: .9rem; padding-bottom: 1.1rem; }
.steps-card li:last-child { padding-bottom: 0; }
.steps-card li::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 2px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--border)); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 250ms + 300ms); }
.steps-card li:last-child::after { display: none; }
.steps-card.in li::after { transform: scaleY(1); }
.steps-card li > i { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; color: var(--primary); background: var(--primary-50); transform: scale(.6); opacity: 0; transition: transform .5s var(--ease-back), opacity .4s, background .25s, color .25s; transition-delay: calc(var(--i, 0) * 250ms + 150ms); }
.steps-card.in li > i { transform: none; opacity: 1; }
.steps-card li:hover > i { background: var(--accent); color: #fff; }
.steps-card li span { font-size: .86rem; color: var(--muted); }
.steps-card li strong { display: block; font-size: .93rem; color: var(--ink); }

/* ==========================================================================
   Submission wizard (submit.php)
   ========================================================================== */
.submit-hero { padding-bottom: 7rem; }
.wizard-card { position: relative; z-index: 2; margin-top: -4.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: 2rem 2.25rem; box-shadow: var(--shadow-lg); }

.stepper { position: relative; display: flex; justify-content: space-between; list-style: none; margin: 0 0 2rem; padding: 0; }
.stepper::before, .stepper-fill { content: ""; position: absolute; top: 22px; left: 44px; right: 44px; height: 3px; border-radius: 3px; background: var(--border); }
.stepper-fill { background: linear-gradient(90deg, var(--accent), var(--primary)); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform .6s var(--ease-out); }
.stepper li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 88px; }
.stepper .dot { position: relative; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--muted); background: var(--surface); border: 2px solid var(--border); transition: color .3s, border-color .3s, background .3s, transform .4s var(--ease-back); }
.stepper .dot > i { transition: opacity .3s, transform .4s var(--ease-back); }
.stepper .done-ic { position: absolute; opacity: 0; transform: scale(0); }
.stepper .lbl { font-size: .8rem; font-weight: 600; color: var(--muted); transition: color .3s; }
.stepper li.active .dot { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--primary)); transform: scale(1.1); animation: dotRing 2s ease-out infinite; }
.stepper li.active .lbl { color: var(--primary); }
.stepper li.done .dot { color: #fff; border-color: var(--accent); background: var(--accent); }
.stepper li.done .dot > i:first-child { opacity: 0; transform: scale(0); }
.stepper li.done .done-ic { opacity: 1; transform: none; }
.stepper li.done .lbl { color: var(--ink-2); }
.stepper li.done { cursor: pointer; }
@keyframes dotRing { 0% { box-shadow: 0 0 0 0 rgba(20,163,154,.4); } 80%, 100% { box-shadow: 0 0 0 12px rgba(20,163,154,0); } }

.wz-step { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.wz-title { display: flex; align-items: center; gap: .75rem; float: none; width: auto; font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: 1.25rem; }
.wz-title span { font-family: var(--font-body); font-size: .78rem; font-weight: 700; padding: .25rem .55rem; border-radius: 8px; color: var(--primary); background: var(--primary-50); }
.wizard-on .wz-step { display: none; margin-bottom: 1.5rem; }
.wizard-on .wz-step.current { display: block; animation: stepIn .55s var(--ease-out) both; }
.wizard-on .wz-step.current.from-left { animation-name: stepInLeft; }
.wizard-on .wz-step.current.shake { animation: shake .45s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes stepInLeft { from { opacity: 0; transform: translateX(-40px); } }
.wz-step.show-errors .invalid-feedback { display: block; }

.journal-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.jp-tile { position: relative; display: flex; align-items: center; gap: .85rem; margin: 0; padding: .85rem 1rem; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; animation: pillIn .5s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 45ms); transition: border-color .25s, box-shadow .3s, transform .35s var(--ease-out); }
.jp-tile:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(15,30,54,.08); }
.wz-step.show-errors .jp-tile:has(input:invalid) { border-color: rgba(208,84,106,.55); }
.jp-tile input { position: absolute; opacity: 0; pointer-events: none; }
.jp-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.jp-cover { flex-shrink: 0; width: 40px; height: 52px; border-radius: 4px 8px 8px 4px; display: flex; align-items: flex-end; padding: 4px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; color: #fff; background: linear-gradient(160deg, var(--primary), var(--ink)); box-shadow: inset 3px 0 0 rgba(255,255,255,.18); transition: transform .45s var(--ease-out); transform-origin: left; }
.jp-cover.c1 { background: linear-gradient(160deg, #14a39a, #0b5c7a); }
.jp-cover.c2 { background: linear-gradient(160deg, #e3a336, #a8590c); }
.jp-cover.c3 { background: linear-gradient(160deg, #6b5bd2, #2e2266); }
.jp-cover.c4 { background: linear-gradient(160deg, #d0546a, #7a1f33); }
.jp-tile:hover .jp-cover, .jp-tile:has(input:checked) .jp-cover { transform: perspective(300px) rotateY(-22deg); }
.jp-text { min-width: 0; flex: 1; }
.jp-text strong { display: block; font-size: .9rem; line-height: 1.3; color: var(--ink); }
.jp-text small { color: var(--muted); font-size: .76rem; }
.jp-check { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; border: 1.5px solid var(--border); transition: background .25s, border-color .25s; }
.jp-check i { transform: scale(0); transition: transform .35s var(--ease-back); }
.jp-tile:has(input:checked) { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(120deg, var(--accent), var(--primary)) border-box; box-shadow: 0 10px 26px rgba(11,92,122,.15); }
.jp-tile:has(input:checked) .jp-check { background: var(--accent); border-color: var(--accent); }
.jp-tile:has(input:checked) .jp-check i { transform: none; }

.dropzone { position: relative; display: block; margin: 0; padding: 2rem 1.25rem; border-radius: 16px; text-align: center; cursor: pointer; background: var(--bg); border: 2px dashed rgba(11,92,122,.3); transition: border-color .25s, background .25s, transform .35s var(--ease-out), box-shadow .3s; }
.dropzone:hover { border-color: var(--accent); background: var(--accent-50); }
.dropzone.drag { border-style: solid; border-color: var(--accent); background: var(--accent-50); transform: scale(1.02); box-shadow: 0 0 0 6px rgba(20,163,154,.14); }
.dropzone.has-error { border-color: #d0546a; animation: shake .45s ease; }
.dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.dz-idle { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.dz-idle[hidden] { display: none; }
.dz-icon { width: 64px; height: 64px; margin-bottom: .5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--primary); background: var(--surface); box-shadow: 0 8px 20px rgba(11,92,122,.12); animation: dzBob 2.6s ease-in-out infinite; }
.dropzone.drag .dz-icon { animation: dzBounce .6s var(--ease-back) infinite alternate; color: var(--accent); }
@keyframes dzBob { 50% { transform: translateY(-6px); } }
@keyframes dzBounce { to { transform: translateY(-10px) scale(1.1); } }
.dz-idle strong { color: var(--ink); }
.dz-idle small { color: var(--muted); }
.dz-idle u { color: var(--primary); text-underline-offset: 3px; }
.dz-file { display: flex; align-items: center; gap: 1rem; text-align: left; animation: heroUp .5s var(--ease-out) both; }
.dz-file[hidden] { display: none; }
.dropzone.has-file { padding: 1.1rem 1.25rem; border-style: solid; border-color: var(--accent); background: var(--surface); }
.dz-type { flex-shrink: 0; width: 48px; height: 56px; border-radius: 6px 12px 6px 6px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(160deg, #d0546a, #7a1f33); }
.dz-type.doc, .dz-type.docx { background: linear-gradient(160deg, #3b7bd6, #1d3f7a); }
.dz-meta { flex: 1; min-width: 0; }
.dz-name { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-size { color: var(--muted); }
.dz-bar { display: block; height: 5px; margin-top: .45rem; border-radius: 5px; background: var(--border); overflow: hidden; }
.dz-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--primary)); transform-origin: left; animation: dzFill .9s var(--ease-out) both; }
@keyframes dzFill { from { transform: scaleX(0); } }
.dz-remove { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); transition: color .2s, background .2s, transform .3s var(--ease-back); }
.dz-remove:hover { color: #b23a52; background: #fbecef; transform: rotate(90deg); }

.review-list { margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.review-list > div { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; align-items: center; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); }
.wz-step.current .review-list > div { animation: heroUp .5s var(--ease-out) backwards; }
.wz-step.current .review-list > div:nth-child(2) { animation-delay: .07s; }
.wz-step.current .review-list > div:nth-child(3) { animation-delay: .14s; }
.wz-step.current .review-list > div:nth-child(4) { animation-delay: .21s; }
.review-list > div:last-child { border-bottom: 0; }
.review-list dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.review-list dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.review-list dd.missing { color: #b23a52; }
.review-list button { border: 0; background: none; font-size: .82rem; font-weight: 600; color: var(--primary); padding: .2rem .5rem; border-radius: 6px; }
.review-list button:hover { background: var(--primary-50); }
.agree-check { padding: 1rem 1rem 1rem 2.6rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.agree-check .form-check-input { margin-top: .2rem; }
.agree-check .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

.wz-nav { display: flex; align-items: center; gap: .75rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
.wz-count { margin: 0 auto; font-size: .82rem; color: var(--muted); }
.wz-nav [data-next], .wz-nav [data-prev] { display: none; }
.wizard-on .wz-nav [data-next], .wizard-on .wz-nav [data-prev] { display: inline-flex; align-items: center; }
.wizard-on .wz-nav [data-prev].invisible { visibility: hidden; }
.wizard-on .wz-nav [data-submit] { display: none; }
.wizard-on.on-last .wz-nav [data-submit] { display: inline-flex; }
.wizard-on.on-last .wz-nav [data-next] { display: none; }

.submit-success { position: relative; text-align: center; padding: 1.5rem .5rem .5rem; }
.ss-check { width: 92px; height: 92px; margin-bottom: 1rem; }
.ss-check circle { fill: var(--accent-50); stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: drawStroke .7s ease-out forwards; }
.ss-check path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: drawStroke .45s .55s ease-out forwards; }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
.submit-success h2 { animation: heroUp .6s .5s var(--ease-out) backwards; }
.submit-success > p, .ss-ref { animation: heroUp .6s .65s var(--ease-out) backwards; }
.ss-burst { position: absolute; left: 50%; top: 4.4rem; width: 0; height: 0; pointer-events: none; }
.ss-burst span { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); opacity: 0; transform: rotate(calc(var(--k) * 25.7deg)); animation: burst 1.1s .45s var(--ease-out) forwards; }
.ss-burst span:nth-child(3n) { background: var(--gold); border-radius: 50%; }
.ss-burst span:nth-child(3n+1) { background: #6b5bd2; }
@keyframes burst { 0% { opacity: 1; transform: rotate(calc(var(--k) * 25.7deg)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(calc(var(--k) * 25.7deg)) translateY(-95px) scale(.4); } }
.ss-ref { display: inline-grid; grid-template-columns: auto auto; column-gap: 1.25rem; align-items: center; text-align: left; margin: .5rem 0 .75rem; padding: .85rem 1rem .85rem 1.4rem; border-radius: 14px; border: 1.5px dashed var(--accent); background: var(--accent-50); }
.ss-ref small { grid-column: 1; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ss-ref strong { grid-column: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.35rem; letter-spacing: .06em; color: var(--primary); }
.ss-ref .cm-action { grid-column: 2; grid-row: 1 / span 2; }
.submit-closed { text-align: center; padding: 2rem 1rem; }

@media (max-width: 767.98px) {
  .journal-picker { grid-template-columns: 1fr; }
  .stepper li { width: 64px; }
  .stepper::before, .stepper-fill { left: 32px; right: 32px; }
  .stepper .lbl { font-size: .7rem; }
  .review-list > div { grid-template-columns: 1fr auto; gap: .25rem 1rem; }
  .review-list dt { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .prose-card, .contact-form-card { padding: 1.5rem 1.25rem; }
  .wizard-card { padding: 1.5rem 1.1rem; }
  .page-nav { grid-template-columns: 1fr; }
  .pn.next { grid-column: auto; }
  .cms-icon { width: 46px; height: 46px; font-size: 1.25rem; }
}
@media print {
  .site-nav, .topbar, .site-footer, .cms-aside, .page-nav, .prose-foot .d-flex, .read-progress, .back-to-top, .hero-fx { display: none !important; }
  .cms-hero { background: none !important; color: #000; padding: 0 0 1rem; }
  .cms-hero h1, .cms-hero p { color: #000 !important; }
  .prose-card { box-shadow: none; border: 0; padding: 0; }
  .prose-fx > * { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 767.98px) {
  .articles-list.grid { grid-template-columns: 1fr; }
  .hero-stats strong { font-size: 1.6rem; }
  .hero-search .btn { padding: .55rem 1rem; }
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar { position: relative; overflow: hidden; background: linear-gradient(100deg, var(--ink) 0%, #12315a 45%, #0d3f57 70%, var(--ink) 100%); background-size: 220% 100%; animation: tbShift 18s ease-in-out infinite alternate; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), #9fe3dc, var(--gold), transparent); background-size: 200% 100%; animation: gradSlide 6s linear infinite; opacity: .8; }
@keyframes tbShift { to { background-position: 100% 0; } }
.topbar .container { min-height: 42px; position: relative; }
.tb-contacts, .tb-staff { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.tb-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .75rem .2rem .25rem; border-radius: 999px; color: #c7d2e3; border: 1px solid transparent; transition: background .25s, border-color .25s, color .2s; }
.tb-pill:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.tb-ic { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: #9fe3dc; background: rgba(20,163,154,.18); transition: transform .45s var(--ease-back), background .25s, color .25s; }
.tb-pill:hover .tb-ic { transform: rotate(-15deg) scale(1.12); background: var(--accent); color: #fff; }
.tb-pill:hover .bi-telephone { animation: ring .6s ease; }
@keyframes ring { 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
.tb-ticker { position: relative; flex: 1; height: 22px; overflow: hidden; text-align: center; max-width: 460px; }
.tb-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; color: #dbe7f3; font-size: .78rem; opacity: 0; transform: translateY(100%); transition: opacity .5s ease, transform .6s var(--ease-out); }
.tb-msg i { color: var(--gold); }
.tb-msg.on { opacity: 1; transform: none; }
.tb-msg.out { opacity: 0; transform: translateY(-100%); }
.tb-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 500; color: #dbe7f3; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); transition: color .2s, border-color .25s, box-shadow .3s, transform .3s var(--ease-back); }
.tb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--accent), var(--primary)); opacity: 0; transition: opacity .3s; }
.tb-btn:hover { color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(20,163,154,.4); }
.tb-btn:hover::before { opacity: 1; }
.tb-btn { isolation: isolate; }
.tb-btn i { transition: transform .35s var(--ease-back); }
.tb-btn:hover i { transform: scale(1.2); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; padding-top: 6.5rem; background: radial-gradient(900px 400px at 10% 0%, rgba(20,163,154,.12), transparent 60%), var(--ink); }
.ft-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; z-index: 1; pointer-events: none; }
.ft-wave path { fill: var(--surface); }
.ft-wave .w2 { opacity: .14; transform-origin: center top; animation: waveBreath 7s ease-in-out infinite alternate; }
@keyframes waveBreath { to { transform: scaleY(1.45) translateX(-2%); } }
.ft-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ft-aurora span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .35; }
.ft-aurora .a1 { width: 420px; height: 420px; background: #14a39a; bottom: -200px; left: 5%; animation: orbB 20s ease-in-out infinite alternate; }
.ft-aurora .a2 { width: 360px; height: 360px; background: #6b5bd2; top: 10%; right: -120px; opacity: .22; animation: orbA 24s ease-in-out infinite alternate; }
.ft-aurora .a3 { width: 260px; height: 260px; background: var(--gold); bottom: -160px; right: 30%; opacity: .14; animation: orbC 18s ease-in-out infinite alternate; }
.site-footer .container { position: relative; z-index: 2; }
.ft-col.reveal { transition-delay: calc(var(--i, 0) * 100ms); }
.site-footer h6 { position: relative; padding-bottom: .65rem; margin-bottom: 1.1rem; font-size: .95rem; letter-spacing: .02em; }
.site-footer h6::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out) .3s, width .4s var(--ease-out); }
.ft-col.in h6::after { transform: scaleX(1); }
.ft-col:hover h6::after { width: 48px; }
.ft-tagline { color: #9fb2cc; max-width: 340px; }
.ft-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ft-contact li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; }
.ft-ic { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #9fe3dc; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: transform .4s var(--ease-back), background .25s, color .25s; }
.ft-contact li:hover .ft-ic { transform: rotate(-10deg) scale(1.08); background: var(--accent); color: #fff; }
.ft-contact li > span:last-child, .ft-contact a { padding-top: .3rem; }
.footer-links li { margin-bottom: .55rem; }
.footer-links a { position: relative; display: inline-flex; align-items: center; color: #c7d2e3; transition: color .2s, transform .35s var(--ease-out); }
.footer-links a::before { content: "\F138"; font-family: "bootstrap-icons"; font-size: .7rem; width: 0; overflow: hidden; opacity: 0; color: var(--accent); transition: width .3s var(--ease-out), opacity .3s, margin .3s; }
.footer-links a:hover { color: #fff; }
.footer-links a:hover::before { width: 1rem; opacity: 1; }
.ft-journals a { font-size: .88rem; line-height: 1.35; }
.ft-help { position: relative; overflow: hidden; padding: 1.25rem; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); transition: transform .4s var(--ease-out), border-color .3s, background .3s; }
.ft-help:hover { transform: translateY(-4px); border-color: rgba(20,163,154,.45); background: rgba(255,255,255,.08); }
.ft-help::before { content: ""; position: absolute; width: 140px; height: 140px; right: -50px; top: -50px; border-radius: 50%; border: 18px solid rgba(20,163,154,.12); animation: spinSlow 20s linear infinite; }
.ft-help-ic { display: inline-flex; width: 40px; height: 40px; margin-bottom: .75rem; border-radius: 12px; align-items: center; justify-content: center; font-size: 1.15rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); animation: iconFloat 4.5s ease-in-out infinite; }
.ft-help h6 { padding-bottom: 0; margin-bottom: .4rem; }
.ft-help h6::after { display: none; }
.ft-help p { font-size: .85rem; color: #9fb2cc; margin-bottom: 1rem; position: relative; }
.ft-watermark { margin-top: 3rem; font-family: var(--font-head); font-weight: 700; font-size: clamp(2.6rem, 9vw, 7.5rem); line-height: .9; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.1); background: linear-gradient(90deg, rgba(20,163,154,0) 0%, rgba(20,163,154,.35) 50%, rgba(20,163,154,0) 100%); background-size: 40% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: wmSweep 9s ease-in-out infinite; user-select: none; }
@keyframes wmSweep { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
.footer-bottom { position: relative; z-index: 2; margin-top: 0; border-top: 1px solid rgba(255,255,255,.08); }
.ft-bottom-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.ft-bottom-links a { position: relative; }
.ft-bottom-links a:not(.ft-top)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.ft-bottom-links a:hover::after { transform: scaleX(1); }
.ft-top { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); transition: background .25s, border-color .25s; }
.ft-top:hover { background: var(--accent); border-color: var(--accent); }
.ft-top i { transition: transform .3s var(--ease-out); }
.ft-top:hover i { transform: translateY(-3px); }
.back-to-top { width: 48px; height: 48px; }
.back-to-top .btt-ring { position: absolute; inset: 0; width: 48px; height: 48px; transform: rotate(-90deg); }
.btt-ring circle { fill: none; stroke: #9fe3dc; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: calc(132 * (1 - var(--scroll, 0))); }
.back-to-top i { position: relative; transition: transform .3s var(--ease-out); }
.back-to-top:hover i { transform: translateY(-3px); }
.back-to-top.show { animation: pillIn .5s var(--ease-back); }

@media (max-width: 991.98px) {
  .ft-watermark { margin-top: 2rem; }
}

/* ---------- animated illustrations (self-animating SVGs in assets/img/anim) ---------- */
.anim-art { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hero-art { display: none; }
@media (min-width: 1200px) {
  .has-art .container > :not(.hero-art) { max-width: calc(100% - 400px); }
  .hero-art { display: block; position: absolute; right: 12px; top: 50%; width: 360px; transform: translateY(-50%); }
  .hero-art img { width: 100%; filter: drop-shadow(0 22px 40px rgba(4, 16, 34, .35)); }
}
.cta-art { width: 150px; margin: -.75rem 0; filter: drop-shadow(0 12px 24px rgba(15, 30, 54, .2)); }
.notfound-art { width: min(360px, 100%); margin: 0 auto 1.25rem; }
@media print { .hero-art, .cta-art, .hero-art-top, .ab-visual { display: none !important; } }

/* home hero: per-slide picture with the feature chips floating over it */
.hero-visual { display: block; position: relative; max-width: 480px; margin-left: auto; }
.hero-visual-art { width: 100%; }
.hero-visual .hero-chip { position: absolute; z-index: 1; max-width: 250px; padding: .7rem .95rem; gap: .75rem; background: rgba(17, 36, 64, .86); border-color: rgba(255, 255, 255, .16); backdrop-filter: none; box-shadow: 0 14px 34px rgba(4, 16, 34, .3); }
.hero-visual .hero-chip .icon { width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem; }
.hero-visual .hero-chip strong { font-size: .88rem; line-height: 1.3; display: block; }
.hero-visual .hero-chip:nth-of-type(1) { top: -3%; left: -6%; }
.hero-visual .hero-chip:nth-of-type(2) { top: 40%; right: 0; }
.hero-visual .hero-chip:nth-of-type(3) { bottom: 2%; left: 0; }
@media (max-width: 1199.98px) {
  .hero-visual .hero-chip:nth-of-type(1) { left: 0; }
  .hero-visual .hero-chip:nth-of-type(2) { right: 0; }
}

/* ---------- hero: advanced motion layer (driven by site.js; --mx/--my are -0.5..0.5) ---------- */
@property --fy { syntax: '<length>'; inherits: false; initial-value: 0px; }
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hero-net.on { opacity: 1; }
.hero-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(20, 163, 154, .22), rgba(107, 91, 210, .08) 40%, transparent 65%); }
.hero.pointer-in .hero-spot { opacity: 1; }
.hero-sweep { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07) 45%, rgba(159, 227, 220, .12) 50%, rgba(255, 255, 255, .07) 55%, transparent); transform: translateX(-120%) skewX(-18deg); }
.hero-sweep.run { animation: heroSweep 1.4s var(--ease-out); }
@keyframes heroSweep { to { transform: translateX(380%) skewX(-18deg); } }

/* slide change: the outgoing slide's content leaves quickly (slides are transparent, so Bootstrap's
   fade alone would show both slides' text on top of each other); all slides share the tallest height */
.js-anim .carousel-item { min-height: var(--slide-h, 0px); }
.js-anim .carousel-item.active.carousel-item-start > .container { animation: slideOutL .38s var(--ease-out) forwards; }
.js-anim .carousel-item.active.carousel-item-end > .container { animation: slideOutR .38s var(--ease-out) forwards; }
@keyframes slideOutL { to { opacity: 0; transform: translateX(-36px); } }
@keyframes slideOutR { to { opacity: 0; transform: translateX(36px); } }

.js-anim .carousel-inner, .js-anim .hero-controls { translate: 0 calc(var(--scroll, 0) * .22px); opacity: calc(1 - var(--scroll, 0) / 760); will-change: translate, opacity; }
.js-anim .hero-controls { opacity: calc(1 - var(--scroll, 0) / 160); }

.js-anim .hero-visual-art { position: relative; filter: none; translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -16px); }
.js-anim .carousel-item.is-in .hero-visual-art { animation: artIn 1.2s var(--ease-out) backwards; animation-delay: calc(var(--enter, 0ms) + 120ms); }
@keyframes artIn { from { clip-path: circle(0% at 50% 50%); transform: scale(.82) rotate(-6deg); opacity: 0; } 60% { clip-path: circle(75% at 50% 50%); opacity: 1; } }
.js-anim .hero-visual::before, .js-anim .hero-visual::after { content: ""; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; translate: calc(-50% + var(--mx, 0) * -10px) calc(-50% + var(--my, 0) * -8px); }
.js-anim .hero-visual::before { width: 86%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(159, 227, 220, .65) 80%, rgba(227, 163, 54, .5) 90%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: spinSlow 9s linear infinite; }
.js-anim .hero-visual::after { width: 98%; border: 1px dashed rgba(255, 255, 255, .14); animation: spinSlow 60s linear infinite reverse; }

.js-anim .hero-visual .hero-chip { translate: calc(var(--mx, 0) * 34px * var(--z, 1)) calc(var(--my, 0) * 26px * var(--z, 1) + var(--fy)); }
.js-anim .carousel-item.is-in .hero-visual .hero-chip { animation: chipIn .9s var(--ease-out) backwards, chipFloat 6s ease-in-out 1.2s infinite; animation-delay: calc(var(--enter, 0ms) + var(--d, 0) * 90ms), calc(1.2s + var(--d, 0) * -700ms); }
.hero-visual .hero-chip:nth-of-type(1) { --z: 1.2; }
.hero-visual .hero-chip:nth-of-type(2) { --z: .7; }
.hero-visual .hero-chip:nth-of-type(3) { --z: 1.45; }
@keyframes chipFloat { 50% { --fy: -9px; } }

.hero-eyebrow.scrambling { font-variant-numeric: tabular-nums; }
.hero [data-magnetic] { translate: var(--bx, 0) var(--by, 0); transition: translate .35s var(--ease-out), background-color .2s, border-color .2s, color .2s, box-shadow .2s; }

/* ---------- home: about the library ---------- */
.about-section { position: relative; overflow: hidden; }
.about-section::before { content: ""; position: absolute; width: 620px; height: 620px; left: -220px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 163, 154, .1), transparent 70%); pointer-events: none; }
.about-section .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* visual (left) — --mx/--my are set by site.js for pointer parallax */
.ab-visual { position: relative; max-width: 540px; margin: 0 auto; padding: 2.25rem 1.75rem 2.75rem; }
.ab-visual.reveal:not(.in) { transform: translateY(30px) scale(.96); }
.ab-frame { position: relative; z-index: 1; border-radius: 28px; padding: 1.75rem 1.25rem 1.25rem; background: radial-gradient(circle at 50% 42%, #fff 0, rgba(255, 255, 255, 0) 62%), linear-gradient(145deg, var(--primary-50), var(--accent-50)); border: 1px solid #fff; box-shadow: var(--shadow-lg); overflow: hidden; transform: perspective(900px) rotateY(calc(var(--mx, 0) * 9deg)) rotateX(calc(var(--my, 0) * -9deg)); }
.ab-frame img { width: 100%; height: auto; }
.ab-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%); transform: translateX(-110%); animation: abShine 7s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes abShine { 0%, 72% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.ab-ring { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -14px); }
.ab-ring.r1 { width: 72%; right: -4%; top: -2%; border: 2px dashed rgba(20, 163, 154, .35); animation: spinSlow 40s linear infinite; }
.ab-ring.r2 { width: 44%; left: -2%; bottom: 0; background: conic-gradient(from 0deg, transparent 0 55%, rgba(11, 92, 122, .45) 82%, rgba(227, 163, 54, .5) 92%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: spinSlow 9s linear infinite reverse; }
.ab-dots { position: absolute; z-index: 0; left: 0; top: 6%; width: 120px; height: 120px; background-image: radial-gradient(var(--accent) 1.6px, transparent 1.8px); background-size: 15px 15px; opacity: .35; translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 18px); }

.ab-badge, .ab-seal { position: absolute; z-index: 2; translate: calc(var(--mx, 0) * var(--z)) calc(var(--my, 0) * var(--z) + var(--fy)); animation: abFloat 6s ease-in-out infinite; transition: opacity .6s ease, transform .8s var(--ease-back); }
.ab-visual:not(.in) .ab-badge, .ab-visual:not(.in) .ab-seal { opacity: 0; transform: scale(.7); }
.ab-visual.in .b1 { transition-delay: .35s; }
.ab-visual.in .b2 { transition-delay: .5s; }
.ab-visual.in .ab-seal { transition-delay: .65s; }
@keyframes abFloat { 50% { --fy: -10px; } }
.ab-badge { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.05rem .7rem .75rem; border-radius: 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.ab-badge .ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; background: var(--accent-50); color: var(--accent); }
.ab-badge .ic.gold { background: #fdf3e1; color: var(--gold); }
.ab-badge strong { display: block; font-size: .9rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.ab-badge small { display: block; font-size: .75rem; color: var(--muted); }
.ab-badge.b1 { --z: -26px; left: -2%; top: 40%; }
.ab-badge.b2 { --z: 30px; right: -1%; bottom: 4%; animation-delay: -3s; }
.ab-seal { --z: 20px; right: 3%; top: 0; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.7rem; background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 14px 30px rgba(11, 92, 122, .35); border: 4px solid #fff; animation-delay: -1.5s; }
.ab-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spinSlow 16s linear infinite; }
.ab-seal text { fill: #fff; font-size: 8.6px; font-weight: 700; letter-spacing: .5px; font-family: var(--font-body); }

/* content (right) */
.ab-mark { color: var(--primary); padding: 0 .12em; border-radius: 4px; background: linear-gradient(90deg, rgba(20, 163, 154, .25), rgba(227, 163, 54, .3)) no-repeat 0 88% / 0% 36%; transition: background-size 1.1s var(--ease-out) .45s; }
.reveal.in .ab-mark { background-size: 100% 36%; }
.ab-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.ab-feature { --tone: var(--primary); --tone-bg: var(--primary-50); position: relative; overflow: hidden; height: 100%; padding: 1.15rem 1.15rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.ab-feature:nth-child(2) { --tone: var(--accent); --tone-bg: var(--accent-50); }
.ab-feature:nth-child(3) { --tone: #b7791f; --tone-bg: #fdf3e1; }
.ab-feature:nth-child(4) { --tone: #6b5bd2; --tone-bg: #efedfb; }
.ab-feature.reveal { transition: opacity .6s ease, transform .7s var(--ease-out), box-shadow .35s ease, border-color .35s ease; transition-delay: calc(var(--i, 0) * 90ms); }
.ab-feature.reveal.in { transition-delay: 0s; }
.ab-feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tone), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.ab-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.ab-feature:hover::before { transform: scaleX(1); }
.ab-feature .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .85rem; background: var(--tone-bg); color: var(--tone); transition: transform .5s var(--ease-back), background .3s, color .3s; }
.ab-feature:hover .ic { transform: rotate(-10deg) scale(1.1); background: var(--tone); color: #fff; }
.ab-feature h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.ab-feature p { margin: 0; font-size: .87rem; line-height: 1.5; color: var(--muted); }

.ab-stats { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 3rem; padding: 1.4rem 1.75rem; border-radius: var(--radius); color: #fff; background: linear-gradient(120deg, var(--ink), var(--primary), var(--ink)); background-size: 200% 100%; animation: gradShift 10s ease infinite; box-shadow: var(--shadow); }
.ab-stats::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); transform: translateX(-100%); animation: abShine 6s ease-in-out infinite; pointer-events: none; }
.ab-stat-group { display: flex; align-items: center; flex: 1 1 520px; max-width: 640px; }
.ab-stat { flex: 1; display: flex; align-items: center; gap: .8rem; min-width: 0; }
.ab-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ab-stats .ab-link { color: #9fe3dc; }
.ab-stats .ab-link:hover { color: #fff; }
.ab-stats .btn-light { color: var(--primary); font-weight: 600; }
.ab-stat + .ab-stat { border-left: 1px solid rgba(255, 255, 255, .15); padding-left: 1.25rem; margin-left: 1.25rem; }
.ab-stat > i { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; color: #9fe3dc; background: rgba(255, 255, 255, .1); }
.ab-stat strong { display: block; font-family: var(--font-head); font-size: 1.75rem; line-height: 1; }
.ab-stat span { display: block; margin-top: .2rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #9fb2cc; }
.ab-link { font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; }
.ab-link i { transition: transform .25s var(--ease-out); }
.ab-link:hover i { transform: translateX(4px); }

@media (max-width: 991.98px) {
  .ab-visual { max-width: 500px; }
}
@media (max-width: 575.98px) {
  .ab-visual { padding: 1.75rem .5rem 2.5rem; }
  .ab-seal { width: 84px; height: 84px; font-size: 1.3rem; border-width: 3px; }
  .ab-badge { padding: .5rem .75rem .5rem .55rem; gap: .55rem; }
  .ab-badge .ic { width: 32px; height: 32px; font-size: .95rem; }
  .ab-badge strong { font-size: .8rem; }
  .ab-badge small { display: none; }
  .ab-features { grid-template-columns: 1fr; }
  .ab-stats { padding: 1.1rem .9rem; margin-top: 2.25rem; }
  .ab-actions { width: 100%; flex-direction: column-reverse; }
  .ab-actions .btn { width: 100%; }
  .ab-stat { flex-direction: column; text-align: center; gap: .45rem; }
  .ab-stat + .ab-stat { padding-left: .5rem; margin-left: .5rem; }
  .ab-stat > i { width: 34px; height: 34px; font-size: .95rem; }
  .ab-stat strong { font-size: 1.45rem; }
}
/* journals / articles headers: picture above the stat boxes */
.hero-art-top { display: none; }
@media (min-width: 992px) {
  .hero-art-top { display: block; width: 100%; max-width: 340px; max-height: 210px; object-fit: contain; margin: -1rem auto .25rem; filter: drop-shadow(0 20px 40px rgba(4, 16, 34, .35)); }
}

/* ---------- animations always run: undo Bootstrap's reduced-motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .carousel-item { transition: transform .6s ease-in-out; }
  .carousel-fade .carousel-item { transition-property: opacity; }
  .carousel-fade .active.carousel-item-start, .carousel-fade .active.carousel-item-end { transition: opacity 0s .6s; }
  .carousel-indicators [data-bs-target] { transition: opacity .6s ease; }
  .fade { transition: opacity .15s linear; }
  .collapsing { transition: height .35s ease; }
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding: 1rem 0; }
  .site-nav .nav-link { padding: .6rem .5rem !important; }
  .quick-links .grid { grid-template-columns: repeat(2, 1fr); }
  .quick-link:nth-child(2) { border-right: 0; }
  .quick-link:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .hero .carousel-item { padding: 4rem 0 1.75rem; }
  .section { padding: 3.75rem 0; }
}
@media (max-width: 575.98px) {
  .quick-links .grid { grid-template-columns: 1fr; }
  .quick-link { border-right: 0; border-bottom: 1px solid var(--border); padding: 1.1rem 1.25rem; }
  .quick-link:last-child { border-bottom: 0; }
  .cta-band { padding: 2rem 1.5rem; }
}

/* ==========================================================================
   Mobile & tablet experience (< 992px): compact layouts, swipe rows, touch motion
   ========================================================================== */

/* ---------- animated burger (all widths where it shows) ---------- */
.burger { position: relative; display: block; width: 24px; height: 18px; }
.burger span { position: absolute; left: 0; height: 2px; width: 100%; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease-out), opacity .25s ease, width .3s ease, top .3s ease; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 8px; width: 70%; }
.burger span:nth-child(3) { top: 16px; }
.navbar-toggler:hover .burger span:nth-child(2) { width: 100%; }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.navbar-toggler[aria-expanded="true"] .burger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
.nav-ic, .nav-go { display: none; }

/* hero highlight pills (phones/tablets only; the desktop picture panel is hidden there) */
.hero-mchips { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-mchips li { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .85rem .42rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #e6f6f4; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.hero-mchips i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #0f1e36; background: #9fe3dc; }

/* swipe-row dots (built by site.js) */
.swipe-dots { display: none; }

@media (max-width: 991.98px) {
  /* menu: full-width panel, staggered links with icons */
  .site-nav .navbar-collapse { padding: .5rem 0 1.25rem; }
  .site-nav .navbar-nav { gap: .2rem; padding-top: .5rem; border-top: 1px solid var(--border); margin-top: .75rem; }
  .site-nav .nav-link { display: flex; align-items: center; gap: .85rem; padding: .7rem .85rem !important; border-radius: 12px; font-size: 1rem; }
  .nav-ic { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; color: var(--primary); background: var(--primary-50); transition: transform .35s var(--ease-back), background .25s, color .25s; }
  .nav-go { display: block !important; margin-left: auto; font-size: .8rem; opacity: .35; transition: transform .25s var(--ease-out), opacity .25s; }
  .site-nav .nav-link:active .nav-ic, .site-nav .nav-link:hover .nav-ic { transform: scale(1.08) rotate(-6deg); }
  .site-nav .nav-link:hover .nav-go { transform: translateX(3px); opacity: .8; }
  .site-nav .nav-link.active { background: var(--primary-50); position: relative; }
  .site-nav .nav-link.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent); }
  .site-nav .nav-link.active .nav-ic { color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); }
  .navbar-collapse.collapsing .nav-item, .navbar-collapse.show .nav-item { animation: navIn .45s var(--ease-out) backwards; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
  .navbar-collapse.collapsing .nav-actions, .navbar-collapse.show .nav-actions { animation: navIn .45s var(--ease-out) .36s backwards; }
  @keyframes navIn { from { opacity: 0; transform: translateX(-18px); } }

  /* hero */
  .hero .carousel-item { padding: 3.25rem 0 1.75rem; }
  .hero p.lead { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-controls { padding-bottom: 4.25rem; }

}

/* journals: subject chips as an even tile grid that lines up with the card columns below */
@media (min-width: 768px) {
  .chip-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem !important; }
  .chip-row .chip { justify-content: space-between; gap: .75rem; padding: .7rem .8rem .7rem 1.1rem; border-radius: 12px; font-size: .9rem; min-width: 0; }
  .chip-row .chip .count { flex-shrink: 0; min-width: 26px; height: 22px; display: inline-grid; place-items: center; font-weight: 600; }
}
@media (min-width: 992px) {
  .chip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem !important; }
}

@media (max-width: 767.98px) {
  .section { padding: 3.25rem 0; }
  .section-title { font-size: 1.65rem; }

  /* journals: subject chips become one swipeable line, first chip aligned with the heading */
  .chip-row { flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: .25rem 12px .5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip-row .chip { flex: 0 0 auto; scroll-snap-align: start; }

  /* journal cards: horizontal swipe carousel with a peek of the next card */
  .jr-swipe { position: relative; --bs-gutter-x: .9rem; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; }
  .jr-swipe::-webkit-scrollbar { display: none; }
  .jr-swipe > * { flex: 0 0 84%; max-width: 84%; scroll-snap-align: center; }
  .jr-swipe .journal-card { transition: transform .45s var(--ease-out), opacity .45s ease, box-shadow .35s ease; }
  .jr-swipe.swipe-on > :not(.is-current) .journal-card { transform: scale(.94); opacity: .6; }
  .swipe-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; }
  .swipe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: #cbd5e1; transition: width .35s var(--ease-out), background .3s; }
  .swipe-dots button.on { width: 26px; background: var(--accent); }
  .journals-head .btn { padding: .45rem 1rem; font-size: .88rem; }

  /* article cards: tighter cards */
  .rf-card { padding: 1rem 1.05rem .95rem; }
}

@media (max-width: 575.98px) {
  /* hero: side-by-side buttons, one-line chips, swipe instead of arrows */
  .hero .carousel-item .d-flex.flex-wrap.gap-2 { flex-wrap: nowrap !important; }
  .hero .carousel-item .btn-lg { flex: 1 1 0; min-width: 0; padding: .7rem .6rem; font-size: .92rem; white-space: nowrap; }
  .hero .carousel-item .btn-lg .bi { display: none; }
  .hero-mchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -12px; padding-right: 12px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  .hero-mchips::-webkit-scrollbar { display: none; }
  .hero-mchips li { flex: 0 0 auto; font-size: .76rem; }
  .hero-arrows { display: none !important; }
  .hero-controls { padding-bottom: 3.75rem; }
  .hero .carousel-item { padding: 2.75rem 0 1.5rem; }

  /* quick links: 2 x 2 tiles */
  .quick-links { margin-top: -2.75rem; }
  .quick-links .grid { grid-template-columns: repeat(2, 1fr); }
  .quick-link { position: relative; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem 1.1rem; border-bottom: 0; }
  .quick-link:nth-child(odd) { border-right: 1px solid var(--border); }
  .quick-link:nth-child(even) { border-right: 0; }
  .quick-link:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .quick-link .num { font-size: 1.3rem; line-height: 1; }
  .quick-link strong { font-size: .86rem; line-height: 1.3; }
  .quick-link i { position: absolute; top: 1rem; right: 1rem; }

  /* about: icon-left feature rows */
  .ab-feature { display: grid; grid-template-columns: 44px 1fr; column-gap: .9rem; align-items: start; padding: .95rem 1rem; }
  .ab-feature .ic { grid-row: span 2; margin: 0; }
  .ab-feature h3 { margin: .1rem 0 .2rem; font-size: .96rem; }
  .ab-features { gap: .7rem; }

}

/* very small phones: keep the brand and menu button on one line */
@media (max-width: 399.98px) {
  .site-nav .navbar-brand { margin-right: .5rem !important; min-width: 0; }
  .site-nav .brand-text { font-size: .98rem; }
  .site-nav .brand-text small { font-size: .6rem; letter-spacing: .06em; }
  .site-nav .brand-mark { width: 50px; height: 35px; }
}

/* ---------- footer layout: help strip, centred watermark, aligned bottom bar ---------- */
.site-footer .ft-help { display: flex; align-items: center; gap: 1.25rem; margin-top: 2.75rem; padding: 1.35rem 1.6rem; }
.site-footer .ft-help-ic { margin-bottom: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 1.3rem; }
.site-footer .ft-help-text { flex: 1; min-width: 0; position: relative; }
.site-footer .ft-help h6 { margin-bottom: .2rem; font-size: 1.05rem; }
.site-footer .ft-help p { margin: 0; }
.site-footer .ft-help .btn { flex-shrink: 0; position: relative; padding: .6rem 1.4rem; font-weight: 600; }
.ft-journals a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
.ft-journals a::before { display: inline-block; vertical-align: -1px; }
.ft-watermark { text-align: center; font-size: min(8.5vw, 8.2rem); margin-top: 2.75rem; }
@media (max-width: 991.98px) {
  .ft-journals a { white-space: normal; }
}
@media (max-width: 767.98px) {
  .ft-watermark { white-space: normal; font-size: 11.5vw; line-height: 1; background-size: 70% 100%; }
}
@media (max-width: 575.98px) {
  .site-footer .ft-help { flex-wrap: wrap; padding: 1.2rem; gap: .9rem 1rem; }
  .site-footer .ft-help-text { flex: 1 1 calc(100% - 64px); }
  .site-footer .ft-help .btn { width: 100%; }
  .footer-bottom .container { align-items: center !important; text-align: center; }
  .ft-bottom-links { justify-content: center; }
}

/* touch feedback: a quick press-in on tappable cards */
@media (hover: none) {
  .journal-card:active, .ab-feature:active, .quick-link:active, .rf-card:active, .side-links a:active, .chip:active { transform: scale(.97); transition-duration: .12s; }
}

/* ==========================================================================
   Journal page: side "Journal Menu" + section panels (journal.php)
   ========================================================================== */
.article-item .type.type-inpress { color: #9a5b00; background: #fff3dc; }
.jn-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; color: #9fe3dc; margin-bottom: .6rem; }
.jn-eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); }
.jn-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.jn-pills span { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .85rem; border-radius: 999px; font-size: .82rem; color: #dbe7f3; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); }
.jn-pills i { color: #9fe3dc; }
.jn-layout { padding: 3rem 0 5rem; background: linear-gradient(180deg, var(--bg), var(--surface) 420px); }

/* side menu */
.jn-side { position: sticky; top: 96px; }
.jn-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.25rem; }
.jn-menu-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; color: #fff; font-weight: 700; font-size: .98rem; letter-spacing: .02em; background: linear-gradient(135deg, var(--ink), var(--primary) 70%, var(--accent)); background-size: 200% 100%; animation: jnHeadShift 8s ease-in-out infinite alternate; }
.jn-menu-head i { color: #9fe3dc; }
.jn-menu-head::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); animation: jnShine 5s ease-in-out 1s infinite; }
.jn-menu ul { list-style: none; margin: 0; padding: .5rem; }
.jn-menu li { animation: jnItemIn .6s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 55ms + 150ms); }
.jn-menu li.sep { height: 1px; margin: .45rem .75rem; background: var(--border); animation: none; }
.jn-menu a { position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: 10px; color: var(--ink-2); font-size: .92rem; font-weight: 500; transition: background .25s ease, color .25s ease, padding .3s var(--ease-out); }
.jn-menu a::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), var(--primary)); transform: scaleY(0); transition: transform .35s var(--ease-out); }
.jn-menu a:hover { background: var(--primary-50); color: var(--primary); padding-left: 1rem; }
.jn-menu a.active { background: linear-gradient(90deg, var(--primary-50), rgba(232, 242, 246, 0)); color: var(--primary); font-weight: 600; }
.jn-menu a:hover::before, .jn-menu a.active::before { transform: scaleY(1); }
.jn-menu .ic { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; font-size: 1rem; background: var(--bg); color: var(--primary); transition: transform .45s var(--ease-back), background .25s ease, color .25s ease, box-shadow .25s ease; }
.jn-menu a:hover .ic, .jn-menu a.active .ic { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; transform: rotate(-8deg) scale(1.06); box-shadow: 0 6px 14px rgba(11, 92, 122, .28); }
.jn-menu a.cta .ic { background: var(--accent-50); color: var(--accent); }
.jn-menu a.cta:hover .ic { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; }
.jn-menu .lb { flex: 1; min-width: 0; }
.jn-menu .ct { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--accent); color: #fff; }
.jn-menu .go { font-size: .72rem; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .3s var(--ease-out); }
.jn-menu a:hover .go, .jn-menu a.active .go { opacity: .7; transform: none; }
.jn-info { animation: jnItemIn .7s var(--ease-out) .7s backwards; }

/* content panel */
.jn-panel { animation: jnPanelIn .7s var(--ease-out) .1s backwards; }
.jn-head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.1rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); position: relative; }
.jn-head::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 80px; background: linear-gradient(90deg, var(--accent), var(--primary)); animation: jnGrow .9s var(--ease-out) .35s backwards; }
.jn-head-ic { width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 10px 22px rgba(11, 92, 122, .28); animation: jnPop .7s var(--ease-back) .2s backwards; }
.jn-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 0; }
.jn-head p { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }
.jn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; transition: box-shadow .3s ease, transform .3s var(--ease-out), opacity .6s ease; }
.jn-card:hover { box-shadow: var(--shadow); }
.jn-card h3 { font-family: var(--font-body, inherit); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: .75rem; }
.jn-card p { color: var(--ink-2); line-height: 1.7; }
.jn-panel .reveal { transition-delay: calc(var(--i, 0) * 80ms); }

.jn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.jn-stat { position: relative; overflow: hidden; padding: 1.1rem 1.15rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .35s var(--ease-out), box-shadow .35s ease, opacity .6s ease; }
.jn-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: var(--primary-50); transition: transform .5s var(--ease-out); }
.jn-stat:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.jn-stat:hover::after { transform: scale(1.6); }
.jn-stat i { position: relative; z-index: 1; font-size: 1.2rem; color: var(--accent); }
.jn-stat strong { position: relative; z-index: 1; display: block; font-family: var(--font-head); font-size: 1.7rem; color: var(--ink); line-height: 1.1; margin-top: .4rem; }
.jn-stat span { position: relative; z-index: 1; font-size: .8rem; color: var(--muted); }

.jn-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.jn-quick-item { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; transition: border-color .25s ease, box-shadow .25s ease, transform .3s var(--ease-out), opacity .6s ease; }
.jn-quick-item > i:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-50); color: var(--primary); transition: transform .45s var(--ease-back); }
.jn-quick-item .go { margin-left: auto; color: var(--muted); transition: transform .3s var(--ease-out), color .25s ease; }
.jn-quick-item:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--primary); }
.jn-quick-item:hover > i:first-child { transform: rotate(-10deg) scale(1.1); }
.jn-quick-item:hover .go { transform: translateX(4px); color: var(--primary); }

.jn-panel .article-item { position: relative; padding: 1.2rem 1.4rem; margin-bottom: .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); animation: jnPanelIn .6s var(--ease-out) backwards; transition: box-shadow .3s ease, transform .3s var(--ease-out), border-color .3s ease; }
.jn-panel .article-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius) 0 0 var(--radius); background: linear-gradient(180deg, var(--accent), var(--primary)); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease-out); }
.jn-panel .article-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15, 30, 54, .1); border-color: transparent; }
.jn-panel .article-item:hover::before { transform: scaleY(1); transform-origin: top; }
.jn-panel .article-item:first-child { padding-top: 1.2rem; }
.jn-panel .article-item:nth-of-type(2) { animation-delay: .08s; }
.jn-panel .article-item:nth-of-type(3) { animation-delay: .16s; }
.jn-panel .article-item:nth-of-type(4) { animation-delay: .24s; }
.jn-panel .article-item:nth-of-type(n+5) { animation-delay: .32s; }

.jn-checks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.jn-checks li { position: relative; padding-left: 1.9rem; color: var(--ink-2); }
.jn-checks li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; font-size: .8rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); }
.jn-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.jn-tags span { padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--primary); background: var(--primary-50); border: 1px solid transparent; animation: jnPop .5s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 60ms + .3s); transition: background .25s ease, color .25s ease, transform .25s ease; }
.jn-tags span:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }

.jn-board { display: grid; gap: 1rem; }
.jn-person { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); transition: box-shadow .3s ease, transform .3s var(--ease-out), opacity .6s ease; }
.jn-person:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.jn-person .av { position: relative; width: 64px; height: 64px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--primary)); }
.jn-person.lead-person .av::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px dashed rgba(20, 163, 154, .5); animation: spinSlow 14s linear infinite; }
.jn-person small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 700; }
.jn-person strong { display: block; font-size: 1.08rem; color: var(--ink); }
.jn-person span:not(.av) { font-size: .86rem; color: var(--muted); }
.jn-person.invite { border-style: dashed; background: var(--bg); }
.jn-board-group { margin-bottom: 1.5rem; }
.jn-board-role { display: flex; align-items: center; gap: .75rem; font-family: var(--font-body, inherit); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .85rem; }
.jn-board-role::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.jn-board.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.jn-board.cols .jn-person { align-items: flex-start; padding: 1.1rem 1.2rem; }
.jn-board.cols .jn-person .av { width: 50px; height: 50px; font-size: 1.05rem; }
.jn-person-tx { min-width: 0; }
.jn-person-tx span { display: block; }
.jn-profile { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .8rem; font-weight: 600; }
.jn-profile i { font-size: .7rem; transition: transform .25s ease; }
.jn-profile:hover i { transform: translate(2px, -2px); }
.jn-person.invite .av { background: var(--surface); color: var(--primary); border: 2px dashed var(--border); font-size: 1.2rem; }

.jn-issue-banner { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; margin-bottom: 1.25rem; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, var(--ink), var(--primary)); box-shadow: var(--shadow); }
.jn-issue-banner strong { display: block; font-size: 1.1rem; }
.jn-issue-banner span:not(.jn-issue-badge) { font-size: .85rem; color: #c9d6e8; }
.jn-issue-badge { width: 58px; height: 58px; flex-shrink: 0; display: grid; place-content: center; text-align: center; border-radius: 14px; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; line-height: 1; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); }
.jn-issue-badge small { font-family: var(--font-body, inherit); font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #9fe3dc; margin-bottom: .15rem; }
.jn-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; }
.jn-back i { transition: transform .25s ease; }
.jn-back:hover i { transform: translateX(-4px); }

.jn-volume { margin-bottom: 1.75rem; transition: opacity .6s ease, transform .6s var(--ease-out); }
.jn-volume h3 { display: flex; align-items: baseline; gap: .75rem; font-size: 1.15rem; margin-bottom: .85rem; }
.jn-volume h3 small { font-family: var(--font-body, inherit); font-size: .8rem; font-weight: 500; color: var(--muted); }
.jn-issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.jn-issue { position: relative; display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); overflow: hidden; transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--ease-out); }
.jn-issue .num { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--primary); background: var(--primary-50); transition: background .25s ease, color .25s ease; }
.jn-issue .tx { min-width: 0; }
.jn-issue strong { display: block; font-size: .95rem; }
.jn-issue small { color: var(--muted); font-size: .78rem; }
.jn-issue .go { margin-left: auto; color: var(--muted); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .3s var(--ease-out); }
.jn-issue:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--primary); }
.jn-issue:hover .num { background: linear-gradient(135deg, var(--accent), var(--primary)); color: #fff; }
.jn-issue:hover .go { opacity: 1; transform: none; color: var(--primary); }

.jn-apply { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.5rem; padding: 1.6rem 1.75rem; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, var(--ink), var(--primary)); box-shadow: var(--shadow-lg); }
.jn-apply::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(20, 163, 154, .3); filter: blur(4px); animation: jnFloat 7s ease-in-out infinite; }
.jn-apply > * { position: relative; }
.jn-apply h3 { color: #fff; font-size: 1.25rem; margin-bottom: .3rem; }
.jn-apply p { color: #c9d6e8; margin: 0; max-width: 520px; }

@keyframes jnItemIn { from { opacity: 0; transform: translateX(-14px); } }
@keyframes jnPanelIn { from { opacity: 0; transform: translateY(18px); } }
@keyframes jnPop { from { opacity: 0; transform: scale(.6); } }
@keyframes jnGrow { from { width: 0; } }
@keyframes jnShine { 0% { left: -50%; } 40%, 100% { left: 130%; } }
@keyframes jnHeadShift { to { background-position: 100% 0; } }
@keyframes jnFloat { 50% { transform: translate(-20px, 16px) scale(1.08); } }

@media (max-width: 1199.98px) {
  .jn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .jn-layout { padding-top: 1.5rem; }
  .jn-side { position: static; }
  .jn-menu { margin-bottom: .5rem; }
  .jn-menu-head { padding: .7rem 1rem; font-size: .9rem; }
  .jn-menu ul { display: flex; gap: .45rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: .65rem; }
  .jn-menu ul::-webkit-scrollbar { display: none; }
  .jn-menu li { flex: 0 0 auto; scroll-snap-align: start; }
  .jn-menu li.sep { display: none; }
  .jn-menu a { white-space: nowrap; gap: .5rem; padding: .35rem .85rem .35rem .35rem; border: 1px solid var(--border); border-radius: 999px; font-size: .86rem; }
  .jn-menu a:hover { padding-left: .35rem; }
  .jn-menu a::before, .jn-menu .go { display: none; }
  .jn-menu .ic { width: 28px; height: 28px; border-radius: 50%; font-size: .85rem; }
  .jn-menu a:hover .ic, .jn-menu a.active .ic { transform: none; box-shadow: none; }
  .jn-menu a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .jn-menu a.active .ic { background: rgba(255, 255, 255, .2); }
}
@media (max-width: 575.98px) {
  .jn-quick { grid-template-columns: 1fr; }
  .jn-stats { gap: .65rem; }
  .jn-stat { padding: .9rem; }
  .jn-stat strong { font-size: 1.4rem; }
  .jn-card { padding: 1.2rem; }
  .jn-person { flex-wrap: wrap; }
  .jn-person.invite .btn { margin-left: 0 !important; width: 100%; }
  .jn-apply { padding: 1.3rem; }
  .jn-apply .btn { width: 100%; }
}

/* ==========================================================================
   Article page: full text laid out like the journal PDF
   ========================================================================== */
.paper-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: .75rem 0; }
.paper-bar .breadcrumb { font-size: .85rem; }
.paper-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.paper-section { padding-top: 2rem; background: #eef2f5; }
.paper { --paper-ink: #1b1f24; --paper-rule: var(--accent); background: #fff; color: var(--paper-ink); max-width: 860px; margin: 0 auto; padding: 3rem 3.25rem 2rem; box-shadow: 0 1px 3px rgba(15, 30, 54, .08), 0 12px 32px rgba(15, 30, 54, .08); border-radius: 4px; font-family: var(--font-head); font-size: 1rem; line-height: 1.6; }
.paper-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 5px solid var(--paper-rule); margin-bottom: 1.75rem; }
.paper-type { font-weight: 700; font-size: 1rem; align-self: flex-start; }
.paper-brand { display: flex; align-items: flex-end; gap: 1.25rem; text-align: right; }
.paper-journal { font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--primary); }
.paper-pub { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-family: var(--font-body); font-size: .62rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; max-width: 110px; text-align: center; line-height: 1.2; }
.paper-pub img { width: 60px; height: auto; }
.paper-title { font-family: var(--font-head); font-weight: 400; font-size: 2.3rem; line-height: 1.2; color: var(--paper-ink); margin: 0 0 .9rem; letter-spacing: -.01em; hyphens: auto; }
.paper-authors { text-align: center; font-weight: 700; font-size: 1rem; margin-bottom: .9rem; }
.paper-authors sup { font-size: .65em; margin-left: 1px; }
.paper-affil { list-style: none; padding: 0; margin: 0 0 1rem; font-style: italic; font-size: .92rem; line-height: 1.45; }
.paper-affil sup { font-style: normal; margin-right: 2px; }
.paper-dates { text-align: center; font-size: .88rem; padding-bottom: 1.1rem; margin-bottom: 1.25rem; border-bottom: 1px solid #333; }
.paper-abstract { margin-bottom: 1.5rem; text-align: justify; }
.paper-abstract h2 { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; text-align: center; margin-bottom: .6rem; }
.paper-abstract p { margin-bottom: .7rem; }
.paper-kw { margin-top: .4rem; }
.paper-body { text-align: justify; hyphens: auto; }
.paper-body h2 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; margin: 1.4rem 0 .7rem; break-after: avoid; text-align: left; }
.paper-body h3 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; margin: 1.1rem 0 .6rem; break-after: avoid; text-align: left; }
.paper-body > h2:first-of-type { margin-top: 0; }
.paper-body p { margin-bottom: .75rem; text-indent: 1.5em; }
.paper-body h2 + p, .paper-body h3 + p { text-indent: 1.5em; }
.paper-body ul { margin-bottom: .75rem; padding-left: 1.4rem; }
.paper-notes { font-size: .8rem; line-height: 1.45; border-top: 1px solid #333; padding-top: .5rem; margin-bottom: 1.25rem; break-inside: avoid; text-align: left; }
.paper-notes p { text-indent: 0 !important; margin-bottom: .35rem; }
.paper-notes a { color: inherit; text-decoration: underline; word-break: break-all; }
.paper-figure { margin: .75rem 0 1.4rem; break-inside: avoid; column-span: all; }
.paper-figure img { max-height: 520px; object-fit: contain; }
.paper-figure img { display: block; width: 100%; height: auto; border-radius: 2px; }
.paper-figure figcaption { font-size: .82rem; line-height: 1.45; margin-top: .45rem; text-align: justify; }
.paper-refs { padding-left: 1.6rem; font-size: .88rem; line-height: 1.45; text-align: left; }
.paper-refs li { margin-bottom: .45rem; padding-left: .2rem; break-inside: avoid; }
.paper-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .78rem; color: #555; }
@media (min-width: 992px) {
  .paper-body { columns: 2; column-gap: 2.2rem; }
  .paper-body h2, .paper-body h3 { break-inside: avoid; }
}
@media (max-width: 767.98px) {
  .paper { padding: 1.5rem 1.1rem 1.25rem; font-size: .95rem; }
  .paper-head { flex-direction: column; align-items: stretch; }
  .paper-brand { justify-content: space-between; text-align: left; }
  .paper-journal { font-size: 1.1rem; }
  .paper-title { font-size: 1.6rem; }
  .paper-section { padding-top: 1rem; }
}
@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }
  .paper-bar, .article-aside, .back-to-top, .read-progress { display: none !important; }
  body, .paper-section { background: #fff !important; }
  .paper-section { padding: 0 !important; }
  .paper-section .container, .paper-section .row, .paper-section .col-xl-9 { max-width: none; width: 100%; padding: 0; margin: 0; flex: none; }
  .paper { box-shadow: none; border-radius: 0; padding: 0; max-width: none; font-size: 10.5pt; line-height: 1.45; }
  .paper-title { font-size: 22pt; }
  .paper-journal { font-size: 15pt; }
  .paper-body { columns: 2; column-gap: 7mm; }
  .paper-figure img { max-height: 78mm; }
  .paper-refs { font-size: 8.6pt; line-height: 1.35; }
  .paper-refs li { margin-bottom: 1.2mm; }
  .paper-notes { break-inside: auto; }
  .paper-foot { display: none; }
  .paper a { color: inherit; text-decoration: none; }
  .paper-head, .paper-dates { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* article lists: "View PDF" under the short abstract (above the card's stretched title link) */
.pdf-link-row { position: relative; z-index: 2; margin: 0 0 .8rem; }
.article-item .pdf-link-row { margin: .6rem 0 0; }
.btn-view-pdf { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 8px; font-size: .8rem; font-weight: 600; line-height: 1.3; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn-view-pdf .bi { font-size: .95rem; }
.btn-view-pdf:hover, .btn-view-pdf:focus-visible { color: #fff; background: #d92d20; border-color: #d92d20; transform: translateY(-1px); }

/* article.php?view=pdf: the journal pages alone, on a PDF-reader background */
body.pdf-view { background: #525659; }
.pdf-view .topbar, .pdf-view .site-nav, .pdf-view .site-footer, .pdf-view .paper-bar, .pdf-view .article-aside,
.pdf-view .back-to-top, .pdf-view .read-progress { display: none !important; }
.pdf-view .paper-section { background: transparent; padding: 4.75rem 0 3rem; }
.pdf-view .paper-section .col-xl-9 { flex: 0 0 100%; max-width: 100%; }
.pdf-view .paper { box-shadow: 0 4px 24px rgba(0, 0, 0, .45); border-radius: 0; }
.pdf-toolbar { position: fixed; inset: 0 0 auto 0; z-index: 1030; height: 52px; display: flex; align-items: center; gap: 1rem; padding: 0 1rem; background: #323639; color: #f1f3f4; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); font-size: .88rem; }
.pdf-tb-back, .pdf-tb-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 6px; color: #f1f3f4; background: transparent; border: 0; font-weight: 500; }
.pdf-tb-back:hover, .pdf-tb-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pdf-tb-name { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-tb-name .bi { color: #f28b82; margin-right: .45rem; }
@media (max-width: 575.98px) { .pdf-tb-back span, .pdf-tb-btn span { display: none; } .pdf-view .paper-section { padding-top: 4rem; } }
@media print { .pdf-toolbar { display: none !important; } body.pdf-view { background: #fff; } .pdf-view .paper-section { padding: 0 !important; } .pdf-view .paper { box-shadow: none; } }

/* ==========================================================================
   Article page (web reading layout; View PDF keeps the journal paper above)
   ========================================================================== */
.art-head { position: relative; padding: 2.25rem 0 2.5rem; background: radial-gradient(700px 300px at 100% 0, rgba(20, 163, 154, .10), transparent 70%), linear-gradient(180deg, #f3f8fa, #fff); border-bottom: 1px solid var(--border); }
.art-head .breadcrumb { font-size: .84rem; margin-bottom: 1.25rem; }
.art-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.art-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.art-chip-type { background: var(--primary); color: #fff; }
.art-chip-oa { background: #fff4e5; color: #b54708; border: 1px solid #fedf89; }
.art-chip-press { background: var(--accent-50); color: #0e7a73; border: 1px solid rgba(20, 163, 154, .25); }
.art-title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.55rem); line-height: 1.22; letter-spacing: -.015em; color: var(--ink); max-width: 980px; margin-bottom: 1rem; }
.art-authors { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; font-size: 1.02rem; font-weight: 600; color: var(--ink-2); margin-bottom: .75rem; }
.art-authors .au { display: inline-flex; align-items: baseline; }
.art-authors .au .bi { color: var(--accent); font-size: .95rem; align-self: center; margin-right: .35rem; }
.art-authors sup { color: var(--accent); font-weight: 700; margin-left: 1px; }
.art-affil { max-width: 980px; margin-bottom: 1.25rem; font-size: .88rem; color: var(--ink-2); }
.art-affil summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--primary); font-weight: 600; list-style: none; }
.art-affil summary::-webkit-details-marker { display: none; }
.art-affil summary::after { content: "\F282"; font-family: bootstrap-icons; font-size: .75rem; transition: transform .2s ease; }
.art-affil[open] summary::after { transform: rotate(180deg); }
.art-affil ol { list-style: none; padding: .75rem 0 .25rem; margin: 0; }
.art-affil li { margin-bottom: .2rem; }
.art-affil li sup { color: var(--accent); font-weight: 700; margin-right: .3rem; }
/* publication details card beside the title, lined up with the sidebar below */
.art-info { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 30, 54, .06); overflow: hidden; }
.art-info-head { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--primary-50); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.art-info-head .bi { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: .95rem; }
.art-info-head a { color: var(--primary); }
.art-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.art-meta > div { padding: .75rem 1.2rem; border-bottom: 1px solid var(--border); min-width: 0; }
.art-meta > div:nth-child(odd):not(.art-meta-wide) { border-right: 1px solid var(--border); }
.art-meta > div:last-child { border-bottom: 0; }
.art-meta .art-meta-wide { grid-column: 1 / -1; }
.art-meta > div:nth-child(odd):not(.art-meta-wide):is(:last-child, :has(+ .art-meta-wide)) { grid-column: 1 / -1; border-right: 0; }
.art-meta dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .15rem; }
.art-meta dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.art-meta dd a { color: var(--primary); }
.art-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.art-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 992px) { .art-info { margin-top: 2.6rem; } }
@media (max-width: 575.98px) {
  .art-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .art-actions .art-act-main { grid-column: 1 / -1; }
  .art-actions .btn { padding-left: .5rem; padding-right: .5rem; font-size: .85rem; }
}

.art-main { padding: 2.5rem 0 4rem; }
.art-abstract { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.35rem; margin-bottom: 2.25rem; scroll-margin-top: 96px; }
.art-abstract h2 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin-bottom: .9rem; }
.art-abstract p { font-size: 1rem; line-height: 1.75; color: var(--ink-2); margin-bottom: .8rem; }
.art-abstract p strong { color: var(--ink); }
.art-kw { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.art-kw span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: .35rem; }
.art-kw a { padding: .25rem .65rem; border-radius: 6px; background: var(--primary-50); color: var(--primary); font-size: .84rem; font-weight: 500; transition: background .2s, color .2s; }
.art-kw a:hover { background: var(--primary); color: #fff; }

.art-body, .art-section { font-family: var(--font-head); font-size: 1.08rem; line-height: 1.8; color: #1f2a37; }
.art-body h2, .art-section h2, .art-cite h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 2.25rem 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); scroll-margin-top: 96px; }
.art-body h2:first-child { margin-top: 0; }
.art-body h3, .art-section h3 { font-family: var(--font-head); font-size: 1.18rem; font-weight: 600; color: var(--ink); margin: 1.6rem 0 .6rem; scroll-margin-top: 96px; }
.art-body p, .art-section p { margin-bottom: 1.05rem; }
.art-body ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.art-body li { margin-bottom: .35rem; }
.art-body li::marker { color: var(--accent); }
.art-body .paper-figure { margin: 1.75rem 0 2rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.art-body .paper-figure img { border-radius: 6px; max-height: 560px; object-fit: contain; background: #fff; }
.art-body .paper-figure .fig-zoom { display: block; cursor: zoom-in; }
.art-body .paper-figure figcaption { font-family: var(--font-body); font-size: .88rem; line-height: 1.55; color: var(--ink-2); margin-top: .75rem; text-align: left; }
.art-body .paper-figure figcaption strong { color: var(--primary); }

/* figure layout chosen in the admin panel: width, alignment, one column or across both */
.paper-figure:is(.fig-left, .fig-center, .fig-right) { width: var(--fig-w, 100%); max-width: 100%; }
.paper-figure.fig-center { margin-left: auto; margin-right: auto; }
.paper-figure.fig-left { margin-left: 0; margin-right: auto; }
.paper-figure.fig-right { margin-left: auto; margin-right: 0; }
.paper-figure.fig-span-column { column-span: none; }
@media (max-width: 575.98px) { .paper-figure:is(.fig-left, .fig-center, .fig-right) { width: 100%; } }
.art-nofull { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.art-nofull > .bi { font-size: 1.6rem; color: var(--primary); }
.art-nofull strong, .art-nofull span { display: block; }
.art-nofull span { font-size: .88rem; color: var(--muted); }
.art-refs { padding-left: 1.75rem; font-family: var(--font-body); font-size: .9rem; line-height: 1.6; color: var(--ink-2); }
.art-refs li { margin-bottom: .6rem; padding-left: .35rem; }
.art-refs li::marker { color: var(--primary); font-weight: 700; }
.art-cite { margin-top: 2.5rem; padding: 1.4rem 1.5rem; border-radius: var(--radius); background: #f6f9fb; border: 1px solid var(--border); scroll-margin-top: 96px; }
.art-cite-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.art-cite h2 { font-size: 1.15rem; margin: 0; padding: 0; border: 0; }
.art-cite #citation { font-size: .92rem; color: var(--ink); margin-bottom: .9rem; }
.art-license { display: flex; gap: .6rem; font-size: .82rem; color: var(--muted); margin: 0; }
.art-license .bi { font-size: 1.1rem; color: var(--primary); }

.art-sticky { position: sticky; top: 96px; }
.art-toc ol { list-style: none; margin: 0; padding: 0; }
.art-toc li a { display: block; padding: .42rem .7rem; border-left: 2px solid var(--border); color: var(--ink-2); font-size: .9rem; transition: color .2s, border-color .2s, background .2s; }
.art-toc li a:hover, .art-toc li a.active { color: var(--primary); border-left-color: var(--accent); background: var(--primary-50); }
.art-pdf-card { display: flex; align-items: center; gap: .85rem; }
.art-pdf-card strong, .art-pdf-card span { display: block; }
.art-pdf-card span { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-pdf-icon { flex: 0 0 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fef3f2; color: #d92d20; font-size: 1.35rem; }
.min-w-0 { min-width: 0; }
@media (max-width: 991.98px) { .art-sticky { position: static; } .art-toc { display: none; } }
@media (max-width: 575.98px) { .art-head { padding-top: 1.5rem; } .art-abstract { padding: 1.2rem; } .art-body, .art-section { font-size: 1.02rem; } }

/* admin preview of an unpublished article */
.preview-banner { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .55rem 1rem; background: #fffaeb; color: #93370d; border-bottom: 1px solid #fedf89; font-size: .88rem; }
.pdf-view .preview-banner { position: fixed; top: 52px; left: 0; right: 0; z-index: 1029; }
@media print { .preview-banner { display: none !important; } }
.pdf-view .preview-banner ~ .paper-section { padding-top: 7rem; }

/* embed=1: PDF pages inside the admin form preview */
.pdf-embed .paper-section { padding: 1.25rem .75rem !important; }
.pdf-embed .paper { font-size: .95rem; }
.art-meta .art-meta-count { background: #fbfdfe; }
.art-meta .art-meta-count dt { display: flex; align-items: center; gap: .35rem; }
.art-meta .art-meta-count dt .bi { font-size: .8rem; color: var(--accent); }
.art-meta .art-meta-count dd { font-size: 1.15rem; font-weight: 700; color: var(--primary); }

/* ---------- live chat widget (bottom right) ---------- */
.zchat { position: fixed; right: 20px; bottom: 20px; z-index: 1045; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-family: var(--font-body); }
.zchat[hidden] { display: none; }
body.has-chat .back-to-top { bottom: 88px; right: 28px; }
.zchat-launcher { position: relative; display: inline-flex; align-items: center; gap: .55rem; height: 56px; padding: 0 1.3rem 0 1.15rem; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; font-weight: 600; font-size: .95rem; box-shadow: 0 10px 28px rgba(11, 92, 122, .35); transition: transform .2s ease, box-shadow .2s ease; }
.zchat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 92, 122, .42); }
.zchat-launcher:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.zchat-launcher .bi { font-size: 1.3rem; }
.zchat-ic-close { display: none; }
.zchat.open .zchat-launcher { width: 56px; padding: 0; justify-content: center; }
.zchat.open .zchat-launcher-text, .zchat.open .zchat-ic-open { display: none; }
.zchat.open .zchat-ic-close { display: inline; font-size: 1.15rem; }
.zchat-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #d92d20; color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.zchat-badge[hidden] { display: none; }

.zchat-panel { width: 370px; max-width: calc(100vw - 32px); max-height: min(600px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 30, 54, .06); overflow: hidden; transform-origin: bottom right; transform: translateY(12px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; }
.zchat.open .zchat-panel { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
.zchat-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1rem 1rem 1.1rem; color: #fff; background: radial-gradient(240px 120px at 100% 0, rgba(255, 255, 255, .18), transparent 70%), linear-gradient(135deg, var(--primary), var(--accent)); }
.zchat-avatar { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); font-size: 1.15rem; }
.zchat-online { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #3ddc84; border: 2px solid var(--primary); }
.zchat-head-text { flex: 1; min-width: 0; }
.zchat-head h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.zchat-head p { margin: .1rem 0 0; font-size: .78rem; opacity: .85; }
.zchat-head-actions { display: flex; gap: .25rem; }
.zchat-icon-btn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .12); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.zchat-icon-btn:hover { background: rgba(255, 255, 255, .25); }
.zchat-icon-btn[hidden] { display: none; }

.zchat-start { padding: 1.1rem 1.15rem 1rem; overflow-y: auto; }
.zchat-start[hidden], .zchat-thread[hidden] { display: none; }
.zchat-intro { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .9rem; margin-bottom: 1rem; border-radius: 12px; background: var(--primary-50); font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
.zchat-intro strong { font-size: .95rem; color: var(--ink); }
.zchat-field { margin-bottom: .8rem; }
.zchat-field label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink); }
.zchat-field label span { color: #d92d20; }
.zchat-input { position: relative; }
.zchat-input .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.zchat-input input { width: 100%; height: 44px; padding: 0 .85rem 0 2.3rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: .92rem; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.zchat-input input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 163, 154, .18); }
.zchat-field.invalid input { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .12); }
.zchat-field.invalid .bi { color: #d92d20; }
.zchat-error { font-size: .76rem; color: #b42318; margin-top: .3rem; }
.zchat-error:empty { display: none; }
.zchat-form-error { margin: 0 0 .6rem; }
.zchat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zchat-submit { width: 100%; height: 46px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; transition: background .2s; }
.zchat-submit:hover { background: var(--primary-600); }
.zchat-submit:disabled { opacity: .7; }
.zchat-note { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: .75rem 0 0; font-size: .74rem; color: var(--muted); }

.zchat-thread { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.zchat-messages { flex: 1; min-height: 260px; overflow-y: auto; padding: 1rem; background: #f6f8fb; display: flex; flex-direction: column; gap: .65rem; }
.zchat-msg { display: flex; flex-direction: column; max-width: 84%; }
.zchat-bubble { padding: .6rem .8rem; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.zchat-meta { font-size: .68rem; color: var(--muted); margin-top: .2rem; }
.zchat-visitor { align-self: flex-end; align-items: flex-end; }
.zchat-visitor .zchat-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.zchat-staff, .zchat-system { align-self: flex-start; }
.zchat-staff .zchat-bubble { background: #fff; color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.zchat-system .zchat-bubble { background: var(--accent-50); color: var(--ink-2); border-bottom-left-radius: 4px; }
.zchat-compose { display: flex; align-items: flex-end; gap: .5rem; padding: .7rem .75rem; border-top: 1px solid var(--border); background: #fff; }
.zchat-compose textarea { flex: 1; resize: none; max-height: 120px; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 12px; font-size: .9rem; line-height: 1.4; }
.zchat-compose textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 163, 154, .18); }
.zchat-send { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.zchat-send:hover { background: var(--primary-600); }
.zchat-send-error { padding: 0 .9rem .6rem; background: #fff; margin: 0; }
@media (max-width: 575.98px) {
  .zchat { right: 12px; bottom: 12px; left: 12px; }
  .zchat-launcher-text { display: none; }
  .zchat-launcher { width: 56px; padding: 0; justify-content: center; }
  .zchat-panel { width: 100%; max-width: none; max-height: calc(100vh - 96px); }
  body.has-chat .back-to-top { right: 18px; bottom: 80px; }
}
@media (prefers-reduced-motion: reduce) { .zchat-panel, .zchat-launcher { transition: none; } }
@media print { .zchat { display: none !important; } }
/* the wrapper never blocks clicks on the page; only the button and the open panel take them */
.zchat { pointer-events: none; }
.zchat-launcher { pointer-events: auto; }
.zchat:not(.open) .zchat-panel { display: none; }