/* ==========================================================================
   Popkulturist enhancement layer
   Loaded after each page's inline styles. Same palette, same voice —
   this file only sharpens what is already there.
   ========================================================================== */

/* ---------- Global polish ---------- */

::selection {
  background: var(--accent, #8b4513);
  color: var(--cream, #f5f1e8);
}

h1, h2, h3, h4 { text-wrap: balance; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #8b4513);
  outline-offset: 3px;
  border-radius: 2px;
}

img { font-style: italic; } /* graceful broken-image alt text */

/* Soft cross-fade between pages (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.22s; }

/* ---------- Navigation ---------- */

nav { transition: box-shadow 0.3s ease; }

nav.pk-scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(26, 24, 20, 0.06); }

.logo .dot {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo:hover .dot { transform: translateY(-4px); }

/* Turn the quiet subscribe link into a quiet subscribe button */
.subscribe-link a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.subscribe-link a:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

body.menu-open .subscribe-link a {
  padding: 0.65rem 1.5rem;
  font-size: 0.85rem;
}

/* ---------- Reading progress (article pages, added by JS) ---------- */

.pk-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  z-index: 200;
  pointer-events: none;
}

/* ---------- Cards: hover life + tidy thumbnails ---------- */

.card { position: relative; }

.card-image {
  aspect-ratio: 16 / 9 !important;
  background: var(--cream-dark) !important;
  overflow: hidden;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.card-image img {
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card-image {
  box-shadow: 0 14px 32px rgba(26, 24, 20, 0.12);
  transform: translateY(-4px);
}

.card:hover .card-image img { transform: scale(1.035); }

.essay-entry .essay-image img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.essay-entry .essay-image { overflow: hidden; }
.essay-entry:hover .essay-image img { transform: scale(1.03); }

.featured-image { overflow: hidden; }
.featured-image img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.featured:hover .featured-image img { transform: scale(1.02); }

/* ---------- Reveal on scroll (class added by JS only) ---------- */

.pk-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pk-reveal.pk-in {
  opacity: 1;
  transform: none;
}

/* ---------- Article niceties ---------- */

.article-body blockquote {
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Share row ---------- */

.pk-share {
  max-width: 800px;
  margin: 2.5rem auto 0;
  padding: 0 2rem;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.pk-share-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

.pk-share a,
.pk-share button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0 0 2px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pk-share a:hover,
.pk-share button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.pk-share .pk-copy.pk-copied {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 700px) {
  .pk-share { padding: 0 1.5rem; }
}



/* ---------- Featured read-next route ---------- */

.pk-featured-next {
  max-width: 800px;
  margin: 3rem auto 0;
  padding: 0 2rem;
}

.pk-featured-next-link {
  display: grid;
  grid-template-columns: minmax(250px, 42%) 1fr;
  min-height: 240px;
  border: 1px solid var(--border);
  background: var(--cream-dark);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pk-featured-next-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(26, 24, 20, 0.12);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.pk-featured-next-image {
  min-height: 100%;
  background: var(--cream-dark);
  overflow: hidden;
}

.pk-featured-next-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.pk-featured-next-link:hover .pk-featured-next-image img { transform: scale(1.035); }

.pk-featured-next-copy {
  padding: 2rem 2.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pk-featured-next-kicker {
  display: block;
  margin-bottom: 0.65rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pk-featured-next-copy h3 {
  margin: 0 0 0.8rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.2s ease;
}

.pk-featured-next-link:hover h3 { color: var(--accent); }

.pk-featured-next-copy p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.65;
}

.pk-featured-next-cta {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  .pk-featured-next { padding: 0 1.5rem; }
  .pk-featured-next-link { grid-template-columns: 1fr; min-height: 0; }
  .pk-featured-next-image { aspect-ratio: 16 / 9; }
  .pk-featured-next-copy { padding: 1.5rem; }
}


/* ---------- Keep reading ---------- */

.pk-next {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 3rem 2rem 1rem;
  border-top: 1px solid var(--border);
}

.pk-next-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.pk-next-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 500;
}

.pk-next-all {
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.pk-next-all:hover { color: var(--accent); }

.pk-next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.pk-next-card a { display: block; }

.pk-next-img {
  aspect-ratio: 16 / 9;
  background: var(--cream-dark);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.pk-next-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pk-next-card:hover .pk-next-img {
  box-shadow: 0 14px 32px rgba(26, 24, 20, 0.12);
  transform: translateY(-4px);
}

.pk-next-card:hover .pk-next-img img { transform: scale(1.035); }

.pk-next-tag {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.pk-next-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.6rem;
  transition: color 0.2s ease;
}

.pk-next-card:hover h4 { color: var(--accent); }

.pk-next-card p {
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .pk-next { padding: 2.5rem 1.5rem 1rem; }
  .pk-next-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Newsletter reassurance ---------- */

.pk-nl-note {
  flex-basis: 100%;
  width: 100%;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
  text-align: center;
  letter-spacing: 0.01em;
}

.pk-nl-note a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
}

.pk-nl-note a:hover { color: var(--accent); opacity: 1; }

/* Standalone subscribe block (pages without their own styled form) */
.pk-subscribe {
  max-width: 800px;
  margin: 4rem auto 0;
  padding: 2.5rem 2rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.pk-subscribe h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.pk-subscribe > p {
  color: var(--ink-soft);
  max-width: 500px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}

.pk-subscribe form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 450px;
  margin: 0 auto;
}

.pk-subscribe form label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pk-subscribe input[type="email"] {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit;
}

.pk-subscribe input[type="submit"] {
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: inherit;
}

.pk-subscribe input[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .pk-subscribe form { flex-direction: column; }
  .pk-subscribe input[type="email"],
  .pk-subscribe input[type="submit"] { width: 100%; }
}



/* ---------- Voluntary reader support ---------- */

.pk-support {
  max-width: 560px;
  margin: 1.9rem auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.end-block .pk-support p {
  max-width: 520px;
  margin: 0 auto 1rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pk-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pk-support-button:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}


/* ---------- Reading nudge (article pages, injected by JS) ---------- */

.pk-nudge {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: min(340px, calc(100vw - 3rem));
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(26, 24, 20, 0.18);
  padding: 1.5rem 1.5rem 1.35rem;
  z-index: 150;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.pk-nudge.pk-nudge-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pk-nudge-close {
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0.35rem;
  transition: color 0.2s ease;
}

.pk-nudge-close:hover { color: var(--ink); }

.pk-nudge h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  padding-right: 1rem;
}

.pk-nudge > p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.pk-nudge form {
  display: flex;
  gap: 0.4rem;
}

.pk-nudge input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
}

.pk-nudge input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.pk-nudge input[type="submit"] {
  padding: 0.6rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 500;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
}

.pk-nudge input[type="submit"]:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.pk-nudge-fineprint {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .pk-nudge {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ---------- Footer ---------- */

.footer-links a { transition: color 0.2s ease; }

/* ---------- Print ---------- */

@media print {
  nav, .pk-nudge, .pk-share, .pk-featured-next, .pk-next, .newsletter, .end-block,
  .pk-subscribe, .pk-progress, footer { display: none !important; }
  body { background: #fff; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .pk-reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* Public corrections, updates and archive tools */
.pk-public-note {
  max-width: 760px;
  margin: 2rem auto;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--border, #d9d2c0);
  border-bottom: 1px solid var(--border, #d9d2c0);
  color: var(--ink-soft, #3a3630);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: .9rem;
  line-height: 1.65;
}
.pk-public-note strong { color: var(--ink, #1a1814); letter-spacing: .04em; font-size: .78rem; }
.pk-correction strong { color: var(--accent, #8b4513); }
.featured-status {
  display: block;
  margin-bottom: .45rem;
  color: var(--ink-muted, #6b6560);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
a.tag, a.essay-kicker { display: inline-block; }
a.tag:hover, a.essay-kicker:hover { text-decoration: underline; text-underline-offset: 3px; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.pk-inline-signup { margin: 2rem 0; padding: 1.3rem 0; border-top: 1px solid var(--border, #d9d2c0); border-bottom: 1px solid var(--border, #d9d2c0); }
.pk-inline-signup form { display: flex; gap: .6rem; max-width: 580px; }
.pk-inline-signup input { flex: 1; min-width: 0; padding: .8rem .9rem; border: 1px solid var(--border, #d9d2c0); background: transparent; color: var(--ink, #1a1814); font: inherit; }
.pk-inline-signup button { padding: .8rem 1rem; border: 1px solid var(--ink, #1a1814); background: var(--ink, #1a1814); color: var(--cream, #f5f1e8); font: inherit; cursor: pointer; }
.archive-tools { max-width: 760px; margin: 0 auto 2rem; }
.archive-search { width: 100%; padding: .9rem 1rem; border: 1px solid var(--border, #d9d2c0); background: transparent; color: var(--ink, #1a1814); font: inherit; }
.archive-status { margin-top: .65rem; color: var(--ink-muted, #6b6560); font-size: .82rem; }
.archive-list { max-width: 900px; margin: 0 auto 5rem; padding: 0 2rem; }
.archive-entry { display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border, #d9d2c0); }
.archive-entry:last-child { border-bottom: 1px solid var(--border, #d9d2c0); }
.archive-entry img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.archive-entry h2 { font-family: 'Playfair Display', serif; font-size: 1.45rem; line-height: 1.2; margin: .2rem 0 .45rem; }
.archive-entry p { color: var(--ink-soft, #3a3630); font-size: .92rem; line-height: 1.55; }
.archive-meta { color: var(--ink-muted, #6b6560); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 640px) {
  .pk-inline-signup form { flex-direction: column; }
  .archive-entry { grid-template-columns: 1fr; gap: .8rem; }
}

/* ========================================================================== 
   SEPTEMBER 2026 — PREMIUM MAGAZINE OVERHAUL
   This layer deliberately keeps Popkulturist's paper / ink / rust identity,
   then treats the site like a small independent magazine rather than a feed.
   ========================================================================== */

:root {
  --pk-paper: var(--cream, #f5f1e8);
  --pk-paper-deep: #e9e1d2;
  --pk-ink: var(--ink, #1a1814);
  --pk-ink-2: var(--ink-soft, #3a3630);
  --pk-muted: var(--ink-muted, #6b6560);
  --pk-rust: var(--accent, #8b4513);
  --pk-rule: color-mix(in srgb, var(--border, #d9d2c0) 82%, var(--pk-ink) 18%);
  --pk-max: 1320px;
  --pk-serif: 'Playfair Display', Georgia, serif;
  --pk-reading: 'Lora', Georgia, serif;
  --pk-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html { background: var(--pk-paper); }
body {
  background-color: var(--pk-paper);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(139,69,19,.025) 0 1px, transparent 1.2px),
    radial-gradient(circle at 78% 64%, rgba(26,24,20,.022) 0 1px, transparent 1.1px);
  background-size: 31px 31px, 43px 43px;
  color: var(--pk-ink);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  box-shadow: inset 0 0 0 1px rgba(26,24,20,.025);
}

/* ---------- Masthead navigation ---------- */
nav {
  padding: .82rem 0 !important;
  background: color-mix(in srgb, var(--pk-paper) 93%, transparent) !important;
  border-bottom-color: var(--pk-rule) !important;
  backdrop-filter: blur(14px) saturate(.9);
  -webkit-backdrop-filter: blur(14px) saturate(.9);
}

.nav-inner { max-width: var(--pk-max) !important; }
.logo {
  font-size: 1.95rem !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
}
.nav-links {
  gap: clamp(1rem, 2vw, 2rem) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding: .35rem 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--pk-rust);
  transition: right .25s ease;
}
.nav-links a:hover::after,
.nav-links a.current::after { right: 0; }

.subscribe-link a {
  padding: .53rem .9rem !important;
  border: 1px solid var(--pk-ink) !important;
  background: transparent;
  font-size: .67rem !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase;
}

/* ---------- Home: actual magazine masthead ---------- */
.pk-home .hero {
  max-width: var(--pk-max) !important;
  padding: 2rem 2rem 3.4rem !important;
  border-bottom: 0 !important;
}
.pk-masthead-topline {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--pk-ink);
  color: var(--pk-muted);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.pk-masthead-wordmark {
  /* The wordmark scales dramatically on wide screens, so its lower breathing
     room must scale with the type as well. Using em here keeps the descenders
     of the two p's safely inside the ruled masthead at every viewport width. */
  padding: .85rem 0 .20em;
  border-bottom: 1px solid var(--pk-ink);
  font-family: var(--pk-serif);
  font-size: clamp(5rem, 11.7vw, 10.2rem);
  font-weight: 700;
  letter-spacing: -.074em;
  line-height: .9;
  text-align: center;
  white-space: nowrap;
}
.pk-masthead-wordmark .dot { color: var(--pk-rust); }
.pk-home .hero h1 {
  max-width: 920px !important;
  margin: 2rem auto .85rem !important;
  font-size: clamp(1.8rem, 3.15vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}
.pk-home .hero-sub {
  max-width: 740px !important;
  margin-bottom: 1.25rem !important;
  font-family: var(--pk-reading);
  font-size: 1.03rem !important;
  line-height: 1.65 !important;
}
.pk-home .hero-meta {
  font-size: .66rem !important;
  font-weight: 600;
  letter-spacing: .16em !important;
}

/* ---------- Home: cover story ---------- */
.pk-home .featured.pk-cover-story {
  max-width: var(--pk-max) !important;
  min-height: 620px;
  margin: 0 auto 5.5rem !important;
  padding: 0 !important;
  grid-template-columns: minmax(0, 1.14fr) minmax(360px, .86fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: var(--pk-ink);
  color: var(--pk-paper);
  border: 1px solid var(--pk-ink);
  box-shadow: 0 28px 70px rgba(26,24,20,.12);
}
.pk-home .featured-figure {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #090908;
}
.pk-home .featured-image {
  flex: 1;
  min-height: 560px;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: #090908 !important;
}
.pk-home .featured-image img {
  object-fit: cover !important;
  object-position: 50% 35%;
}
.pk-home .featured-figure figcaption {
  margin: 0 !important;
  padding: .72rem 1rem .8rem;
  background: var(--pk-ink);
  color: rgba(245,241,232,.6) !important;
  border-top: 1px solid rgba(245,241,232,.14);
  text-align: left !important;
  font-size: .7rem !important;
}
.pk-home .featured-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5.5rem);
}
.pk-home .featured-status {
  margin-bottom: .8rem;
  color: rgba(245,241,232,.55) !important;
  font-size: .66rem !important;
  letter-spacing: .18em !important;
}
.pk-home .featured-content .tag { color: #d6a77e !important; }
.pk-home .featured-content h2 {
  margin-bottom: 1.35rem !important;
  color: var(--pk-paper);
  font-size: clamp(2.5rem, 4.5vw, 4.55rem) !important;
  line-height: 1.01 !important;
  letter-spacing: -.042em !important;
}
.pk-home .featured-content h2 a:hover { color: #d6a77e !important; }
.pk-home .featured-excerpt {
  color: rgba(245,241,232,.79) !important;
  font-family: var(--pk-reading);
  font-size: 1.08rem !important;
  line-height: 1.66 !important;
}
.pk-home .featured-content .byline { color: rgba(245,241,232,.52) !important; }
.pk-home .featured-content .read-more {
  align-self: flex-start;
  color: var(--pk-paper) !important;
  border-color: #d6a77e !important;
}
.pk-home .featured-content .view-all-lane { color: rgba(245,241,232,.56) !important; }
.pk-home .featured-content .view-all-lane:hover { color: var(--pk-paper) !important; }

/* ---------- Home: section grammar ---------- */
.pk-home-section {
  max-width: var(--pk-max);
  margin: 0 auto;
  padding: 0 2rem 5.75rem;
}
.pk-section-intro {
  display: grid;
  grid-template-columns: 170px minmax(300px, 1.35fr) minmax(280px, .8fr) auto;
  gap: 2rem;
  align-items: end;
  padding: 1.4rem 0 2rem;
  border-top: 2px solid var(--pk-ink);
}
.pk-section-kicker {
  align-self: start;
  padding-top: .34rem;
  color: var(--pk-rust);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pk-section-intro h2 {
  font-family: var(--pk-serif);
  font-size: clamp(2.5rem, 4.5vw, 4.65rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.047em;
}
.pk-section-intro p {
  max-width: 480px;
  color: var(--pk-muted);
  font-family: var(--pk-reading);
  font-size: .95rem;
  line-height: 1.62;
}
.pk-section-link {
  align-self: end;
  color: var(--pk-muted);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pk-section-link:hover { color: var(--pk-rust); }

.pk-home-grid { display: grid; }
.pk-home-grid .card { min-width: 0; }
.pk-home-grid .card-image {
  margin-bottom: 1.05rem !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(26,24,20,.08);
}
.pk-home-grid .card .tag {
  margin-bottom: .58rem !important;
  font-size: .64rem !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
}
.pk-home-grid .card h4 {
  margin-bottom: .62rem !important;
  font-weight: 500 !important;
  letter-spacing: -.018em;
}
.pk-home-grid .card p {
  color: var(--pk-muted) !important;
  font-family: var(--pk-reading);
  line-height: 1.55 !important;
}

/* Gamescom cluster: a front-page lead plus four supporting stories. */
.pk-gamescom-section-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 3.2rem 2.25rem;
}
.pk-gamescom-section-grid .card:nth-child(1) { grid-column: span 7; }
.pk-gamescom-section-grid .card:nth-child(2) { grid-column: span 5; }
.pk-gamescom-section-grid .card:nth-child(n+3) { grid-column: span 4; }
.pk-gamescom-section-grid .card:nth-child(1) h4 { font-size: clamp(2rem, 3.5vw, 3.25rem) !important; line-height: 1.08 !important; }
.pk-gamescom-section-grid .card:nth-child(1) p { max-width: 680px; font-size: 1.02rem !important; }
.pk-gamescom-section-grid .card:nth-child(1) .card-image { aspect-ratio: 16 / 9 !important; }
.pk-gamescom-section-grid .card:nth-child(2) h4 { font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important; line-height: 1.12 !important; }
.pk-gamescom-section-grid .card:nth-child(2) .card-image { aspect-ratio: 4 / 3 !important; }

/* The current magazine: broad and image-led. */
.pk-magazine-section { padding-top: .25rem; }
.pk-magazine-section-grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 3.4rem 2.25rem;
}
.pk-magazine-section-grid .card:nth-child(-n+2) { grid-column: span 6; }
.pk-magazine-section-grid .card:nth-child(n+3) { grid-column: span 4; }
.pk-magazine-section-grid .card:nth-child(-n+2) h4 {
  font-size: clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height: 1.08 !important;
}
.pk-magazine-section-grid .card:nth-child(-n+2) .card-image { aspect-ratio: 16 / 10 !important; }

/* Deep archive: compact enough to invite wandering rather than scrolling past. */
.pk-deep-section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.5rem;
}
.pk-deep-section-grid .card {
  display: grid !important;
  grid-template-columns: 145px minmax(0, 1fr);
  grid-template-areas:
    'image tag'
    'image title'
    'image copy';
  column-gap: 1.2rem;
  align-content: start;
  padding: 1.35rem 0;
  border-top: 1px solid var(--pk-rule);
}
.pk-deep-section-grid .card > a:first-child { grid-area: image; }
.pk-deep-section-grid .card .card-image {
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
}
.pk-deep-section-grid .card .tag { grid-area: tag; align-self: end; margin-top: .03rem; }
.pk-deep-section-grid .card h4 {
  grid-area: title;
  margin: 0 !important;
  font-size: 1.18rem !important;
  line-height: 1.18 !important;
}
.pk-deep-section-grid .card p {
  grid-area: copy;
  display: -webkit-box;
  margin: .5rem 0 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .83rem !important;
  line-height: 1.45 !important;
}

/* Browse shelf */
.pk-browse-strip {
  margin: 0 0 0;
  background: var(--pk-ink);
  color: var(--pk-paper);
  border-top: 1px solid var(--pk-ink);
  border-bottom: 1px solid var(--pk-ink);
}
.pk-browse-inner {
  max-width: var(--pk-max);
  margin: 0 auto;
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pk-browse-inner::-webkit-scrollbar { display: none; }
.pk-browse-label {
  margin-right: .7rem;
  color: rgba(245,241,232,.5);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pk-browse-inner a {
  padding: .48rem .78rem;
  border: 1px solid rgba(245,241,232,.25);
  border-radius: 999px;
  font-family: var(--pk-serif);
  font-size: .9rem;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pk-browse-inner a:hover {
  background: var(--pk-paper);
  border-color: var(--pk-paper);
  color: var(--pk-ink);
}

/* ---------- Newsletter: the back page ---------- */
.newsletter {
  padding: 6rem 2rem !important;
  background: var(--pk-ink) !important;
  color: var(--pk-paper) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.pk-home .pk-browse-strip + .newsletter { border-top: 1px solid rgba(245,241,232,.18) !important; }
.newsletter-inner { max-width: 720px !important; }
.pk-newsletter-kicker {
  margin-bottom: 1rem;
  color: #d6a77e;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.newsletter h3 {
  color: var(--pk-paper) !important;
  font-size: clamp(2.7rem, 5vw, 4.75rem) !important;
  line-height: 1 !important;
  letter-spacing: -.04em;
}
.newsletter > .newsletter-inner > p { color: rgba(245,241,232,.7) !important; font-family: var(--pk-reading); }
.newsletter .embeddable-buttondown-form { max-width: 540px !important; }
.newsletter .embeddable-buttondown-form input[type="email"] {
  border-color: rgba(245,241,232,.45) !important;
  background: transparent !important;
  color: var(--pk-paper) !important;
}
.newsletter .embeddable-buttondown-form input[type="email"]::placeholder { color: rgba(245,241,232,.5); }
.newsletter .embeddable-buttondown-form input[type="submit"] {
  background: var(--pk-paper) !important;
  color: var(--pk-ink) !important;
}
.newsletter .embeddable-buttondown-form input[type="submit"]:hover {
  background: #d6a77e !important;
}
.newsletter .embeddable-buttondown-form > p,
.newsletter .embeddable-buttondown-form > p a { color: rgba(245,241,232,.5) !important; }

/* ---------- Section / category pages ---------- */
body.pk-section-page .page-header,
body.pk-static-page .page-header,
body.pk-archive-page .page-header {
  max-width: var(--pk-max) !important;
  margin: 0 auto !important;
  padding: 5.5rem 2rem 1.5rem !important;
  text-align: left !important;
}
body.pk-section-page .page-header::after,
body.pk-static-page .page-header::after,
body.pk-archive-page .page-header::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 2.15rem;
  background: var(--pk-ink);
}
body.pk-section-page .page-header h1,
body.pk-static-page .page-header h1,
body.pk-archive-page .page-header h1 {
  max-width: 1050px;
  font-size: clamp(4rem, 8.5vw, 7.7rem) !important;
  line-height: .88 !important;
  letter-spacing: -.06em !important;
}
body.pk-section-page .page-header .page-eyebrow,
body.pk-static-page .page-header .page-eyebrow,
body.pk-archive-page .page-header .page-eyebrow {
  margin-bottom: 1rem !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
}
body.pk-section-page .essays-intro {
  max-width: var(--pk-max) !important;
  margin: 0 auto 3.8rem !important;
  padding: 0 2rem !important;
  text-align: left !important;
  font-size: 1.08rem !important;
}
body.pk-section-page .essays-intro::first-line { color: var(--pk-ink-2); }

body.pk-section-page .essays-list {
  max-width: var(--pk-max) !important;
  padding: 0 2rem 7rem !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.25rem;
}
body.pk-section-page .essay-entry {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  padding: 2rem 0 3.1rem !important;
  border-top: 1px solid var(--pk-rule) !important;
  border-bottom: 0 !important;
}
body.pk-section-page .essay-entry:not(:first-child) .essay-image { order: -1; margin-bottom: 1.35rem; }
body.pk-section-page .essay-image { overflow: hidden; }
body.pk-section-page .essay-image img {
  width: 100% !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 0 !important;
}
body.pk-section-page .essay-entry h2 {
  margin-bottom: .8rem !important;
  font-size: clamp(1.8rem, 2.8vw, 2.55rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
}
body.pk-section-page .essay-kicker {
  margin: .2rem 0 .55rem !important;
  font-size: .64rem !important;
  font-weight: 600 !important;
}
body.pk-section-page .essay-dek {
  margin-bottom: .8rem !important;
  font-size: .99rem !important;
  line-height: 1.6 !important;
  color: var(--pk-muted) !important;
}
body.pk-section-page .essay-byline {
  font-size: .74rem !important;
  letter-spacing: .025em;
}
body.pk-section-page .essay-entry:first-child {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 4rem !important;
  align-items: center !important;
  padding: 0 0 5rem !important;
  border-top: 0 !important;
}
body.pk-section-page .essay-entry:first-child .essay-image { grid-column: 2; grid-row: 1; }
body.pk-section-page .essay-entry:first-child .essay-text { grid-column: 1; grid-row: 1; }
body.pk-section-page .essay-entry:first-child .essay-image img { aspect-ratio: 4 / 3; }
body.pk-section-page .essay-entry:first-child h2 {
  font-size: clamp(2.8rem, 5vw, 4.85rem) !important;
  line-height: .99 !important;
  letter-spacing: -.045em !important;
}
body.pk-section-page .essay-entry:first-child .essay-dek {
  font-size: 1.08rem !important;
  line-height: 1.62 !important;
}

/* ---------- Article pages: generous cover treatment, restrained reading column ---------- */
body.pk-article .article-header {
  max-width: 1120px !important;
  padding: 5.8rem 2rem 2rem !important;
  text-align: left !important;
}
body.pk-article .article-header .tag {
  margin-bottom: 1.2rem !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
}
body.pk-article .article-header h1 {
  max-width: 1080px;
  margin-bottom: 1.4rem !important;
  font-size: clamp(3.4rem, 6.6vw, 6.75rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}
body.pk-article .article-dek {
  max-width: 820px !important;
  margin: 0 0 2.1rem !important;
  color: var(--pk-ink-2) !important;
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  line-height: 1.56 !important;
}
body.pk-article .article-meta {
  justify-content: center !important;
  text-align: center !important;
  padding: .85rem 0 !important;
  border-top: 1px solid var(--pk-ink) !important;
  border-bottom: 1px solid var(--pk-rule) !important;
  font-size: .75rem !important;
  letter-spacing: .035em;
}
body.pk-article .article-hero {
  max-width: 1240px !important;
  margin: 2.75rem auto 0 !important;
  padding: 0 2rem !important;
}
body.pk-article .article-hero-image {
  border: 0 !important;
  box-shadow: 0 24px 60px rgba(26,24,20,.09);
}
body.pk-article .article-hero-caption {
  max-width: 800px;
  margin: .75rem auto 0 !important;
  font-size: .72rem !important;
}
body.pk-article .article-body {
  max-width: 760px !important;
  margin: 4.5rem auto !important;
  padding: 0 2rem !important;
  font-size: 1.17rem !important;
  line-height: 1.84 !important;
  color: #342f2a !important;
}
body.pk-article .article-body p { margin-bottom: 1.65rem !important; }
body.pk-article .article-body p:first-child::first-letter {
  font-size: 5.25rem !important;
  line-height: .78 !important;
  margin-right: .56rem !important;
  color: var(--pk-rust) !important;
}
body.pk-article .article-body h2 {
  margin: 3rem 0 1.15rem !important;
  padding-top: 0;
  font-size: clamp(1.7rem, 3vw, 2.15rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -.03em !important;
}
body.pk-article .article-body blockquote {
  margin: 2.8rem -1.5rem !important;
  padding: .4rem 0 .4rem 1.5rem !important;
  border-left-width: 3px !important;
  color: var(--pk-ink) !important;
  font-family: var(--pk-serif);
  font-size: 1.35rem;
  line-height: 1.55;
}
body.pk-article .article-figure,
body.pk-article .article-video {
  width: min(980px, calc(100vw - 3rem));
  max-width: none !important;
  margin: 3rem 50% !important;
  transform: translateX(-50%);
}
body.pk-article .article-figure img { border: 0 !important; }
body.pk-article .article-figure figcaption,
body.pk-article .article-video figcaption { max-width: 760px; margin-left: auto; margin-right: auto; }
body.pk-article .author-block {
  max-width: 760px !important;
  padding: 2.2rem !important;
  background: color-mix(in srgb, var(--pk-paper-deep) 70%, var(--pk-paper));
  border: 1px solid var(--pk-rule) !important;
}
body.pk-article .author-avatar {
  width: 104px !important;
  height: 104px !important;
  border: 0 !important;
  border-radius: 50%;
}
body.pk-article .author-name { font-size: 1.5rem !important; }
body.pk-article .end-block {
  max-width: 760px !important;
  margin-top: 3rem !important;
  padding: 3rem 2.5rem !important;
  background: var(--pk-ink);
  color: var(--pk-paper);
  border: 0 !important;
}
body.pk-article .end-block h3 { color: var(--pk-paper); font-size: 1.7rem !important; }
body.pk-article .end-block p { color: rgba(245,241,232,.72) !important; }
body.pk-article .end-block .embeddable-buttondown-form input[type="email"] {
  background: transparent !important;
  color: var(--pk-paper) !important;
  border-color: rgba(245,241,232,.45) !important;
}
body.pk-article .end-block .embeddable-buttondown-form input[type="submit"] {
  background: var(--pk-paper) !important;
  color: var(--pk-ink) !important;
}

/* Keep reading becomes a proper magazine back-of-book spread. */
body.pk-article .pk-next {
  max-width: var(--pk-max) !important;
  padding: 4rem 2rem 2rem !important;
  margin-top: 5rem !important;
  border-top: 2px solid var(--pk-ink) !important;
}
body.pk-article .pk-next-head h3 {
  font-size: clamp(2.5rem, 4vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: -.04em;
}
body.pk-article .pk-next-grid { gap: 2.3rem !important; }
body.pk-article .pk-next-card h4 { font-size: 1.35rem !important; line-height: 1.16 !important; }

/* ---------- Static / about pages ---------- */
body.pk-static-page .page-body {
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 1.5rem 2rem 6rem !important;
  font-family: var(--pk-reading);
  font-size: 1.12rem;
  line-height: 1.8;
}
body.pk-static-page .page-body .lead {
  font-size: 1.35rem !important;
  line-height: 1.7 !important;
  color: var(--pk-ink-2);
}
body.pk-static-page .page-body h2,
body.pk-static-page .page-body h3 {
  font-family: var(--pk-serif);
  color: var(--pk-ink);
  letter-spacing: -.025em;
}
body.pk-static-page .pk-inline-signup {
  margin: 3rem 0 !important;
  padding: 2rem !important;
  background: var(--pk-paper-deep);
  border: 0 !important;
}

/* ---------- Archive ---------- */
body.pk-archive-page .archive-tools {
  max-width: var(--pk-max) !important;
  margin: .5rem auto 2.4rem !important;
  padding: 0 2rem;
}
body.pk-archive-page .archive-search {
  padding: 1.05rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pk-ink) !important;
  font-family: var(--pk-serif) !important;
  font-size: 1.2rem !important;
}
body.pk-archive-page .archive-list {
  max-width: 1100px !important;
  padding: 0 2rem 7rem !important;
}
body.pk-archive-page .archive-entry {
  grid-template-columns: 210px minmax(0,1fr) !important;
  gap: 2rem !important;
  padding: 1.6rem 0 !important;
}
body.pk-archive-page .archive-entry h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.025em;
}
body.pk-archive-page .archive-entry img { border: 0; }

/* ---------- Footer ---------- */
footer { max-width: var(--pk-max) !important; padding-top: 3.3rem !important; }
.footer-top { border-bottom-color: var(--pk-ink) !important; }
.footer-logo {
  font-size: 1.7rem !important;
  letter-spacing: -.04em;
}
.footer-links {
  font-size: .68rem !important;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-bottom { font-size: .7rem !important; letter-spacing: .025em; }

/* ---------- Small-screen editorial design ---------- */
@media (max-width: 1040px) {
  .pk-section-intro { grid-template-columns: 130px 1fr 1fr; }
  .pk-section-intro .pk-section-link { grid-column: 2 / -1; justify-self: start; }
  .pk-gamescom-section-grid .card:nth-child(1),
  .pk-gamescom-section-grid .card:nth-child(2) { grid-column: span 6; }
  .pk-gamescom-section-grid .card:nth-child(n+3) { grid-column: span 4; }
  .pk-magazine-section-grid .card:nth-child(n+3) { grid-column: span 6; }
}

@media (max-width: 900px) {
  .pk-home .featured.pk-cover-story {
    grid-template-columns: 1fr !important;
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
    min-height: 0;
  }
  .pk-home .featured-image { min-height: 0; aspect-ratio: 4 / 3 !important; }
  .pk-home .featured-content { padding: 2.5rem !important; }
  .pk-home .featured-content h2 { font-size: clamp(2.5rem, 8vw, 4rem) !important; }
  .pk-section-intro { grid-template-columns: 1fr; gap: .65rem; align-items: start; }
  .pk-section-kicker { padding-top: 0; }
  .pk-section-intro p { max-width: 650px; }
  .pk-section-intro .pk-section-link { grid-column: auto; }
  .pk-gamescom-section-grid,
  .pk-magazine-section-grid { gap: 2.5rem 1.5rem; }
  .pk-gamescom-section-grid .card:nth-child(n),
  .pk-magazine-section-grid .card:nth-child(n) { grid-column: span 6; }
  .pk-deep-section-grid { grid-template-columns: 1fr; }

  body.pk-section-page .essay-entry:first-child {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  body.pk-section-page .essay-entry:first-child .essay-image,
  body.pk-section-page .essay-entry:first-child .essay-text { grid-column: 1; }
  body.pk-section-page .essay-entry:first-child .essay-image { grid-row: 1; }
  body.pk-section-page .essay-entry:first-child .essay-text { grid-row: 2; }
}

@media (max-width: 800px) {
  nav { padding: .72rem 0 !important; }
  body.menu-open .nav-links {
    background: var(--pk-ink) !important;
    color: var(--pk-paper);
    gap: 1.25rem !important;
    font-family: var(--pk-serif) !important;
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    text-transform: none;
    letter-spacing: -.02em !important;
  }
  body.menu-open .nav-links a { color: var(--pk-paper) !important; }
  body.menu-open .hamburger span { background: var(--pk-paper) !important; }
  body.menu-open .subscribe-link a {
    border-color: var(--pk-paper) !important;
    color: var(--pk-paper) !important;
  }
}

@media (max-width: 700px) {
  .pk-home .hero { padding: 1.2rem 1.25rem 2.8rem !important; }
  .pk-masthead-topline { gap: .8rem; font-size: .55rem; letter-spacing: .1em; }
  .pk-masthead-wordmark {
    padding: .75rem 0 .20em;
    font-size: clamp(3.25rem, 17.5vw, 5rem);
    letter-spacing: -.07em;
  }
  .pk-home .hero h1 { margin-top: 1.4rem !important; font-size: 1.65rem !important; }
  .pk-home .hero-sub { font-size: .93rem !important; }
  .pk-home .hero-meta { font-size: .56rem !important; }

  .pk-home-section { padding: 0 1.25rem 4rem; }
  .pk-section-intro { padding: 1.1rem 0 1.5rem; }
  .pk-section-intro h2 { font-size: 2.65rem; }
  .pk-section-intro p { font-size: .91rem; }

  .pk-gamescom-section-grid,
  .pk-magazine-section-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .pk-gamescom-section-grid .card:nth-child(n),
  .pk-magazine-section-grid .card:nth-child(n) { grid-column: 1 !important; }
  .pk-gamescom-section-grid .card:nth-child(1) h4,
  .pk-magazine-section-grid .card:nth-child(-n+2) h4 { font-size: 2rem !important; }
  .pk-deep-section-grid .card { grid-template-columns: 112px minmax(0,1fr); column-gap: 1rem; }
  .pk-deep-section-grid .card p { display: none; }
  .pk-browse-inner { padding: 1.1rem 1.25rem; }

  .newsletter { padding: 4.5rem 1.25rem !important; }
  .newsletter h3 { font-size: 3rem !important; }

  body.pk-section-page .page-header,
  body.pk-static-page .page-header,
  body.pk-archive-page .page-header { padding: 3.6rem 1.25rem 1rem !important; }
  body.pk-section-page .page-header h1,
  body.pk-static-page .page-header h1,
  body.pk-archive-page .page-header h1 { font-size: clamp(3.3rem, 18vw, 5rem) !important; }
  body.pk-section-page .essays-intro { padding: 0 1.25rem !important; margin-bottom: 2.5rem !important; }
  body.pk-section-page .essays-list { grid-template-columns: 1fr; padding: 0 1.25rem 5rem !important; }
  body.pk-section-page .essay-entry:first-child { padding-bottom: 3.5rem !important; }
  body.pk-section-page .essay-entry:first-child h2 { font-size: 2.6rem !important; }

  body.pk-article .article-header { padding: 3.6rem 1.25rem 1.5rem !important; }
  body.pk-article .article-header h1 { font-size: clamp(2.7rem, 13vw, 4rem) !important; }
  body.pk-article .article-dek { font-size: 1.08rem !important; }
  body.pk-article .article-meta { line-height: 1.6; }
  body.pk-article .article-hero { padding: 0 !important; margin-top: 1.4rem !important; }
  body.pk-article .article-hero-caption { padding: 0 1.25rem; }
  body.pk-article .article-body { margin: 3.1rem auto !important; padding: 0 1.25rem !important; font-size: 1.06rem !important; line-height: 1.78 !important; }
  body.pk-article .article-body blockquote { margin-left: 0 !important; margin-right: 0 !important; font-size: 1.2rem; }
  body.pk-article .article-figure,
  body.pk-article .article-video { width: calc(100vw - 1.5rem); }
  body.pk-article .author-block { margin-left: 1.25rem !important; margin-right: 1.25rem !important; padding: 1.5rem !important; }
  body.pk-article .end-block { margin-left: 1.25rem !important; margin-right: 1.25rem !important; padding: 2.25rem 1.5rem !important; }
  body.pk-article .pk-next { padding: 3rem 1.25rem 1rem !important; }

  body.pk-static-page .page-body { padding: 1rem 1.25rem 5rem !important; font-size: 1.03rem; }
  body.pk-archive-page .archive-tools { padding: 0 1.25rem; }
  body.pk-archive-page .archive-list { padding: 0 1.25rem 5rem !important; }
  body.pk-archive-page .archive-entry { grid-template-columns: 112px minmax(0,1fr) !important; gap: 1.1rem !important; }
  body.pk-archive-page .archive-entry p { display: none; }
  body.pk-archive-page .archive-entry h2 { font-size: 1.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Final alignment details */
.pk-home .featured-content .tag,
.pk-home .featured-content .featured-status,
.pk-home .featured-content .view-all-lane { align-self: flex-start; }
.pk-home .featured-content .view-all-lane {
  margin-left: 0 !important;
  margin-top: 1rem;
}

/* ========================================================================== 
   SEPTEMBER 2026 — IMAGE INTEGRITY PASS
   Popkulturist already has art-directed hero and portrait crops. The layout
   must respect those crops instead of inventing a third crop in CSS.
   ========================================================================== */

/* Editorial images keep the composition they were supplied with. */
.card-image,
.pk-next-img,
.pk-featured-next-image,
body.pk-section-page .essay-image,
body.pk-archive-page .archive-entry > div:first-child,
body.pk-article .article-hero-image {
  aspect-ratio: auto !important;
}

.card-image img,
.pk-next-img img,
.pk-featured-next-image img,
body.pk-section-page .essay-image img,
body.pk-archive-page .archive-entry img,
body.pk-article .article-hero-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
}

/* The photography is already cropped deliberately; hover movement must not
   crop it again. Keep the tactile card lift, lose the zoom-in recrop. */
.card:hover .card-image img,
.essay-entry:hover .essay-image img,
.featured:hover .featured-image img,
.pk-next-card:hover .pk-next-img img,
.pk-featured-next-link:hover .pk-featured-next-image img {
  transform: none !important;
}

/* Cover story: the portrait art fills the full left-hand image field.
   The image is cropped inside the frame rather than letterboxed, so there are
   no black bands above or below it. */
.pk-home .featured.pk-cover-story {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr) !important;
  min-height: 0 !important;
  align-items: stretch !important;
}
.pk-home .featured-figure {
  align-self: stretch;
  justify-content: stretch;
}
.pk-home .featured-image {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100%;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.pk-home .featured-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: 58% 50% !important;
}

/* Home cards use the wide editorial crop at its own native ratio. */
.pk-home .card-image,
.pk-gamescom-section-grid .card:nth-child(1) .card-image,
.pk-gamescom-section-grid .card:nth-child(2) .card-image,
.pk-magazine-section-grid .card:nth-child(-n+2) .card-image,
.pk-deep-section-grid .card .card-image {
  aspect-ratio: auto !important;
}
.pk-home .card-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Section pages already use the Hochkant files. Let them remain Hochkant. */
body.pk-section-page .essay-image {
  overflow: hidden;
}
body.pk-section-page .essay-image img,
body.pk-section-page .essay-entry:first-child .essay-image img {
  aspect-ratio: auto !important;
}

/* Back-of-book modules use hero/wide art without shaving off the edges. */
.pk-next-img,
.pk-featured-next-image {
  min-height: 0 !important;
  overflow: hidden;
}
.pk-featured-next-link {
  min-height: 0 !important;
  align-items: center;
}

/* Archive thumbnails likewise keep the original wide composition. */
body.pk-archive-page .archive-entry img {
  aspect-ratio: auto !important;
}

@media (max-width: 900px) {
  .pk-home .featured.pk-cover-story {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .pk-home .featured-figure {
    width: min(100%, 660px);
    margin: 0 auto;
  }
  .pk-home .featured-image {
    flex: none !important;
    aspect-ratio: 4 / 5 !important;
    max-height: none !important;
  }
}

@media (max-width: 700px) {
  .pk-featured-next-image { aspect-ratio: auto !important; }
}


/* Fortune Fragments ships only a 2:3 Steam library capsule rather than the
   4:5 Hochkant used by the rest of the section. Give it the same 4:5 page
   rhythm while preserving the full title treatment and every character. */
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image {
  aspect-ratio: 4 / 5 !important;
  position: relative;
  overflow: hidden;
  background: #c9a1dc;
}
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #c9a1dc;
}
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image a::before {
  content: "";
  position: absolute;
  inset: -8%;
  background-image: url("https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/3601160/c9ab15f3a81de37aa1be65c12c019786a37220bd/library_capsule_2x.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(24px);
  transform: scale(1.08);
  opacity: .6;
}
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ========================================================================== 
   16 SEPTEMBER 2026 — LIST IMAGE CONSISTENCY + SUPPORT BUTTON VISIBILITY
   Images shown as one editorial list share one aspect ratio. Standalone hero
   art keeps its art-directed/native treatment from the integrity pass above.
   ========================================================================== */

/* Reader-support CTA lives on the dark article end-block. Keep it legible
   before hover as well as on hover. */
body.pk-article .end-block .pk-support {
  border-top-color: rgba(245, 241, 232, .24) !important;
}
body.pk-article .end-block .pk-support-button {
  color: var(--pk-paper, #f5f1e8) !important;
  border-color: rgba(245, 241, 232, .72) !important;
  background: transparent !important;
}
body.pk-article .end-block .pk-support-button:hover,
body.pk-article .end-block .pk-support-button:focus-visible {
  color: var(--pk-ink, #1a1814) !important;
  background: var(--pk-paper, #f5f1e8) !important;
  border-color: var(--pk-paper, #f5f1e8) !important;
}

/* Standard editorial cards: one wide format within every card list. */
.card-image,
.pk-next-img,
.pk-featured-next-image,
body.pk-archive-page .archive-entry > div:first-child {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.card-image img,
.pk-next-img img,
.pk-featured-next-image img,
body.pk-archive-page .archive-entry img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Homepage sections should not silently switch ratios by card position. */
.pk-gamescom-section-grid .card:nth-child(n) .card-image,
.pk-magazine-section-grid .card:nth-child(n) .card-image {
  aspect-ratio: 16 / 9 !important;
}

/* The compact deep-archive list is deliberately square; every item matches. */
.pk-deep-section-grid .card .card-image {
  aspect-ratio: 1 / 1 !important;
}
.pk-deep-section-grid .card .card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Section/index pages use the dedicated Hochkant crop: one 4:5 rhythm for
   every story, including the lead story. */
body.pk-section-page .essay-image,
body.pk-section-page .essay-entry:first-child .essay-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}
body.pk-section-page .essay-image img,
body.pk-section-page .essay-entry:first-child .essay-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Fortune Fragments has only a 2:3 Steam capsule. Keep the common 4:5 slot,
   but preserve the complete capsule over the existing blurred fill. */
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image {
  aspect-ratio: 4 / 5 !important;
}
body.pk-section-page .essay-entry.pk-fortune-entry .essay-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 17 SEPTEMBER 2026 — LATEST PIECES ART-DIRECTION
   Keep the From Cologne visual rhythm without forcing 4:3 photography into
   a 16:9 crop. The full supplied image sits over a quiet blurred extension. */
.pk-latest-section .card-image {
  position: relative;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #181612;
  isolation: isolate;
}
.pk-latest-section .card-image::before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 0;
  background-image: var(--pk-card-art);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
  opacity: .32;
  transform: scale(1.08);
}
.pk-latest-section .card-image img {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* 17 SEPTEMBER 2026 — DEEP BROWSE IMAGE INTEGRITY
   These cards all use deliberately composed 16:9 hero art. Preserve that
   composition instead of forcing it through the old square thumbnail slot. */
.pk-deep-section-grid .card .card-image {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.pk-deep-section-grid .card .card-image img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ---------- Mobile horizontal overflow fix (2026-09-18) ----------
   Home and article footers used a non-wrapping flex row, making the document
   wider than the phone viewport. Section pages already wrap these links. */
.footer-links {
  flex-wrap: wrap;
  min-width: 0;
}

@media (max-width: 700px) {
  .footer-links {
    max-width: 100%;
    gap: .75rem 1rem;
  }
}

/* Preserve the corrected full-screen mobile menu: backdrop-filter on the sticky
   nav creates a containing block for fixed descendants in Chromium. Remove it
   only while the menu is open so the overlay is fixed to the viewport. */
@media (max-width: 800px) {
  body.menu-open nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* 22 SEP 2026 — TRANSFORMERS ART-DIRECTED PORTRAIT
   The local 4:5 asset already contains the complete title lockup. Do not
   nudge it inside either the homepage cover or section listing frames. */
.pk-home .featured-image img[src="/images/transformers-hochkant.jpg"],
body.pk-section-page .essay-image img[src="/images/transformers-hochkant.jpg"] {
  object-position: center center !important;
}


/* Gamescom 2026 final follow-up art direction */
.pk-home .featured.pk-gamescom-final-cover .featured-image {
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}
.pk-home .featured.pk-gamescom-final-cover .featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}
body.pk-article .article-hero-image.pk-gamescom-final-hero {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
body.pk-article .article-hero-image.pk-gamescom-final-hero img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}


/* 29 SEP 2026 — targeted crop fixes */
.pk-home .pk-gamescom-section-grid .card:first-child .card-image { overflow: hidden !important; }
.pk-home .pk-gamescom-section-grid .card:first-child .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 50% 44% !important; }
body.pk-section-page .essay-image > a { display: block; width: 100%; height: 100%; }


/* GiocoNews article hero: crop the lower part so the photograph fills the hero frame. */
body.pk-article .article-hero-image.pk-gioconews-hero {
  aspect-ratio: 2.1 / 1 !important;
  overflow: hidden !important;
}
body.pk-article .article-hero-image.pk-gioconews-hero img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: 50% 0% !important;
}

/* SIFF story long-headline refinements.
   Keep the full festival name without leaving lone words on display lines. */
body.pk-section-page .essay-entry.pk-siff-lead h2 {
  font-size: clamp(2.45rem, 3.15vw, 3rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}
@media (max-width: 900px) {
  body.pk-section-page .essay-entry.pk-siff-lead h2 {
    font-size: clamp(2rem, 5.3vw, 2.85rem) !important;
  }
}
@media (max-width: 700px) {
  body.pk-section-page .essay-entry.pk-siff-lead h2 {
    font-size: clamp(1.95rem, 7.7vw, 2.3rem) !important;
  }
  body.pk-article.pk-siff-story .article-header h1 {
    font-size: clamp(2.1rem, 8.6vw, 3.3rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.043em !important;
  }
  .pk-home .featured.pk-siff-cover .featured-content {
    padding: 1.6rem !important;
  }
  .pk-home .featured.pk-siff-cover .featured-content h2 {
    font-size: clamp(1.7rem, 7.2vw, 2.75rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }
}
@media (max-width: 350px) {
  body.pk-article.pk-siff-story .article-header h1 { font-size: 1.88rem !important; }
  .pk-home .featured.pk-siff-cover .featured-content { padding: 1rem !important; }
  .pk-home .featured.pk-siff-cover .featured-content h2 { font-size: 1.52rem !important; }
}

/* The two-sentence SIFF subheading: keep sentence boundaries intact.
   Separate block lines on roomy screens, permit natural mobile wrapping. */
body.pk-article.pk-siff-story .article-body h2.siff-concrete-heading {
  text-wrap: wrap !important;
}
body.pk-article.pk-siff-story .article-body h2.siff-concrete-heading > span {
  display: block;
}
@media (min-width: 701px) {
  body.pk-article.pk-siff-story .article-body h2.siff-concrete-heading > span {
    white-space: nowrap;
  }
}


/* 14 OCT 2026 — SITE IMAGE CONSISTENCY / DUPLICATE-REPAIR PASS
   List images have fixed editorial frames and must fill them. The previous
   late-stage 'contain' overrides created bands around 16:9 images, and an
   older first-child-only 'cover' made identical cards look different. */
.pk-home .pk-latest-section .card-image,
.pk-home .pk-deep-section-grid .card-image {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  position: relative;
}
.pk-home .pk-latest-section .card-image img,
.pk-home .pk-deep-section-grid .card-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}
/* The blurred extension was a fallback for `contain`. It is no longer needed. */
.pk-home .pk-latest-section .card-image::before { display: none !important; }

/* Archive: wide art belongs in a 16:9 thumbnail, not an unbounded image/anchor.
   Other section pages keep their separately art-directed 4:5 Hochkant format. */
body.pk-archive-page .archive-entry > div:first-child {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
body.pk-archive-page .archive-entry > div:first-child > a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
body.pk-archive-page .archive-entry > div:first-child img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

/* Archived article pages: actual hero frames are panoramic. Preserve any
   explicit focal position and the deliberate 2.1:1 GiocoNews exception. */
body.pk-article .article-hero-image:not(.pk-gioconews-hero) {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
body.pk-article .article-hero-image:not(.pk-gioconews-hero) > img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  display: block !important;
}

/* 15 OCT 2026 — STORY-SPECIFIC IMAGE FRAMING
   Targeted art direction must beat the older global !important centring rules.
   These affect only the two stories and leave other cover/section art alone. */
.pk-home .pk-latest-section .card-image img.pk-requiem-home-art {
  object-position: 92% 50% !important;
}
/* Witcher lead Hochkant: beat the lead-card-specific centring rule above.
   The landscape source contains Geralt at its far left. Zero left offset shows
   his complete shoulder, swords and upper torso rather than a sliver. */
body.pk-section-page .essay-entry:first-child .essay-image img.pk-witcher-portrait-art,
body.pk-section-page .essay-image img.pk-witcher-portrait-art {
  object-position: left center !important;
}
body.pk-section-page .essay-image img.pk-requiem-portrait-art {
  object-position: 50% 50% !important;
}


/* 16 OCT 2026 — SHARED ARTICLE READING WIDTH
   Inline media belongs to the prose column. Keep the wider, separately
   art-directed article hero and homepage imagery exactly as they are.
   Do not widen special multi-image pairs or data visualisations. */
body.pk-article .article-body {
  max-width: 784px !important; /* 720px reading measure + 32px side gutters */
  padding-inline: 2rem !important;
  line-height: 1.76 !important;
}
body.pk-article .article-body > :is(.article-figure, .article-video, .article-inline-image) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  margin: 2.6rem 0 !important;
  transform: none !important;
}
body.pk-article .article-body > :is(.article-figure, .article-inline-image) img {
  display: block;
  max-width: 100%;
  height: auto;
}
body.pk-article .article-body > :is(.article-figure, .article-video, .article-inline-image) figcaption {
  max-width: 100%;
  box-sizing: border-box;
}
/* 16 OCT 2026 — MOBILE ARTICLE RHYTHM
   Give the headline, hero, captions, prose, subheads and inline media the same
   16px side gutters. Desktop column and wide-hero treatment stay unchanged. */
@media (max-width: 700px) {
  body.pk-article .article-header,
  body.pk-article .article-hero {
    padding-inline: 1rem !important;
  }
  body.pk-article .article-hero-caption {
    padding-inline: 0 !important;
  }
  body.pk-article .article-body {
    max-width: 100% !important;
    padding-inline: 1rem !important;
    font-size: 1.1875rem !important; /* 19px */
    line-height: 1.62 !important;
  }
  body.pk-article .article-body p:first-child::first-letter {
    font-size: 4.65rem !important;
    margin-right: .42rem !important;
  }
  body.pk-article .article-body > :is(.article-figure, .article-video, .article-inline-image) {
    margin-block: 2.4rem !important;
  }
}

/* 16 OCT 2026 — MOBILE BROWSERS USING A DESKTOP-SIZED LAYOUT VIEWPORT
   Some mobile Chrome configurations lay out this site at ~980 CSS px and
   scale it to the phone screen. Width-only @media(max-width:700px) rules then
   never run, leaving a 720px body floating in a nearly full-width hero.
   Match the touch device instead; keep conventional desktop browsers intact.
   The 2rem gutter is scaled with the wider virtual viewport and coincides
   exactly with the existing article hero and headline at these widths. */
@media (min-width: 701px) and (max-width: 1100px) and (any-pointer: coarse) {
  body.pk-article .article-body {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 2rem !important;
    font-size: 1.375rem !important; /* scales to approx. 19px on 980px->832px */
    line-height: 1.62 !important;
  }
  body.pk-article .article-body p:first-child::first-letter {
    font-size: 5rem !important;
    margin-right: .48rem !important;
  }
}

/* Mobile navigation restoration: strictly phone/tablet breakpoint */
@media only screen and (max-width: 800px) {
  body nav .nav-inner { display:flex!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:space-between!important; }
  body nav .hamburger { display:flex!important; visibility:visible!important; opacity:1!important; flex-shrink:0!important; width:44px!important; height:44px!important; padding:8px!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; gap:5px!important; position:relative!important; z-index:10002!important; cursor:pointer!important; background:transparent!important; border:0!important; }
  body nav .hamburger span { display:block!important; width:24px!important; height:2px!important; background:var(--ink,#24201c)!important; flex:none!important; }
  body.menu-open nav .hamburger span { background:var(--pk-paper,#fff)!important; }
  body:not(.menu-open) nav .nav-links, body:not(.menu-open) nav .subscribe-link { display:none!important; }
  body.menu-open nav { z-index:10000!important; }
  body.menu-open nav .nav-links { display:flex!important; position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important; box-sizing:border-box!important; padding:75px 20px 110px!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:1.3rem!important; overflow-y:auto!important; z-index:10000!important; background:var(--pk-ink,#24201c)!important; }
  body.menu-open nav .nav-links a { color:var(--pk-paper,#fff)!important; }
  body.menu-open nav .subscribe-link { display:flex!important; position:fixed!important; left:0!important; right:0!important; bottom:25px!important; justify-content:center!important; z-index:10001!important; }
  body.menu-open { overflow:hidden!important; }
}
@media only screen and (max-width: 700px) {
  body.pk-article .article-body { font-size:20px!important; line-height:1.65!important; width:100%!important; max-width:100%!important; box-sizing:border-box!important; padding-left:16px!important; padding-right:16px!important; overflow-wrap:break-word; }
  body.pk-article .article-body img,body.pk-article .article-body video,body.pk-article .article-body iframe { max-width:100%!important; height:auto; }
}