/* Journal listing. Uses the site's Plus Jakarta Sans, spacing and purple accent. */
.journal-listing { font-family: "Plus Jakarta Sans", sans-serif; }
.journal-listing svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.journal-listing a:focus-visible, .journal-listing button:focus-visible, .journal-listing input:focus-visible, .jl-showcase-stage:focus-visible { outline: 2px solid #6b56dc; outline-offset: 5px; }
.jl-grid-field { position: relative; z-index: 0; overflow: hidden; background: #fff; isolation: isolate; }
.jl-grid-field::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: .72; background-image: linear-gradient(rgba(20,18,26,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,18,26,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.75) 62%, transparent 88%); }
.jl-hero { padding: 64px 0 48px; background: transparent; }
.jl-hero-copy { text-align: center; }
.jl-hero h1 { font-size: clamp(44px, 4.8vw, 64px); font-weight: 650; line-height: 1.06; letter-spacing: -.06em; }
.jl-dek { margin: 20px auto 24px; max-width: 660px; font-size: 17px; line-height: 1.65; color: var(--muted); text-wrap: balance; }
.jl-hero .jl-hero-form { display: block; max-width: 472px; margin: 0 auto; }
.jl-hero-form .mvp-newsletter-input { border-color: #dedde3; background: #fff; box-shadow: 0 4px 16px rgba(20,16,30,.04); backdrop-filter: none; }
.jl-hero-form .mvp-newsletter-input input { color: var(--ink); }
.jl-hero-form .mvp-newsletter-input input::placeholder { color: #828089; }
.jl-hero-form .mvp-newsletter-input input:focus,
.jl-hero-form .mvp-newsletter-input input:focus-visible { outline: 0; box-shadow: none; }
.jl-hero-form .mvp-newsletter-input button { border: 1px solid var(--accent); background: var(--accent); color: #fff; font-weight: 650; }
.jl-hero-form .mvp-newsletter-input button:hover { background: #7969ee; color: #fff; }
.jl-hero-form .mvp-newsletter-note { color: #797780; font-size: 12px; margin-top: 12px; }
.jl-hero-form .mvp-newsletter-status { margin-top: 4px; color: #6251b3; }
.jl-hero-form .mvp-newsletter-status[data-state="error"] { color: #b53737; }
.jl-hero-form .mvp-newsletter-status[data-state="success"] { color: #34714b; }
.jl-showcase { max-width: 1440px; margin: 12px auto 0; overflow: hidden; }
.jl-showcase-stage { position: relative; display: flex; align-items: end; gap: 20px; height: 340px; padding: 24px; overflow-x: auto; scrollbar-width: none; touch-action: pan-y; }
.jl-showcase-stage::-webkit-scrollbar { display: none; }
.jl-showcase-card { flex: 0 0 300px; display: block; min-width: 0; overflow: visible; border: 0; background: transparent; color: var(--ink); box-shadow: none; }
.jl-showcase-image { aspect-ratio: 3 / 2; overflow: hidden; border: 0; border-radius: 16px; background: #f4f1fc; }
.jl-showcase-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jl-showcase-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px 0; color: var(--ink); font-size: 15px; font-weight: 500; }
.jl-showcase-caption > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-showcase-caption svg { flex: 0 0 18px; width: 18px; height: 18px; }
.jl-showcase.is-ready .jl-showcase-stage { display: block; overflow: visible; height: var(--stage-height, 340px); }
.jl-showcase.is-ready .jl-showcase-card { position: absolute; bottom: 24px; left: 50%; width: var(--card-width, 340px); transform-origin: center bottom; transform: translateX(-50%) translateX(var(--card-x, 0px)) scale(var(--card-scale, 1)); opacity: var(--card-opacity, 0); z-index: var(--card-z, 0); transition: transform 700ms cubic-bezier(.22,1,.36,1), opacity 400ms ease; }
.jl-showcase.is-ready .jl-showcase-caption { font-size: max(15px, calc(11px / var(--card-scale, 1))); }
.jl-showcase-card[aria-hidden="true"] { pointer-events: none; }
.jl-showcase-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; }
.jl-showcase-controls button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e5e3e9; border-radius: 50%; background: #fff; color: #28242e; cursor: pointer; transition: color .2s ease, background .2s ease; }
.jl-showcase-controls button:hover { color: #fff; background: #17141d; }
.jl-carousel-position { min-width: 56px; font-size: 12px; font-variant-numeric: tabular-nums; }
.jl-carousel-position span { color: #96929c; margin-left: 4px; }
.jl-categories { padding: 104px 0 120px; background: transparent; }
.jl-categories-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 64px; align-items: start; }
.jl-categories-copy { padding-top: 48px; }
.jl-categories-copy h2 { font-size: clamp(36px, 3.8vw, 52px); font-weight: 650; line-height: 1.08; letter-spacing: -.05em; }
.jl-categories-copy p { margin-top: 24px; max-width: 28ch; color: var(--muted); font-size: 16px; line-height: 1.65; }
.jl-folder-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 32px; row-gap: 56px; }
.jl-folder { min-width: 0; }
.jl-folder-scene { position: relative; height: 236px; isolation: isolate; }
.jl-folder-back { position: absolute; inset: 80px 0 0; border-radius: 12px; background: #e8e7ed; }
.jl-folder-back::before { position: absolute; left: 0; top: -16px; width: 40%; height: 24px; background: inherit; border-radius: 10px 10px 0 0; content: ""; }
.jl-folder-papers { position: absolute; inset: 0; }
.jl-folder-article { position: absolute; top: 24px; left: 4%; display: block; width: 72%; border: 3px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(20,16,30,.1); transform: rotate(-13deg); transition: transform .45s cubic-bezier(.22,1,.36,1); overflow: hidden; z-index: 1; }
.jl-folder-article:nth-child(2) { left: 14%; top: 36px; transform: rotate(9deg); z-index: 2; }
.jl-folder-article:nth-child(3) { left: 22%; top: 48px; transform: rotate(-2deg); z-index: 3; }
.jl-folder-article img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.jl-folder-article span { display: none; }
.jl-folder-front { position: absolute; inset: 108px 0 0; z-index: 4; padding: 20px; border-radius: 12px; border-top: 1px solid #fff; background: linear-gradient(150deg,#f1f0f4,#eae9ee); box-shadow: 0 6px 12px rgba(20,16,30,.02); cursor: pointer; transition: background .25s ease, transform .45s cubic-bezier(.22,1,.36,1); transform-origin: bottom; }
.jl-folder-front svg { color: #aaa5b4; width: 24px; height: 24px; position: absolute; bottom: 20px; right: 20px; }
.jl-folder-toggle { display: block; width: 100%; padding: 20px 0 4px; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.jl-folder > p { font-size: 12px; line-height: 1.5; color: var(--muted); }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-front { background: #e7e6eb; transform: scaleY(.9); }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-front svg { color: #77727f; }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-article:nth-child(1) { transform: translate(-5%, -30px) rotate(-17deg); }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-article:nth-child(2) { transform: translateY(-60px) rotate(4deg); }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-article:nth-child(3) { transform: translate(7%, -18px) rotate(16deg); }
.jl-folder:is(:hover,:focus-within,.is-open) .jl-folder-article:is(:hover,:focus-visible) { z-index: 5; transform: translateY(-64px) rotate(0deg); }
.journal-listing .journal-index { padding-top: 104px; padding-bottom: 88px; }
.journal-listing .journal-index-head h2 { font-size: clamp(36px,4vw,56px); font-weight: 650; }
.journal-listing .journal-index-head { padding-bottom: 48px; }
.journal-listing .journal-article-row { border-top: 1px solid var(--border); border-bottom: 0; }
.journal-listing .journal-article-row:last-child { border-bottom: 1px solid var(--border); }
.journal-listing .journal-row-main { grid-template-columns: 48px minmax(0,1fr) 44px; gap: 24px; padding: 28px 0; }
.journal-listing .journal-row-number { font-family: inherit; font-variant-numeric: tabular-nums; }
.jl-row-copy { min-width: 0; }
.journal-listing .journal-row-main h3 { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(18px,2vw,26px); font-weight: 600; line-height: 1.4; letter-spacing: -.035em; margin-top: 8px; }
.journal-listing .journal-meta { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
.journal-listing .mvp-outro { padding-bottom: 0; background: #fff; }
.journal-listing .mvp-newsletter { margin-bottom: -1px; }
@media (max-width: 1100px) {
  .jl-categories-layout { grid-template-columns: 240px minmax(0,1fr); gap: 40px; }
  .jl-folder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .jl-hero { padding: 64px 0 48px; }
  .jl-dek { font-size: 16px; margin-top: 24px; }
  .jl-dek br { display: none; }
  .jl-showcase { margin-top: 24px; }
  .jl-categories { padding: 64px 0 72px; }
  .jl-categories-layout { grid-template-columns: 1fr; gap: 24px; }
  .jl-categories-copy { padding-top: 0; }
  .jl-categories-copy h2 br { display: none; }
  .jl-categories-copy p { max-width: 40ch; margin-top: 16px; }
  .jl-folder-grid { gap: 32px 24px; }
  .jl-folder-scene { height: 216px; }
  .jl-folder-front { top: 100px; }
  .jl-folder-toggle { font-size: 15px; }
  .journal-listing .journal-index { padding: 64px 0 72px; }
  .journal-listing .journal-index-head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 32px; }
  .journal-listing .journal-row-main { grid-template-columns: 24px minmax(0,1fr) 32px; gap: 12px; padding: 24px 0; }
  .journal-listing .journal-row-arrow { width: 32px; height: 32px; }
  .journal-listing .journal-meta time, .journal-listing .jl-date-dot { display: none; }
  .journal-listing .journal-meta { font-size: 11px; }
  .journal-listing .journal-index-head p br { display: none; }
}
@media (max-width: 480px) {
  .jl-hero h1 { font-size: clamp(34px, 9.8vw, 44px); }
  .jl-hero .mvp-newsletter-input { flex-direction: row; align-items: center; border-radius: 999px; gap: 0; }
  .jl-hero .mvp-newsletter-input input { padding: 12px 10px; font-size: 16px; }
  .jl-hero .mvp-newsletter-input button { width: auto; font-size: 12px; padding: 14px; }
  .jl-hero .mvp-newsletter-input button span { display: none; }
  .jl-folder-grid { grid-template-columns: 1fr; gap: 32px; }
  .jl-folder { max-width: 330px; width: 100%; margin-inline: auto; }
  .jl-folder-scene { height: 244px; }
  .jl-folder-front { top: 120px; }
  .jl-folder-article { top: 24px; }
  .jl-folder-toggle { font-size: 18px; }
}
@media (hover: none) {
  .jl-folder.is-open .jl-folder-scene { height: 324px; }
  .jl-folder.is-open .jl-folder-back { inset: 0; }
  .jl-folder.is-open .jl-folder-front { display: none; }
  .jl-folder.is-open .jl-folder-article:nth-child(n) { display: flex; align-items: center; width: calc(100% - 16px); height: 96px; left: 8px; top: 8px; transform: none; border: 0; border-radius: 8px; }
  .jl-folder.is-open .jl-folder-article:nth-child(2) { top: 112px; }
  .jl-folder.is-open .jl-folder-article:nth-child(3) { top: 216px; }
  .jl-folder.is-open .jl-folder-article img { width: 42%; height: 96px; }
  .jl-folder.is-open .jl-folder-article span { display: block; white-space: normal; font-size: 12px; padding: 12px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .jl-showcase.is-ready .jl-showcase-card, .jl-folder-article, .jl-folder-front { transition: none; }
  .journal-listing .mvp-outro { position: relative; }
  .journal-listing .mvp-outro-pin::after { display: none; }
  .journal-listing .mvp-newsletter-pin { margin-top: 0; }
}
