/* Thin printed covers; all ink details belong to the turning sheet. */
.articles .leaf-edge {
  background: #f7f5ee;
  border: 1px solid rgb(45 40 30 / 18%);
  box-shadow: 0 1px 1px rgb(30 25 15 / 8%);
  filter: none;
}
.articles .cover-sheet::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0 auto 0 0;
  width: 12px;
  background: linear-gradient(90deg, rgb(0 0 0 / 5%), rgb(0 0 0 / 13%) 3px, rgb(255 255 255 / 18%) 4px, transparent 10px);
  pointer-events: none;
}
.cover-0 { --zine-ink: #0bd003; }
.cover-1 { --zine-ink: #ffeb14; }
.cover-2 { --zine-ink: #ff14b1; }
.cover-3 { --zine-ink: #14f7ff; }
.zine-imprint {
  position: absolute;
  z-index: 4;
  left: var(--article-inset, 12px);
  right: var(--article-inset, 12px);
  bottom: var(--article-bottom, 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--zine-ink);
  font-family: AppstarInter, Arial, sans-serif;
  font-size: var(--article-issueSize, 9px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  pointer-events: none;
}
.zine-imprint::after {
  content: '';
  display: block;
  background: currentColor;
  mask: url('assets/turtle.svg') center / contain no-repeat;
  width: var(--article-logoSize, 12px);
  height: calc(var(--article-logoSize, 12px) * .9);
  flex: none;
}
@media (max-width: 600px) {
  .zine-imprint { left: calc(var(--article-inset, 12px) * .65); right: calc(var(--article-inset, 12px) * .65); bottom: calc(var(--article-bottom, 8px) * .5); font-size: calc(var(--article-issueSize, 9px) * .6); }
  .zine-imprint::after { width: calc(var(--article-logoSize, 12px) * .6); height: calc(var(--article-logoSize, 12px) * .54); }
}

#article-list .title {
  font-family: AppstarInter, Arial, sans-serif;
  font-weight: 500;
  font-size: var(--article-captionSize, 14px);
  line-height: var(--article-captionLine, 21px);
  letter-spacing: normal;
}
#article-list .caption { margin-top: var(--article-captionGap, 12px); }
.articles-controls-panel { position: fixed; right: 16px; top: 16px; width: min(300px, calc(100vw - 32px)); z-index: 1000; }

.articles-controls-panel > div { max-height: calc(100dvh - 32px); overflow: auto; }
#article-list .article-lettering { transform: translate(var(--article-letteringX, 0px), calc(-50% + var(--article-letteringY, -8px))); }

:root[data-issue-above="true"] .zine-imprint { top: var(--article-bottom, 8px); bottom: auto; }
@media (max-width:600px) {
 :root[data-issue-above="true"] .zine-imprint { top: calc(var(--article-bottom, 8px) * .5); }
}
/* Reserve room for the issue line above the lettering, within the turning cover. */
:root[data-issue-above="true"] #article-list .article-lettering { top: calc(50% + 12px); }
@media (max-width:600px) {
 :root[data-issue-above="true"] #article-list .article-lettering { top: calc(50% + 24px); }
}

/* A decorative fold leaves the cover artwork and all layout boxes stationary. */
#article-list .cover-book { left: 0; clip-path: none; transform: none; }
#article-list .cover-sheet { position: absolute; inset: 0; transform: none; }
#article-list .inside-sheet { display: none; }
#article-list .magazine::after {
 content: '';
 position: absolute;
 z-index: 26;
 right: 6px;
 bottom: 4px;
 width: var(--article-peel-size);
 height: var(--article-peel-size);
 background: linear-gradient(135deg, #fffef9 0%, #f0eee7 38%, #c2c0b8 48%, #8e8c84 49.5%, #fffef9 51%, #fffef9 100%);
 box-shadow: inset -1px -1px rgb(0 0 0 / 10%);
 opacity: 0;
 pointer-events: none;
}
#article-list .is-peeling .magazine::after { opacity: 1; }
/* Figma 3523:1258: separate Hard Light artwork stroke and fitted text fill. */
#article-list .card { position: relative; }
#article-list .card .magazine[style]::before {
 content: '';
 display: block;
 position: absolute;
 inset: 0;
 z-index: 30;
 width: auto;
 aspect-ratio: auto;
 padding: 0;
 box-sizing: border-box;
 border: 1.5px solid var(--reference-highlight);
 border-radius: 0;
 mix-blend-mode: hard-light;
 opacity: 0;
 pointer-events: none;
}
#article-list .caption { margin-top: var(--article-captionGap, 12px); }
#article-list .caption .title {
 position: relative;
 isolation: isolate;
 display: table;
 width: fit-content;
 max-width: 100%;
 padding: 2px 4px;
 background: white;
}
#article-list .caption .title::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -1;
 background: var(--reference-highlight);
 mix-blend-mode: hard-light;
 opacity: 0;
 pointer-events: none;
}
#article-list .card:is(:hover, :focus-within) .magazine::before,
#article-list .card:is(:hover, :focus-within) .title::before { opacity: 1; }
/* CSS reverses interrupted transitions without any page-turn geometry. */
#article-list .magazine::after {
 transform: scale(0);
 transform-origin: bottom right;
 transition: transform 200ms cubic-bezier(.22,.61,.36,1), opacity 200ms ease;
}
#article-list .is-peeling .magazine::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
 #article-list .magazine::after { transition: none; }
}

/* Override computed inline opacity copied into the article reader cover. */
.cover-sheet :is(.article-lettering, .zine-imprint) { opacity: 1 !important; }
:root[data-show-cover-overlays="false"] .cover-sheet :is(.article-lettering, .zine-imprint) { opacity: 0 !important; }