/* Site S5 — Magazine cover */
.s5 { display: flex; flex-direction: column; min-height: 100vh; max-width: 1280px; margin: 0 auto; }

.s5-fold {
  position: relative; padding: 40px 36px 48px;
  background:
    linear-gradient(to right, var(--pal-bg) 0%, color-mix(in srgb, var(--pal-bg) 55%, transparent) 45%, color-mix(in srgb, var(--pal-bg) 30%, transparent) 100%),
    url('../hero-banner.png') center / cover no-repeat;
  border-bottom: 1px solid var(--pal-border);
  overflow: hidden; min-height: 320px;
  display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: center;
}
.s5-watermark {
  position: absolute; right: -30px; bottom: -60px;
  font: italic 900 200px/0.85 Georgia, serif;
  color: color-mix(in srgb, var(--pal-accent) 10%, transparent);
  letter-spacing: -0.06em; pointer-events: none; user-select: none;
}
.s5-brand {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-family: 'Bodoni Moda', 'Fraunces', Georgia, serif;
  font-style: italic; font-weight: 700; font-size: 18px; color: var(--pal-fg);
}
.s5-mark { width: 22px; height: 22px; border-radius: 5px; display: block; }
.s5-fold h1 {
  margin: 0 0 8px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 38px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--pal-fg);
}
.s5-tag { color: var(--pal-fg-muted); font-size: 13.5px; max-width: 40ch; margin: 0; }
.s5-cta {
  position: absolute; top: 18px; right: 22px;
  padding: 6px 11px; border-radius: 5px;
  background: var(--pal-accent); color: var(--pal-accent-fg);
  font: 600 11.5px/1 ui-monospace, Menlo, monospace;
  text-decoration: none; z-index: 2;
  transition: transform .12s ease, filter .12s ease;
}
.s5-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }

.s5-featured { position: relative; z-index: 1; }
.s5-tag-above {
  font: 600 10px ui-monospace, Menlo, monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pal-accent);
  margin-bottom: 8px; display: inline-block;
}
.s5-featured-card {
  display: block; background: var(--pal-surface);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.2), 0 0 0 1px var(--pal-border);
  /* Anchor for the view-badges + container for the cqi calc that pins
     the badges to the bottom of the cover. */
  position: relative;
  container-type: inline-size;
}
.s5-featured-link {
  display: block; color: inherit; text-decoration: none;
  transition: transform .15s ease;
}
.s5-featured-link:hover { transform: translateY(-2px); }
.s5-featured-card .cover { aspect-ratio: 3/2; position: relative; }
.s5-featured-top {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: flex; gap: 6px; align-items: center;
}
.s5-featured-body { padding: 8px 14px 14px; }
.s5-featured-body h3 {
  margin: 0 0 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; color: var(--pal-fg);
}
.s5-featured-body p { margin: 0; font-size: 12px; color: var(--pal-fg-muted); }

.s5-content { padding: 30px 36px 24px; }
.s5-footer {
  margin-top: auto; padding: 14px 36px;
  border-top: 1px solid var(--pal-border);
  font-size: 11px; color: var(--pal-fg-faint);
  display: flex; gap: 20px; justify-content: space-between;
}
.s5-footer a {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, currentColor 50%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
.s5-footer a:hover { color: var(--pal-accent); border-bottom-color: var(--pal-accent); }

@media (max-width: 800px) {
  .s5-fold { grid-template-columns: 1fr; padding: 32px 20px 36px; }
  .s5-fold h1 { font-size: 30px; }
  .s5-content { padding: 24px 20px; }
  .s5-footer { padding: 14px 20px; flex-wrap: wrap; }
}