/*
Theme Name: Retro Personal
Theme URI: https://example.com/
Author: Custom theme
Description: A warm retro-modern personal WordPress theme for board games, original music releases, and news.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: retro-personal
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --rp-cream: #f3e4bd;
  --rp-paper: #f9efcf;
  --rp-ink: #1c2824;
  --rp-green: #183e3b;
  --rp-orange: #d26b4b;
  --rp-mustard: #e2b443;
  --rp-sage: #8eaa93;
  --rp-line: #1c2824;
  --rp-muted: #59605a;
  --rp-max: 1180px;
  --rp-reading: 760px;
  --rp-shadow: 8px 8px 0 var(--rp-ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rp-cream);
  color: var(--rp-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; }
a { color: var(--rp-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: #0c2624; }
button, input, textarea, select { font: inherit; }

.rp-wrap { width: min(calc(100% - 40px), var(--rp-max)); margin-inline: auto; }
.rp-reading { width: min(calc(100% - 40px), var(--rp-reading)); margin-inline: auto; }

.site-header { padding-top: 28px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 0 24px;
  border-bottom: 4px solid var(--rp-line);
}
.site-branding { display: flex; align-items: center; gap: 14px; min-width: 0; }
.custom-logo { max-height: 62px; width: auto; display: block; }
.site-title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.site-title a { color: var(--rp-ink); text-decoration: none; }
.site-description { margin: 8px 0 0; font-size: 0.83rem; color: var(--rp-muted); }

.primary-nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.primary-nav a { color: var(--rp-ink); font-size: 0.78rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.primary-nav a:hover, .primary-nav .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 3px; }
.menu-toggle { display: none; background: var(--rp-ink); color: var(--rp-cream); border: 0; padding: 9px 13px; font-weight: 800; text-transform: uppercase; }

.rp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(34px, 6vw, 78px);
  padding: clamp(46px, 7vw, 86px) 0 64px;
}
.rp-hero__media { position: relative; }
.rp-hero__media img, .rp-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--rp-ink);
  box-shadow: 10px 10px 0 var(--rp-mustard);
  background: var(--rp-orange);
}
.rp-placeholder { position: relative; overflow: hidden; }
.rp-placeholder::before {
  content: '';
  position: absolute;
  width: 38%; aspect-ratio: 1;
  border: clamp(16px, 3vw, 32px) solid var(--rp-green);
  border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.rp-placeholder::after { content:''; position:absolute; width: 30%; height: 20%; background:#f1d77a; left:12%; bottom:13%; transform:rotate(-8deg); }
.rp-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 9px;
  background: var(--rp-ink);
  color: var(--rp-cream);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.rp-hero h1, .entry-title, .archive-title {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.045em;
}
.rp-hero h1 { font-size: clamp(2.6rem, 6vw, 5.3rem); }
.rp-hero p { max-width: 620px; font-size: clamp(1rem, 1.6vw, 1.18rem); }
.rp-link { display: inline-block; margin-top: 8px; color: var(--rp-ink); font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; border-bottom: 3px solid var(--rp-ink); }

.rp-section { padding: 20px 0 64px; }
.rp-section--tint { padding: 48px 0 60px; background: var(--rp-sage); border-top: 4px solid var(--rp-ink); border-bottom: 4px solid var(--rp-ink); }
.rp-section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; padding: 16px 0 18px; border-top: 4px solid var(--rp-line); }
.rp-section--tint .rp-section-head { border-top-color: var(--rp-ink); }
.rp-section-head h2 { margin:0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; }
.rp-section-head a { color:var(--rp-ink); font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }

.rp-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:26px; }
.rp-card { min-width:0; }
.rp-card__image { display:block; aspect-ratio: 16 / 10; overflow:hidden; border:3px solid var(--rp-ink); background:var(--rp-orange); }
.rp-card:nth-child(3n+2) .rp-card__image { background:var(--rp-mustard); }
.rp-card:nth-child(3n+3) .rp-card__image { background:var(--rp-sage); }
.rp-card__image img { width:100%; height:100%; object-fit:cover; transition: transform .2s ease; }
.rp-card__image:hover img { transform:scale(1.025); }
.rp-card__meta { margin: 11px 0 0; font-size:.67rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.rp-card h3 { margin: 5px 0 7px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.25rem,2.2vw,1.65rem); line-height:1.05; }
.rp-card h3 a { color:var(--rp-ink); text-decoration:none; }
.rp-card h3 a:hover { text-decoration:underline; }
.rp-card p { margin:0; font-size:.9rem; line-height:1.5; color:#39423e; }

.rp-release-feature { display:grid; grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr); gap:clamp(28px,5vw,64px); align-items:center; }
.rp-release-cover { border:4px solid var(--rp-ink); box-shadow: var(--rp-shadow); background:var(--rp-orange); aspect-ratio:1; overflow:hidden; }
.rp-release-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.rp-release-feature h3 { margin: 10px 0; font: 900 clamp(2.3rem,5vw,4.7rem)/.95 Georgia,'Times New Roman',serif; letter-spacing:-.04em; }
.rp-release-feature p { max-width: 650px; }

.rp-news-list { display:grid; grid-template-columns: 1fr 1fr; border-top:1px solid var(--rp-ink); }
.rp-news-item { display:grid; grid-template-columns: 110px 1fr; gap:20px; padding:20px 18px 20px 0; border-bottom:1px solid var(--rp-ink); }
.rp-news-item:nth-child(even) { padding-left:18px; border-left:1px solid var(--rp-ink); }
.rp-news-date { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.rp-news-item h3 { margin:0; font:900 1.25rem/1.1 Georgia,'Times New Roman',serif; }
.rp-news-item h3 a { color:var(--rp-ink); text-decoration:none; }

.site-main { min-height:55vh; }
.entry-header, .archive-header { padding: 62px 0 30px; }
.entry-title, .archive-title { font-size: clamp(2.5rem,6vw,5rem); }
.entry-meta { margin-top:14px; color:var(--rp-muted); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.entry-thumbnail { margin: 18px auto 42px; width:min(calc(100% - 40px), 980px); }
.entry-thumbnail img { width:100%; display:block; border:4px solid var(--rp-ink); box-shadow:10px 10px 0 var(--rp-mustard); }
.entry-content { padding-bottom:72px; }
.entry-content > * { max-width:var(--rp-reading); margin-left:auto; margin-right:auto; }
.entry-content > .alignwide { max-width:var(--rp-max); }
.entry-content > .alignfull { max-width:none; }
.entry-content h2, .entry-content h3 { font-family:Georgia,'Times New Roman',serif; line-height:1.1; }
.entry-content h2 { margin-top:2em; font-size:2rem; }
.entry-content blockquote { border-left:6px solid var(--rp-orange); padding-left:24px; font:italic 1.25rem/1.55 Georgia,serif; }
.entry-content .wp-block-button__link { background:var(--rp-ink); color:var(--rp-cream); border-radius:0; border:2px solid var(--rp-ink); font-weight:800; box-shadow:4px 4px 0 var(--rp-mustard); }
.entry-content .wp-block-button__link:hover { transform:translate(1px,1px); box-shadow:3px 3px 0 var(--rp-mustard); }

.rp-archive-grid { padding-bottom:70px; }
.navigation.pagination { margin: 20px 0 70px; }
.nav-links { display:flex; flex-wrap:wrap; gap:8px; }
.page-numbers { display:inline-block; padding:7px 12px; border:2px solid var(--rp-ink); color:var(--rp-ink); text-decoration:none; font-weight:800; }
.page-numbers.current { background:var(--rp-ink); color:var(--rp-cream); }

.release-platform-note { margin: 28px auto 0; padding: 18px 20px; max-width:var(--rp-reading); background:var(--rp-mustard); border:3px solid var(--rp-ink); font-size:.9rem; }

.site-footer { margin-top: 20px; padding: 44px 0; background:var(--rp-ink); color:var(--rp-cream); }
.site-footer a { color:var(--rp-cream); }
.site-footer__inner { display:grid; grid-template-columns:1.3fr .7fr; gap:40px; }
.site-footer h2 { margin:0 0 8px; font:900 1.8rem Georgia,serif; }
.site-footer p { margin:.3em 0; max-width:620px; }
.footer-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:flex-end; }
.footer-nav a { font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }

.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.screen-reader-text:focus { position:fixed; width:auto; height:auto; top:10px; left:10px; padding:12px; margin:0; clip:auto; background:#fff; color:#000; z-index:99999; }

@media (max-width: 820px) {
  body { font-size:17px; }
  .site-header__inner { align-items:flex-start; }
  .menu-toggle { display:block; }
  .primary-nav { display:none; width:100%; padding-top:16px; }
  .primary-nav.is-open { display:block; }
  .primary-nav ul { display:block; }
  .primary-nav li { border-top:1px solid rgba(28,40,36,.35); }
  .primary-nav a { display:block; padding:10px 0; }
  .site-header__inner { flex-wrap:wrap; }
  .rp-hero, .rp-release-feature { grid-template-columns:1fr; }
  .rp-grid { grid-template-columns:1fr 1fr; }
  .rp-news-list { grid-template-columns:1fr; }
  .rp-news-item:nth-child(even) { padding-left:0; border-left:0; }
  .site-footer__inner { grid-template-columns:1fr; }
  .footer-nav ul { justify-content:flex-start; }
}
@media (max-width: 560px) {
  .rp-wrap, .rp-reading { width:min(calc(100% - 26px), var(--rp-max)); }
  .rp-grid { grid-template-columns:1fr; }
  .rp-section-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .rp-news-item { grid-template-columns:85px 1fr; gap:12px; }
  .rp-hero { padding-top:38px; }
}

/* Existing Games and Music landing pages */
.rp-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  padding: clamp(52px, 8vw, 92px) 0 58px;
}
.rp-page-hero__copy .entry-title { font-size: clamp(3.4rem, 8vw, 7rem); }
.rp-page-deck {
  max-width: 690px;
  margin: 20px 0 0;
  color: #39423e;
  font: 700 clamp(1.05rem, 1.8vw, 1.35rem)/1.45 Georgia, 'Times New Roman', serif;
}
.rp-page-hero__image img,
.rp-page-hero__image .rp-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 4px solid var(--rp-ink);
  box-shadow: 10px 10px 0 var(--rp-mustard);
}
.rp-page-hero__image--square img,
.rp-page-hero__image--square .rp-placeholder { aspect-ratio: 1; }
.rp-music-page .rp-page-hero__image img,
.rp-music-page .rp-page-hero__image .rp-placeholder { box-shadow: 10px 10px 0 var(--rp-orange); }

