/* ==========================================================================
   press.css — Sysinit Press publisher landing page.
   Builds on base.css / home.css / subpage.css. Only the catalog-specific
   components (featured publication, coming-titles shelf) live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Featured publication — cover + details, two columns
   -------------------------------------------------------------------------- */

.press-featured {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
}

.press-cover {
  display: block;
  perspective: 1600px;
  perspective-origin: 8% -18%;
  filter:
    drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.20))
    drop-shadow(12px 22px 24px rgba(0, 0, 0, 0.22));
  transition: filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] .press-cover {
  filter:
    drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55))
    drop-shadow(14px 26px 30px rgba(0, 0, 0, 0.45));
}

/* Front cover face — the real image. */
.press-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 6px 6px 2px;
  border: 1px solid var(--line);
}

/* 3D book seen from slightly above and to the left: the cover tilts back and
   turns toward its binding, so the bound spine runs down the left edge and the
   stacked page block shows along the top edge, with the perspective vanishing
   toward the lower right. Every tint derives from --signal / --paper / --ink,
   so it fits this page's palette. This is the same book language used on every
   Sysinit Press landing page. */
.book3d {
  --thick: 28px;
  display: block;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(12deg);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Spine — the bound left edge, a real side face carrying the accent. */
.book3d::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--thick);
  transform-origin: right center;
  transform: rotateY(-90deg);
  border-radius: 2px 0 0 2px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--signal) 55%, #000) 0%,
    color-mix(in srgb, var(--signal) 78%, #fff) 40%,
    color-mix(in srgb, var(--signal) 45%, #000) 72%,
    color-mix(in srgb, var(--signal) 62%, #000) 100%
  );
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.4);
}

/* Page block — stacked pages along the top fore-edge, seen from above.
   Pages stay paper-cream in both themes, as a physical book would. */
.book3d::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--thick);
  transform-origin: center top;
  transform: rotateX(-90deg);
  border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(
    to bottom,
    #f5f0e4 0, #f5f0e4 1px,
    #c8bda6 1px, #c8bda6 2px
  );
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.22);
}
[data-theme="dark"] .book3d::after {
  background: repeating-linear-gradient(
    to bottom,
    #e4ddcd 0, #e4ddcd 1px,
    #a99f88 1px, #a99f88 2px
  );
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .press-cover:hover .book3d,
  .press-cover:focus-visible .book3d {
    transform: rotateX(-2deg) rotateY(6deg) translateY(-8px);
  }
  .press-cover:hover,
  .press-cover:focus-visible {
    filter:
      drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.22))
      drop-shadow(16px 34px 38px rgba(0, 0, 0, 0.26));
  }
  [data-theme="dark"] .press-cover:hover,
  [data-theme="dark"] .press-cover:focus-visible {
    filter:
      drop-shadow(2px 6px 7px rgba(0, 0, 0, 0.6))
      drop-shadow(18px 38px 46px rgba(0, 0, 0, 0.5));
  }
  .press-spine-link:hover .press-spine-cover,
  .press-spine-link:focus-visible .press-spine-cover {
    border-color: var(--signal);
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(12, 22, 30, 0.22);
  }
  [data-theme="dark"] .press-spine-link:hover .press-spine-cover,
  [data-theme="dark"] .press-spine-link:focus-visible .press-spine-cover {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.56);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-cover,
  .book3d,
  .press-spine-cover { transition: none; }
}

.press-featured-body { min-width: 0; }

.press-meta-row {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.press-featured-body h3 {
  font-family: var(--font-sans);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--ink);
  margin: var(--s-3) 0 0;
}

.press-featured-sub {
  font-family: var(--font-sans);
  font-size: var(--t-lg);
  line-height: 1.35;
  color: var(--ink-2);
  margin: var(--s-2) 0 0;
  text-wrap: pretty;
}

.press-featured-desc {
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  margin: var(--s-4) 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}

.press-featured-author {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: var(--s-4) 0 0;
}

.press-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}

.press-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   2. Coming next — current covers on a shelf
   -------------------------------------------------------------------------- */

