/* PopPulls shared responsive refresh — approved direction 2026-09-26 */
:root {
  --pp-page: min(1240px, calc(100% - 48px));
  --pp-section-space: clamp(54px, 7vw, 86px);
}

html { scroll-behavior: smooth; }
body {
  overflow-x: clip;
  font-size: 16px;
}
img {
  display: block;
  max-width: 100%;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 4px solid var(--purple, #7c5ab8);
  outline-offset: 3px;
}

.top-strip {
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 6px 16px !important;
  font-size: 11px !important;
  line-height: 1.25;
}

.nav {
  min-height: 70px;
  gap: clamp(14px, 2vw, 24px) !important;
  padding: 10px max(24px, calc((100% - 1240px) / 2)) !important;
}
.nav .brand {
  min-width: 178px !important;
  flex: 0 0 auto;
  gap: 9px !important;
}
.nav .mascot-mark {
  width: 42px !important;
  border-width: 3px;
  font-size: 18px !important;
}
.nav .wordmark {
  font-size: clamp(25px, 2.7vw, 32px) !important;
}
.nav > .nav-links {
  min-width: 0;
  flex: 1;
  gap: clamp(9px, 1.2vw, 17px) !important;
  flex-wrap: nowrap !important;
}
.nav > .nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 4px 0 !important;
  font-size: 12px;
  white-space: nowrap;
}
.nav > .search-pill {
  min-width: 150px !important;
  width: min(180px, 16vw);
  min-height: 42px;
  padding: 8px 10px !important;
  font-size: 12px;
}