/* Compact topic illustrations for Games and Music when no featured image is set */
.rp-page-hero__image--topic {
  justify-self: end;
  width: min(100%, 320px);
}
.rp-topic-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid var(--rp-ink);
  box-shadow: 8px 8px 0 var(--rp-mustard);
}
.rp-topic-art--games { background: var(--rp-orange); }
.rp-topic-art--music { background: var(--rp-sage); box-shadow-color: var(--rp-orange); }
.rp-game-card {
  position: absolute;
  width: 34%; height: 54%;
  border: 4px solid var(--rp-ink);
  border-radius: 5px;
  background: var(--rp-cream);
}
.rp-game-card:before {
  content: ''; position: absolute; inset: 14%;
  border: 3px solid var(--rp-ink);
  background: var(--rp-mustard);
}
.rp-game-card--one { left: 17%; top: 19%; transform: rotate(-10deg); }
.rp-game-card--two { left: 35%; top: 14%; transform: rotate(8deg); }
.rp-die {
  position: absolute; right: 14%; bottom: 13%; width: 30%; aspect-ratio: 1;
  border: 4px solid var(--rp-ink); border-radius: 12%; background: var(--rp-cream);
  transform: rotate(-7deg);
}
.rp-die i { position:absolute; width:13%; aspect-ratio:1; border-radius:50%; background:var(--rp-ink); }
.rp-die i:nth-child(1){left:20%;top:20%}.rp-die i:nth-child(2){right:20%;top:20%}.rp-die i:nth-child(3){left:43.5%;top:43.5%}.rp-die i:nth-child(4){left:20%;bottom:20%}.rp-die i:nth-child(5){right:20%;bottom:20%}
.rp-record {
  position: absolute; width: 57%; aspect-ratio:1; left: 13%; top: 20%;
  border: 4px solid var(--rp-ink); border-radius:50%; background: var(--rp-ink);
  box-shadow: inset 0 0 0 14px #33413c, inset 0 0 0 17px var(--rp-ink);
}
.rp-record:before { content:''; position:absolute; width:31%; aspect-ratio:1; border-radius:50%; background:var(--rp-orange); left:34.5%; top:34.5%; }
.rp-record i { position:absolute; width:8%; aspect-ratio:1; border-radius:50%; background:var(--rp-cream); left:46%; top:46%; z-index:2; }
.rp-music-note { position:absolute; right:10%; top:7%; font:900 6rem/1 Georgia,serif; color:var(--rp-ink); transform:rotate(7deg); }
.rp-showcase-content { padding-bottom: 80px; }
.rp-showcase-label {
  padding: 14px 0 16px;
  border-top: 4px solid var(--rp-ink);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rp-showcase-editor.entry-content { padding-bottom: 0; }
.rp-showcase-editor.entry-content > * { max-width: none; }
.rp-showcase-editor > p,
.rp-showcase-editor > h2,
.rp-showcase-editor > h3,
.rp-showcase-editor > ul,
.rp-showcase-editor > ol,
.rp-showcase-editor > blockquote { max-width: var(--rp-reading); }
.rp-showcase-editor > .wp-block-columns,
.rp-showcase-editor > .wp-block-group,
.rp-showcase-editor > .wp-block-gallery,
.rp-showcase-editor > .wp-block-cover { max-width: var(--rp-max); }

/* Project/release blocks inserted from Retro Personal patterns */
.rp-project-block,
.rp-release-block {
  margin: 0 0 34px !important;
  padding: clamp(22px, 4vw, 42px);
  border: 3px solid var(--rp-ink);
  background: rgba(255,255,255,.2);
  box-shadow: 8px 8px 0 var(--rp-mustard);
}
.rp-release-block { background: var(--rp-sage); box-shadow-color: var(--rp-orange); }
.rp-project-block:nth-of-type(even) { box-shadow-color: var(--rp-orange); }
.rp-project-block .wp-block-image,
.rp-release-block .wp-block-image { margin: 0; }
.rp-project-block .wp-block-image img,
.rp-release-block .wp-block-image img { width: 100%; border: 3px solid var(--rp-ink); display: block; }
.rp-release-block .wp-block-image img { aspect-ratio: 1; object-fit: cover; }
.rp-project-block h2,
.rp-release-block h2 { margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 3.7rem); }
.rp-block-label {
  margin: 0 0 8px !important;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Homepage portals to the existing Games and Music pages */
.rp-home-portals { padding-bottom: 78px; }
.rp-section-head > span {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rp-portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.rp-portal {
  display: grid;
  grid-template-columns: minmax(150px, .82fr) minmax(0, 1.18fr);
  gap: 26px;
  align-items: center;
  padding: 26px;
  border: 4px solid var(--rp-ink);
  color: var(--rp-ink);
  text-decoration: none;
  background: var(--rp-sage);
  box-shadow: 9px 9px 0 var(--rp-mustard);
}
.rp-portal--music { background: #e6d6bf; box-shadow-color: var(--rp-orange); }
.rp-portal:hover { color: var(--rp-ink); transform: translate(1px,1px); box-shadow: 7px 7px 0 var(--rp-mustard); }
.rp-portal--music:hover { box-shadow-color: var(--rp-orange); }
.rp-portal__image { overflow: hidden; }
.rp-portal__image img,
.rp-portal__image .rp-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 3px solid var(--rp-ink);
  box-shadow: none;
}
.rp-portal__image--square img,
.rp-portal__image--square .rp-placeholder { aspect-ratio: 1; }
.rp-portal__copy h3 { margin: 4px 0 10px; font: 900 clamp(2rem, 3.5vw, 3.5rem)/.98 Georgia,'Times New Roman',serif; letter-spacing: -.04em; }
.rp-portal__copy p { margin: 0 0 8px; font-size: .92rem; line-height: 1.5; }
.rp-portal .rp-link { color: var(--rp-ink); }

/* News archive */
.rp-news-archive-header { padding-bottom: 44px; }
.rp-news-list--archive { grid-template-columns: 1fr; }
.rp-news-item--archive,
.rp-news-item--archive:nth-child(even) {
  grid-template-columns: 130px minmax(0,1fr);
  padding: 26px 0;
  border-left: 0;
}
.rp-news-item--archive h2 { margin: 0 0 8px; font: 900 clamp(1.5rem, 3vw, 2.25rem)/1.05 Georgia,'Times New Roman',serif; }
.rp-news-item--archive h2 a { color: var(--rp-ink); text-decoration: none; }
.rp-news-item--archive h2 a:hover { text-decoration: underline; }
.rp-news-item--archive p { margin: 0; max-width: 760px; color: #39423e; }

@media (max-width: 980px) {
  .rp-portal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .rp-page-hero { grid-template-columns: 1fr; }
  .rp-page-hero__image { max-width: 620px; }
}
@media (max-width: 620px) {
  .rp-portal { grid-template-columns: 1fr; }
  .rp-portal__image { max-width: 360px; }
  .rp-news-item--archive,
  .rp-news-item--archive:nth-child(even) { grid-template-columns: 1fr; gap: 8px; }
}

/* Single posts intentionally have no related/recommended-post section. */
.single-post .jp-relatedposts,
.single-post #jp-relatedposts,
.single-post .jp-relatedposts-i2,
.single-post .related-posts,
.single-post .related_posts,
.single-post .yarpp-related,
.single-post .crp_related,
.single-post .wp-block-newspack-blocks-homepage-articles.related-posts {
  display: none !important;
}