.press-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: clamp(var(--s-3), 1.8vw, var(--s-5));
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-4);
  border-bottom: 1px solid var(--ink);
}

.press-spine {
  min-width: 0;
}

/* Each current cover links to the book's landing page. */
.press-spine-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  color: inherit;
}
.press-spine-link:hover { color: inherit; }
.press-spine-link:hover .press-spine-title { color: var(--signal); }

.press-spine-num {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-3);
}

.press-spine-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 993 / 1404;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 2px 5px 5px 2px;
  background: var(--paper-2);
  box-shadow: 0 10px 22px rgba(12, 22, 30, 0.16);
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

[data-theme="dark"] .press-spine-cover {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.46);
}

/* Status tiers on the shelf (2026-07-28, Early Access added 2026-08-08):
   "Early Access", "Erscheint bald", and "In Arbeit" spines keep their
   full-color covers; "Geplant" spines sit behind a gray filter until writing
   starts. Hover and focus lift the filter. Early Access labels carry the
   accent color. */
.press-spine--ea .press-spine-label {
  color: var(--signal);
  font-weight: 600;
}

.press-spine--planned .press-spine-cover {
  filter: grayscale(1);
  opacity: 0.85;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    filter 0.28s ease,
    opacity 0.28s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .press-spine--planned .press-spine-link:hover .press-spine-cover,
  .press-spine--planned .press-spine-link:focus-visible .press-spine-cover {
    filter: grayscale(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-spine--planned .press-spine-cover { transition: none; }
}

.press-spine-title {
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  margin-top: var(--s-4);
  text-wrap: balance;
}

.press-spine-label {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: auto;
  padding-top: var(--s-3);
}

.press-shelf-note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   3. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .press-featured {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .press-cover {
    width: 210px;
    max-width: 60%;
  }
}

/* --------------------------------------------------------------------------
   4. Reader poll — which title gets finished next
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.poll-group-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: var(--s-6) 0 var(--s-3);
}
.poll-fieldset { border: 0; margin: 0; padding: 0; }
.poll-fieldset > .poll-group-label:first-child { margin-top: 0; }

.poll-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-2);
}

.poll-option {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--paper);
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.poll-option:hover { border-color: var(--signal); }
.poll-option:has(input:checked) {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--ink);
}
.poll-option input {
  accent-color: var(--signal);
  flex: 0 0 auto;
  transform: translateY(1px);
}
.poll-option:has(input:focus-visible) {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* Honeypot — visually gone, still present for scripted form fillers. */
.poll-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.poll-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.poll-note {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.poll-error {
  font-size: var(--t-sm);
  color: var(--signal);
  margin: var(--s-4) 0 0;
}

/* Standings, revealed after the vote. */
.poll-results-head {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-5);
}
.poll-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.poll-bar-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-1);
}
.poll-bar-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.poll-bar--own .poll-bar-title { color: var(--ink); }
.poll-bar-own-tag {
  font-family: var(--font-mono);
  font-size: var(--t-xxs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid var(--signal);
  border-radius: var(--r-1);
  padding: 1px 6px;
}
.poll-bar-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--ink-3);
}
.poll-bar-track {
  height: 8px;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.poll-bar-fill {
  height: 100%;
  background: var(--signal);
  border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.poll-bar--own .poll-bar-fill { opacity: 1; }
.poll-bar:not(.poll-bar--own) .poll-bar-fill { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .poll-bar-fill { transition: none; }
}

/* Listmonk email signup (shared sysinit-news list), uses site design tokens */
.lm-form { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-5); max-width: 560px; }
.lm-form input[type="email"] { flex: 1 1 260px; min-width: 0; font-family: var(--font-sans); font-size: var(--t-base); color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 11px 14px; line-height: 1.2; }
.lm-form input[type="email"]::placeholder { color: var(--ink-4); }
.lm-form input[type="email"]:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.lm-form .btn-primary { flex: 0 0 auto; }
.lm-micro { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--ink-3); margin: var(--s-4) 0 0; }
@media (max-width: 560px) { .lm-form .btn-primary { width: 100%; justify-content: center; } .lm-form input[type="email"] { flex: 1 1 100%; } }