.pp-menu-toggle {
  width: 46px;
  height: 46px;
  margin-left: auto;
  display: none;
  place-items: center;
  padding: 0;
  border: 3px solid var(--line, #221b14);
  background: var(--yellow, #f7c94b);
  box-shadow: 3px 3px 0 var(--line, #221b14);
  color: var(--ink, #17130f);
  cursor: pointer;
}
.pp-menu-bars,
.pp-menu-bars::before,
.pp-menu-bars::after {
  width: 22px;
  height: 3px;
  display: block;
  background: currentColor;
  content: "";
}
.pp-menu-bars { position: relative; }
.pp-menu-bars::before { position: absolute; top: -7px; }
.pp-menu-bars::after { position: absolute; top: 7px; }
.pp-menu-toggle[aria-expanded="true"] .pp-menu-bars { background: transparent; }
.pp-menu-toggle[aria-expanded="true"] .pp-menu-bars::before { top: 0; transform: rotate(45deg); }
.pp-menu-toggle[aria-expanded="true"] .pp-menu-bars::after { top: 0; transform: rotate(-45deg); }
.pp-mobile-menu {
  display: none;
  max-height: 0;
  overflow: hidden;
  background: var(--white, #fffaf0);
  border-bottom: 0 solid var(--line, #221b14);
  transition: max-height .2s ease;
}
.pp-mobile-menu.open {
  max-height: 620px;
  border-bottom-width: 3px;
}
.pp-mobile-inner {
  width: min(100% - 28px, 720px);
  margin: auto;
  padding: 12px 0 16px;
}
.pp-mobile-search {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding: 8px 11px;
  border: 3px solid var(--line, #221b14);
  background: var(--paper, #f6eedf);
  font-size: 13px;
  font-weight: 850;
}
.pp-mobile-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.pp-mobile-links a {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 2px solid var(--line, #221b14);
  background: var(--white, #fffaf0);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.pp-mobile-links a.active { background: var(--red, #ff3d32); color: #fff; }

main.page,
.page {
  width: var(--pp-page);
  max-width: 1240px;
  margin-inline: auto;
  padding: 26px 0 0 !important;
}
.page > *,
main > *,
.hero > *,
.company-hero > *,
.artist-hero > *,
.series-hero > *,
.figure-hero > * { min-width: 0; }

body h1 {
  max-width: 850px;
  font-size: clamp(46px, 6.1vw, 82px) !important;
  line-height: .94 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body h2 {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body h3 {
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.lede,
.hero-copy p,
.hero p {
  max-width: 760px;
  font-size: clamp(17px, 1.6vw, 21px) !important;
  line-height: 1.55 !important;
  text-wrap: pretty;
}

/* Hero card notes are short notes inside the hero aside, not hero body copy.
   The .hero p rule above carries !important, so this needs !important AND
   higher specificity (.hero .note = 0,2,0 beats .hero p = 0,1,1) to win. */
.artist-card-note,
.company-card-note,
.figure-card-note,
.series-card-note,
.hero .artist-card-note,
.hero .company-card-note,
.hero .figure-card-note,
.hero .series-card-note {
  font-size: 16px !important;
}
.breadcrumb { margin-bottom: 18px !important; }
.section { margin-top: var(--pp-section-space) !important; }
.section-head {
  gap: clamp(12px, 3vw, 32px) !important;
  margin-bottom: 22px !important;
}
.section-head p {
  max-width: 560px;
  font-size: 16px !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}

.hero,
.company-hero,
.artist-hero,
.series-hero,
.figure-hero {
  gap: clamp(26px, 4vw, 54px) !important;
}
.hero { min-height: min(500px, 62vh) !important; }

.card,
.company-card,
.artist-card,
.series-card,
.figure-card,
.newsletter-card,
.source-panel {
  min-width: 0;
  box-shadow: 6px 6px 0 var(--shadow, rgba(23,19,15,.12)) !important;
}
.card-title,
.company-title,
.artist-title,
.series-title,
.figure-title {
  line-height: 1.08 !important;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.card-copy { line-height: 1.5 !important; text-wrap: pretty; }

/* Shared portrait media system: one product master works on the site and in 4:5 social feeds. */
.card-photo,
.card-art,
.series-art,
.figure-art,
.company-mark,
.artist-mark,
.format-art,
.newsletter-art,
.photo-slot,
.guide-thumb,
.package-photo,
.figure-photo,
.portrait,
.upload-visual,
.buy-visual,
.mission-visual,
.club-visual {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden;
}
.card-photo img,
.card-art img,
.series-art img,
.figure-art img,
.company-mark img,
.artist-mark img,
.format-art img,
.newsletter-art img,
.photo-slot img,
.guide-thumb img,
.package-photo img,
.figure-photo img,
.portrait img,
.upload-visual img,
.buy-visual img,
.mission-visual img,
.club-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.index-card { min-width: 0; }
.index-visual { min-height: 260px !important; }

.button,
.filter-chip,
button,
input,
select,
textarea { max-width: 100%; }
.button { min-height: 44px; }

.table,
.rate-board,
.timeline,
.thread-list { max-width: 100%; }

/* Older pages pulled these bands outward to cancel their former page padding.
   The refreshed centered page shell no longer needs that negative margin. */
.ticker,
.signal-board {
  width: 100%;
  margin-inline: 0 !important;
}

.footer,
body > footer {
  margin-top: var(--pp-section-space) !important;
  padding-inline: max(24px, calc((100% - 1240px) / 2)) !important;
}

/* One site-wide footer. Page-specific prototype footers are replaced by shared JS. */
body > footer.pp-site-footer {
  background: var(--ink, #1d1916);
  color: #fff;
  padding-block: 44px 24px;
}
.pp-site-footer .pp-footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(120px, 1fr));
}
.pp-site-footer .pp-footer-brand {
  align-items: center;
  color: #fff;
  display: inline-flex;
  gap: 12px;
  text-decoration: none;
}
.pp-site-footer .pp-footer-mark {
  align-items: center;
  background: var(--red, #e53a35);
  border: 3px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 18px;
  font-weight: 950;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.pp-site-footer .pp-footer-wordmark {
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}
.pp-site-footer .pp-footer-wordmark span:last-child { color: var(--red, #e53a35); }
.pp-site-footer .pp-footer-intro p {
  color: #eee5d8;
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 350px;
}
.pp-site-footer .pp-footer-column {
  align-content: start;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.pp-site-footer .pp-footer-column h2 {
  color: #fff;
  font-size: 15px !important;
  letter-spacing: .06em;
  line-height: 1.2 !important;
  margin: 2px 0 6px;
  text-transform: uppercase;
}
.pp-site-footer .pp-footer-column a {
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
}
.pp-site-footer .pp-footer-column a:hover { text-decoration: underline; }
.pp-site-footer .pp-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pp-site-footer .pp-social-icon {
  align-items: center;
  background: var(--red, #e53a35);
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 44px;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.pp-site-footer .pp-social-icon img {
  height: 23px;
  object-fit: contain;
  width: 26px;
}
.pp-site-footer a.pp-social-icon:hover { background: #be2826; }
.pp-site-footer .pp-footer-pending {
  color: #eee5d8;
  line-height: 1.4;
  margin: 0;
}
.pp-site-footer .pp-footer-bottom {
  border-top: 1px solid #77706a;
  color: #eee5d8;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 36px;
  padding-top: 20px;
}
.pp-site-footer .pp-footer-bottom p { margin: 0; }
@media (max-width: 900px) {
  .pp-site-footer .pp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-site-footer .pp-footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .pp-site-footer .pp-footer-grid { gap: 28px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-site-footer .pp-footer-intro { grid-column: 1 / -1; }
}

@media (max-width: 1120px) {
  .nav > .nav-links { gap: 10px !important; }
  .nav > .nav-links a { font-size: 11px; }
  .nav > .search-pill { display: none !important; }
  .grid.four,
  .company-grid,
  .artist-grid,
  .series-grid,
  .figure-grid,
  .guide-grid,
  .newsletter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  :root {
    --pp-page: min(100% - 32px, 760px);
    --pp-section-space: 58px;
  }
  .top-strip { min-height: 28px; font-size: 10px !important; }
  .nav {
    min-height: 62px;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 16px !important;
  }
  .nav .brand { min-width: 0 !important; }
  .nav .mascot-mark { width: 39px !important; }
  .nav .wordmark { font-size: 24px !important; }
  .nav > .nav-links,
  .nav > .search-pill { display: none !important; }
  .pp-menu-toggle { display: grid; }
  .pp-mobile-menu { display: block; }
  main.page,
  .page { padding-top: 18px !important; }
  .hero,
  .company-hero,
  .artist-hero,
  .series-hero,
  .figure-hero,
  .archive-layout,
  .history-brief,
  .trust-panel,
  .rules-layout,
  .split,
  .specimen-note,
  .figure-detail-grid,
  .mission-layout,
  .buy-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-board,
  .dossier-card,
  .portrait-card,
  .photo-card,
  .package-card,
  .index-card,
  .buy-card,
  .upload-card,
  .mission-card,
  .club-card {
    max-width: 620px;
    transform: none !important;
    box-shadow: 7px 7px 0 var(--line, #221b14) !important;
  }
  .section-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .signal-board,
  .stats-grid,
  .ticker,
  .completion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .timeline-row { grid-template-columns: 110px minmax(0, 1fr) !important; }
  .timeline-row .source-tag { width: fit-content; }
  .toolbox { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 620px) {
  :root {
    --pp-page: calc(100% - 28px);
    --pp-section-space: 50px;
  }
  body h1 {
    /* Mobile H1 scale. Was clamp(38px, 11.5vw, 50px), which rendered ~45px at 390px and
       cost 126px of vertical space at the top of the hero. It also grew as the screen
       narrowed: 46px at 621px, jumping to 50px at 620px.
       Chosen from a measured sweep of six clamps at 390 / 430 / 620px (H1 block height):
         baseline 38/11.5vw/50 -> 126 / 139 /  94px
         34/9vw/46             ->  99 / 109 / 130px   (regressed at 620)
         34/8vw/50             ->  96 /  97 / 140px   (regressed at 620)
         32/8.5vw/48           ->  93 / 103 / 135px   (regressed at 620)
         34/7.4vw/46           ->  96 /  96 / 129px   (regressed at 620)
         30/8vw/44  <- this    ->  88 /  97 /  83px   (best at every width)
       8vw keeps ~31px at 390px and caps at 44px by 620px, so the scale stays monotonic
       into the desktop rule instead of growing as the screen narrows. */
    font-size: clamp(30px, 8vw, 44px) !important;
    line-height: .94 !important;
  }
  body h2 {
    font-size: clamp(28px, 9vw, 38px) !important;
  }
  body h3 { font-size: clamp(19px, 6vw, 23px) !important; }
  .lede,
  .hero-copy p,
  .hero p { font-size: 17px !important; }
  .hero-actions { gap: 9px !important; }
  .button {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center;
  }
  .history-brief .button { width: 100%; }
  .grid.four,
  .grid.three,
  .grid.two,
  .company-grid,
  .artist-grid,
  .series-grid,
  .figure-grid,
  .guide-grid,
  .newsletter-grid,
  .toolbox,
  .stats-grid,
  .ticker,
  .completion-grid,
  .signal-board,
  .evidence-grid,
  .form-grid,
  .archive-help,
  .mini-grid {
    grid-template-columns: 1fr !important;
  }
  .table,
  .rate-board {
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
  .thread-row,
  .pull-card,
  .trade-card,
  .timeline-row {
    grid-template-columns: 1fr !important;
  }
  /* Keep the filmstrip at 5 columns on phones. At 3 columns each thumb stretched to a
     third of the card and the strip wrapped to two rows, which made the thumbs larger
     than on desktop and the whole card TALLER at 620px (1124px) than at 768px (934px).
     Measured strip height, 3-col -> 5-col:  620px 353->100,  560px 313->100,
     430px 226->86,  390px 199->54,  360px 179->51.  Only figure_mockup uses .photo-strip. */
  .photo-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .fact-row { align-items: start; }
  .trust-chip::after,
  .affiliate-chip::after {
    position: fixed !important;
    inset: auto 14px 14px 14px !important;
    width: auto !important;
    transform: translateY(4px) !important;
  }
  .trust-chip:hover::after,
  .trust-chip:focus-visible::after,
  .affiliate-chip:hover::after,
  .affiliate-chip:focus-visible::after {
    transform: translateY(0) !important;
  }
  .footer,
  body > footer { padding-inline: 18px !important; }
}

@media (max-width: 360px) {
  .pp-mobile-links { grid-template-columns: 1fr; }
  .nav .wordmark { font-size: 22px !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { width: 100%; padding-inline: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}