/* =============================================================
   Shared browse/landing masthead + atmosphere. Generalized from
   reading_orders_browse.css (.rob-*). Token-driven (theme.css);
   light + dark aware. Activated by .pm-atmosphere on <body> and the
   pm-* classes on the page_masthead() macro output.
   ============================================================= */

/* ---- atmosphere (on <body class="pm-atmosphere">) ------------------ */
.pm-atmosphere {
  --pm-accent: var(--page-accent, var(--action));
  --pm-mono: var(--font-mono);
  --pm-grain: .5;
  --pm-spot: color-mix(in srgb, var(--page-accent) 9%, transparent);
  --pm-dot:  color-mix(in srgb, var(--text) 4%, transparent);
  position: relative;
  background-image:
    radial-gradient(110% 70% at 90% -10%, var(--pm-spot), transparent 60%),
    radial-gradient(var(--pm-dot) 1px, transparent 1.4px);
  background-size: auto, 18px 18px;
  background-attachment: fixed;
}
[data-theme="light"] .pm-atmosphere { --pm-grain: .2; }
.pm-atmosphere::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  opacity: var(--pm-grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- masthead ------------------------------------------------------ */
.pm-head {
  --pm-accent: var(--page-accent, var(--action));
  --pm-mono: var(--font-mono);
  padding: 64px 0 36px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.pm-head-main { min-width: 0; }
.pm-kicker {
  font-family: var(--pm-mono); font-size: .7rem; letter-spacing: .32em;
  text-transform: uppercase; color: var(--pm-accent); margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.pm-kicker::before { content: ""; width: 34px; height: 2px; background: var(--pm-accent); }
.pm-title {
  font-family: var(--font-display); line-height: .96; margin: 0;
  font-size: clamp(2.4rem, 5.5vw, 5rem); letter-spacing: -.01em; text-transform: uppercase;
  background: var(--hero-gradient); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.pm-sub { color: var(--text-muted); margin: 12px 0 0; max-width: 56ch; }
.pm-stats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 16px 0 0; }
.pm-stat { color: var(--text-muted); font-size: .9rem; }
.pm-stat strong { color: var(--text); font-weight: 700; }
.pm-aside { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pm-action {
  font-family: var(--pm-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; display: inline-flex;
  align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--radius-sm);
  white-space: nowrap; cursor: pointer;
  background: var(--pm-accent); color: #fff; border: 1px solid var(--pm-accent);
  transition: transform .12s, filter .2s;
}
.pm-action:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pm-action:active { transform: translateY(0); }
.pm-action:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--pm-accent) 55%, transparent);
  outline-offset: 2px;
}
.pm-action:disabled,
.pm-action[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

/* ---- entrance animation ------------------------------------------- */
@keyframes pm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pm-head { opacity: 0; animation: pm-rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
@media (prefers-reduced-motion: reduce) { .pm-head { animation: none; opacity: 1; } }

/* GH-123. Four browse pages spent most of a phone screen on this block before
   the first book: measured at 390x844 on /issues, 234px of header of which the
   two-line 74px title was the largest single item, plus a kicker that only
   restates the title and 40px of top padding. The page title is already in
   the tab bar and the document title, so on a phone it is a label, not a
   poster: cap it BELOW the desktop clamp's floor (2.4rem), drop the kicker
   entirely, and tighten the padding. Pages that give the kicker a job on
   mobile (the shelf hero's grid) place it explicitly and lose nothing when the
   cell collapses. */
@media (max-width: 640px) {
  .pm-head { padding: 22px 0 16px; margin-bottom: 6px; gap: 14px; }
  .pm-kicker { display: none; }
  .pm-title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); line-height: 1; }
  .pm-sub { margin-top: 6px; font-size: .92rem; line-height: 1.4; }
}