/*
Theme Name: Faustine
Author: Hanna
Description: A cute pink gamer and tech theme maintained by Faustine, complete with pixel details and cozy terminal energy.
Version: 2.2.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: faustine
*/

:root {
  --rose-50: #fff9f7;
  --rose-100: #fbeeea;
  --rose-200: #f1d6d2;
  --rose-300: #dfb6b2;
  --rose-500: #b86c76;
  --wine: #6e3545;
  --wine-dark: #45232d;
  --ink: #3f3032;
  --muted: #7d6568;
  --cream: #fffaf0;
  --gold: #ad865b;
  --paper-shadow: 0 18px 50px rgba(92, 52, 59, .11);
  --serif: Georgia, "Times New Roman", serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--rose-50);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(110, 53, 69, .055) 1px, transparent 1.2px);
  background-size: 18px 18px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.75;
}

a { color: var(--wine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--rose-500); }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }

.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 {
  z-index: 100000; display: block; top: 8px; left: 8px; width: auto; height: auto;
  padding: .75rem 1rem; clip: auto; background: var(--cream); color: var(--wine-dark);
}

.site-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.narrow { width: min(760px, calc(100% - 2rem)); margin-inline: auto; }

.announcement {
  padding: .5rem 1rem; color: var(--cream); background: var(--wine);
  font-family: var(--sans); font-size: .69rem; font-weight: 600; letter-spacing: .17em;
  text-align: center; text-transform: uppercase;
}
.site-header { position: relative; z-index: 20; background: rgba(255, 250, 240, .94); border-bottom: 1px solid var(--rose-200); }
.header-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.8rem 0 1.35rem; }
.header-ornament { height: 1px; background: linear-gradient(to right, transparent, var(--rose-300)); }
.header-ornament:last-child { background: linear-gradient(to left, transparent, var(--rose-300)); }
.branding { text-align: center; }
.custom-logo { width: auto; max-height: 80px; margin: 0 auto .35rem; }
.site-title { margin: 0; font-family: var(--display); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 600; line-height: .9; letter-spacing: -.035em; }
.site-title a { color: var(--wine-dark); text-decoration: none; }
.site-description { margin: .65rem 0 0; color: var(--muted); font-family: var(--sans); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.flourish { margin: .4rem 0; color: var(--gold); font-size: 1.3rem; line-height: 1; }

.main-navigation { border-top: 1px solid var(--rose-200); }
.main-navigation .site-shell { position: relative; }
.menu-toggle { display: none; width: 100%; padding: .85rem; border: 0; color: var(--wine); background: transparent; font-family: var(--sans); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.primary-menu, .primary-menu ul { margin: 0; padding: 0; list-style: none; }
.primary-menu { display: flex; justify-content: center; flex-wrap: wrap; }
.primary-menu a { display: block; padding: .9rem 1.25rem; color: var(--ink); font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: var(--rose-500); }
.primary-menu .menu-item-has-children { position: relative; }
.primary-menu .sub-menu { display: none; position: absolute; min-width: 210px; padding: .4rem 0; background: var(--cream); border: 1px solid var(--rose-200); box-shadow: var(--paper-shadow); }
.primary-menu li:hover > .sub-menu, .primary-menu li:focus-within > .sub-menu { display: block; }

.hero { position: relative; overflow: hidden; padding: clamp(4.5rem, 10vw, 8.5rem) 1rem; text-align: center; background: linear-gradient(135deg, var(--rose-100), #fff8f0 50%, #f4dcda); border-bottom: 1px solid var(--rose-200); }
.hero::before, .hero::after { content: "❧"; position: absolute; color: rgba(110, 53, 69, .10); font-size: clamp(14rem, 32vw, 32rem); line-height: 1; }
.hero::before { top: -20%; left: -5%; transform: rotate(-25deg); }
.hero::after { right: -5%; bottom: -35%; transform: rotate(155deg); }
.hero-inner { position: relative; z-index: 1; width: min(820px, 100%); margin: auto; }
.eyebrow { margin: 0 0 1rem; color: var(--rose-500); font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.hero h1 { margin: 0; color: var(--wine-dark); font-family: var(--display); font-size: clamp(3.4rem, 10vw, 7rem); font-weight: 500; line-height: .84; letter-spacing: -.05em; }
.hero-copy { max-width: 610px; margin: 1.7rem auto 2rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.22rem); font-style: italic; }
.button, .wp-block-button__link, input[type="submit"] {
  display: inline-block; padding: .82rem 1.45rem; border: 1px solid var(--wine); border-radius: 0;
  color: var(--cream); background: var(--wine); font-family: var(--sans); font-size: .68rem;
  font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-decoration: none; text-transform: uppercase; cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.button:hover, .button:focus, input[type="submit"]:hover { color: var(--wine); background: transparent; transform: translateY(-2px); }
.button.ghost { margin-left: .5rem; color: var(--wine); background: transparent; }
.button.ghost:hover { color: var(--cream); background: var(--wine); }

.ornament-rule { display: flex; align-items: center; gap: .75rem; width: min(320px, 70%); margin: 0 auto 1.2rem; color: var(--gold); }
.ornament-rule::before, .ornament-rule::after { content: ""; flex: 1; height: 1px; background: var(--rose-300); }
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-tinted { background: var(--rose-100); border-block: 1px solid var(--rose-200); }
.section-heading { max-width: 650px; margin: 0 auto 2.7rem; text-align: center; }
.section-heading h2, .page-title { margin: 0; color: var(--wine-dark); font-family: var(--display); font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.section-heading p { margin: .8rem auto 0; color: var(--muted); font-style: italic; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.post-card { position: relative; overflow: hidden; background: var(--cream); border: 1px solid var(--rose-200); box-shadow: 0 10px 35px rgba(92, 52, 59, .07); transition: transform .25s ease, box-shadow .25s ease; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--paper-shadow); }
.post-card-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--rose-200); }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card-image img { transform: scale(1.03); }
.post-card-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(110, 53, 69, .28); font-size: 4rem; }
.post-card-body { padding: 1.45rem 1.5rem 1.7rem; }
.post-meta { margin-bottom: .55rem; color: var(--rose-500); font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.post-card h2, .post-card h3 { margin: 0; font-family: var(--display); font-size: 1.85rem; font-weight: 600; line-height: 1.05; }
.post-card h2 a, .post-card h3 a { color: var(--wine-dark); text-decoration: none; }
.post-card .excerpt { margin: .8rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.read-more { display: inline-block; margin-top: 1rem; font-family: var(--sans); font-size: .63rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.welcome-note { position: relative; max-width: 800px; margin: auto; padding: clamp(2rem, 6vw, 4.5rem); background: var(--cream); border: 1px solid var(--rose-200); box-shadow: var(--paper-shadow); text-align: center; }
.welcome-note::before { content: ""; position: absolute; inset: 9px; pointer-events: none; border: 1px solid var(--rose-200); }
.welcome-note > * { position: relative; }
.welcome-note h2 { margin: 0; color: var(--wine-dark); font-family: var(--display); font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 500; line-height: 1; }

.page-header { padding: clamp(3.5rem, 8vw, 6rem) 1rem; background: var(--rose-100); border-bottom: 1px solid var(--rose-200); text-align: center; }
.content-area { padding: clamp(3rem, 7vw, 6rem) 0; }
.entry { max-width: 800px; margin: auto; padding: clamp(1.5rem, 5vw, 4rem); background: var(--cream); border: 1px solid var(--rose-200); box-shadow: var(--paper-shadow); }
.entry-header { margin-bottom: 2rem; text-align: center; }
.entry-title { margin: .3rem 0 .6rem; color: var(--wine-dark); font-family: var(--display); font-size: clamp(2.7rem, 7vw, 5rem); font-weight: 500; line-height: .95; letter-spacing: -.04em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-featured img { width: 100%; }
.entry-content h2, .entry-content h3 { color: var(--wine-dark); font-family: var(--display); line-height: 1.1; }
.entry-content h2 { margin-top: 2.2rem; font-size: 2.3rem; }
.entry-content blockquote { margin: 2rem 0; padding: 1rem 2rem; color: var(--wine); border-left: 3px solid var(--rose-300); font-size: 1.3rem; font-style: italic; }
.entry-content a { overflow-wrap: anywhere; }
.entry-content .alignwide { width: min(1050px, calc(100vw - 2rem)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry-content .alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }
.entry-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rose-200); color: var(--muted); font-size: .85rem; }
.pagination, .posts-navigation { margin-top: 2.5rem; font-family: var(--sans); font-size: .72rem; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.nav-links { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.page-numbers { padding: .45rem .75rem; border: 1px solid var(--rose-200); text-decoration: none; }
.page-numbers.current { color: var(--cream); background: var(--wine); border-color: var(--wine); }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
  width: 100%; padding: .75rem 1rem; color: var(--ink); background: #fffdf8; border: 1px solid var(--rose-300); border-radius: 0;
}
input:focus, textarea:focus { outline: 2px solid rgba(184, 108, 118, .3); outline-offset: 2px; }
label { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.search-form { display: flex; max-width: 520px; margin: 1.5rem auto 0; }
.search-form label { flex: 1; }
.search-form input { height: 100%; }
.search-submit { flex: none; }

.comments-area { max-width: 800px; margin: 2rem auto 0; padding: clamp(1.5rem, 5vw, 3rem); background: var(--cream); border: 1px solid var(--rose-200); }
.comments-title, .comment-reply-title { font-family: var(--display); font-size: 2rem; }
.comment-list { padding: 0; list-style: none; }
.comment-list .children { list-style: none; }
.comment-body { margin: 1.5rem 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rose-200); }

.site-footer { color: var(--rose-100); background: var(--wine-dark); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; padding: 4rem 0; }
.footer-brand { font-family: var(--display); font-size: 2.5rem; line-height: 1; }
.footer-brand a { color: var(--cream); text-decoration: none; }
.footer-copy { max-width: 500px; color: var(--rose-200); font-size: .9rem; }
.footer-menu { display: flex; justify-content: flex-end; gap: 1.2rem; margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-menu a { color: var(--rose-100); }
.site-info { padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.14); color: var(--rose-300); font-family: var(--sans); font-size: .6rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; }

@media (max-width: 800px) {
  .post-grid { grid-template-columns: 1fr 1fr; }
  .post-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-copy { margin-inline: auto; }
  .footer-menu { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .header-main { grid-template-columns: 1fr; padding: 1.35rem 0; }
  .header-ornament { display: none; }
  .menu-toggle { display: block; }
  .primary-menu { display: none; padding-bottom: .65rem; }
  .primary-menu.is-open { display: block; }
  .primary-menu a { padding: .7rem 1rem; text-align: center; }
  .primary-menu .sub-menu { display: block; position: static; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .post-grid { grid-template-columns: 1fr; }
  .post-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .hero-actions .button { display: block; width: max-content; margin: .5rem auto; }
  .entry { border-inline: 0; }
}

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

/* ================================================================
   FAUSTINE 2.0 — cute gamer / tech skin
   ================================================================ */
:root {
  --rose-50: #fff7fc;
  --rose-100: #ffe7f5;
  --rose-200: #ffc8e7;
  --rose-300: #f49ac9;
  --rose-500: #ed5fa8;
  --wine: #8f2f6d;
  --wine-dark: #2c1738;
  --ink: #382743;
  --muted: #755f80;
  --cream: #fffaff;
  --gold: #ffb3df;
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --rounded: "Nunito", Arial, sans-serif;
  --display: var(--pixel);
  --sans: var(--rounded);
  --serif: var(--rounded);
  --paper-shadow: 0 18px 0 rgba(77, 35, 91, .07), 0 26px 60px rgba(126, 48, 103, .15);
}

body {
  background-color: #fff7fc;
  background-image:
    linear-gradient(rgba(237, 95, 168, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 95, 168, .045) 1px, transparent 1px),
    radial-gradient(circle at 80% 10%, rgba(164, 107, 255, .13), transparent 26%);
  background-size: 24px 24px, 24px 24px, auto;
  font-family: var(--rounded);
}

a { text-decoration-thickness: 2px; }
.announcement { display: none; }

.maintainer-banner {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(120deg, #251432, #56204d 58%, #8f2f6d);
  background-size: 30px 30px, 30px 30px, auto;
  border-bottom: 4px solid #ff72ba;
}
.maintainer-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: repeating-linear-gradient(90deg, #ff72ba 0 18px, #ffc8e7 18px 36px, #9c6bff 36px 54px);
}
.maintainer-inner {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  min-height: 226px;
}
.maintainer-avatar {
  position: absolute;
  z-index: 2;
  bottom: -32px;
  left: -12px;
  width: 285px;
  filter: drop-shadow(0 10px 14px rgba(10, 4, 20, .35));
}
.maintainer-copy { grid-column: 2; padding: 2rem 0; }
.system-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .6rem;
  color: #ffbfe1;
  font-family: var(--pixel);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.status-dot { width: 9px; height: 9px; background: #6effba; border-radius: 50%; box-shadow: 0 0 12px #6effba; animation: faustine-pulse 1.8s infinite; }
.maintainer-copy h2 { margin: 0; color: #fff; font-family: var(--pixel); font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 600; line-height: 1; }
.maintainer-copy p:last-child { max-width: 590px; margin: .7rem 0 0; color: #f6d9ed; font-size: 1rem; }
.maintainer-stats { grid-column: 3; display: grid; gap: .65rem; min-width: 175px; }
.stat-chip { padding: .55rem .8rem; color: #fbe9ff; background: rgba(12, 5, 25, .36); border: 1px solid rgba(255, 185, 226, .28); border-radius: 8px; font-family: var(--pixel); font-size: .67rem; }
.stat-chip span { color: #74ffc2; }

.site-header { background: rgba(255, 250, 255, .95); border-bottom: 2px solid var(--rose-200); box-shadow: 0 8px 30px rgba(103, 42, 94, .08); }
.header-main { padding: 1.25rem 0 .9rem; }
.header-ornament { height: 2px; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--rose-300) 8px 12px); }
.header-ornament:last-child { background: repeating-linear-gradient(90deg, var(--rose-300) 0 4px, transparent 4px 12px); }
.site-title { font-family: var(--pixel); font-size: clamp(2.1rem, 5vw, 3.7rem); letter-spacing: -.02em; text-shadow: 3px 3px 0 var(--rose-200); }
.site-title a::before { content: "< "; color: var(--rose-500); }
.site-title a::after { content: " />"; color: var(--rose-500); }
.site-description { color: var(--wine); font-weight: 800; }
.flourish { font-family: var(--pixel); }
.flourish::before { content: "[ "; }
.flourish::after { content: " ]"; }
.main-navigation { border-top: 2px dashed var(--rose-200); }
.primary-menu a { position: relative; font-family: var(--pixel); font-size: .74rem; font-weight: 600; }
.primary-menu a:hover, .primary-menu .current-menu-item > a { color: #bd3183; background: var(--rose-100); }
.primary-menu .current-menu-item > a::before { content: "> "; }

.hero {
  min-height: 590px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 23%, rgba(255,255,255,.8) 0 4px, transparent 5px),
    linear-gradient(135deg, #ffd9ef, #f8dfff 50%, #ffcbe5);
  border-bottom: 3px solid var(--rose-300);
}
.hero::before { content: "</>"; top: 12%; left: 5%; transform: rotate(-8deg); font-family: var(--pixel); font-size: clamp(6rem, 15vw, 13rem); color: rgba(143,47,109,.08); }
.hero::after { content: "0101"; right: 4%; bottom: 4%; transform: rotate(7deg); font-family: var(--pixel); font-size: clamp(5rem, 13vw, 11rem); color: rgba(143,47,109,.065); }
.mascot-stage { position: relative; width: min(680px, 92vw); height: clamp(430px, 56vw, 570px); }
.mascot-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 18px 18px rgba(110, 53, 69, .18)); animation: faustine-mascot-poses 9s ease-in-out infinite; }
.mascot-frame-two { animation-delay: -6s; }
.mascot-frame-three { animation-delay: -3s; }
.hero h1 { font-family: var(--pixel); font-size: clamp(3rem, 9vw, 6.6rem); font-weight: 600; line-height: .9; text-shadow: 5px 5px 0 rgba(255,255,255,.75), 9px 9px 0 rgba(237,95,168,.18); }
.hero-copy { font-family: var(--rounded); font-weight: 700; font-style: normal; }
.eyebrow { color: #ad2778; font-family: var(--pixel); font-weight: 600; }
.button, .wp-block-button__link, input[type="submit"] { border: 2px solid var(--wine); border-radius: 8px; box-shadow: 4px 4px 0 var(--wine-dark); font-family: var(--pixel); }
.button:hover, .button:focus, input[type="submit"]:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wine-dark); }
.ornament-rule { font-family: var(--pixel); }
.ornament-rule::before, .ornament-rule::after { height: 2px; background: repeating-linear-gradient(90deg, var(--rose-300) 0 5px, transparent 5px 10px); }

.section-heading h2, .page-title, .welcome-note h2, .entry-title { font-family: var(--pixel); }
.post-grid { gap: 1.7rem; }
.post-card { overflow: visible; border: 2px solid #e8a6d0; border-radius: 14px; box-shadow: 7px 7px 0 rgba(122, 48, 104, .12); }
.post-card::before { content: "✦ NEW DROP"; position: absolute; z-index: 2; top: -12px; right: 14px; padding: .25rem .55rem; color: #fff; background: var(--wine); border-radius: 5px; font-family: var(--pixel); font-size: .58rem; }
.post-card-image { border-radius: 12px 12px 0 0; }
.post-card-placeholder { background: linear-gradient(135deg, #ffe1f3, #efdaff); font-family: var(--pixel); }
.post-card h2, .post-card h3 { font-family: var(--pixel); font-size: 1.45rem; }
.post-meta, .read-more { font-family: var(--pixel); }
.welcome-note, .entry, .comments-area { border: 2px solid var(--rose-300); border-radius: 16px; }
.welcome-note::before { border: 2px dashed var(--rose-200); border-radius: 10px; }
.section-tinted { background: rgba(255, 224, 244, .72); border-block: 2px dashed var(--rose-300); }
.page-header { background: linear-gradient(135deg, #ffdff0, #f1e0ff); border-bottom: 3px solid var(--rose-300); }
.entry-content h2, .entry-content h3, .comments-title, .comment-reply-title { font-family: var(--pixel); }
.site-footer { background: #24132f; border-top: 5px solid var(--rose-500); }
.footer-brand { font-family: var(--pixel); }
.footer-brand a::before { content: "~/"; color: #ff78bd; }
.site-info { font-family: var(--pixel); }

@keyframes faustine-pulse { 50% { opacity: .45; transform: scale(.75); } }
@keyframes faustine-mascot-poses {
  0%, 29% { opacity: 1; transform: translateY(0) scale(1); }
  33%, 96% { opacity: 0; transform: translateY(8px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 850px) {
  .maintainer-inner { grid-template-columns: 190px 1fr; }
  .maintainer-avatar { width: 220px; left: -30px; }
  .maintainer-copy { grid-column: 2; }
  .maintainer-stats { display: none; }
}

@media (max-width: 620px) {
  .maintainer-banner { min-height: 360px; }
  .maintainer-inner { display: block; min-height: 356px; padding-top: 1.6rem; text-align: center; }
  .maintainer-copy { position: relative; z-index: 3; padding: 0; }
  .maintainer-copy p:last-child { font-size: .88rem; }
  .maintainer-avatar { right: 50%; bottom: -45px; left: auto; width: 250px; transform: translateX(50%); opacity: .88; }
  .hero { min-height: 500px; }
  .mascot-stage { height: 440px; }
  .site-title a::before, .site-title a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-frame { display: none; animation: none; }
  .mascot-frame-one { display: block; opacity: 1; }
}

/* ================================================================
   PLAYER ONE — switchable scrapbook and magazine templates
   ================================================================ */
.player-one-page {
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 7rem);
}

.player-one-shell {
  width: min(1320px, calc(100% - 2rem));
  margin-inline: auto;
}

.player-one-heading {
  margin-bottom: clamp(2.2rem, 5vw, 4rem);
  text-align: center;
}

.player-one-heading h1 {
  margin: 0;
  color: var(--wine-dark);
  font-family: var(--pixel);
  font-size: clamp(3.1rem, 8vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-shadow: 4px 4px 0 rgba(255,255,255,.9), 8px 8px 0 rgba(237,95,168,.16);
}

.player-one-heading p {
  margin: 1rem 0 0;
  color: var(--rose-500);
  font-family: var(--pixel);
  font-size: clamp(.78rem, 2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.player-one-heading p::before,
.player-one-heading p::after {
  content: "♥";
  margin-inline: .7rem;
}

.player-one-layout {
  display: grid;
  align-items: start;
  gap: 1.7rem;
}

.player-one-bio {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--ink);
  background-color: #fffaf4;
  border: 2px solid var(--rose-300);
  box-shadow: 8px 10px 0 rgba(95, 40, 91, .09), var(--paper-shadow);
}

.player-one-bio h2 {
  margin: 0 0 1.3rem;
  color: #bf317f;
  font-family: var(--pixel);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.player-one-bio__content {
  font-size: clamp(.95rem, 1.4vw, 1.06rem);
  line-height: 1.75;
}

.player-one-bio__content > :last-child {
  margin-bottom: 0;
}

.player-one-bio__content blockquote {
  margin: 2rem 0 0;
  padding: 1.35rem;
  color: var(--wine-dark);
  background: rgba(255,255,255,.58);
  border: 2px solid var(--rose-200);
  border-radius: 10px;
  font-family: var(--pixel);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  font-style: normal;
  line-height: 1.35;
  text-align: center;
}

.player-one-bio__footer {
  margin-top: 1.5rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--rose-300);
  font-family: var(--pixel);
  font-size: .72rem;
  text-align: center;
  text-transform: uppercase;
}

.player-one-editor-hint {
  padding: .8rem;
  color: var(--muted);
  background: var(--rose-100);
  border: 1px dashed var(--rose-300);
  border-radius: 8px;
  text-align: center;
}

.player-one-entry {
  position: relative;
  min-width: 0;
}

.player-one-entry--photo {
  margin: 0;
}

.player-one-entry__link {
  display: block;
  height: 100%;
  color: var(--ink);
  background: var(--cream);
  text-decoration: none;
}

.player-one-entry__link:hover,
.player-one-entry__link:focus {
  color: var(--wine-dark);
}

.player-one-entry__link:focus-visible {
  outline: 4px solid #9c6bff;
  outline-offset: 5px;
}

.player-one-entry__number {
  position: absolute;
  z-index: 4;
  top: .65rem;
  left: .65rem;
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: .35rem;
  color: #fff;
  background: var(--rose-500);
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--wine);
  font-family: var(--pixel);
  font-size: .82rem;
  line-height: 1;
}

.player-one-entry__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #ffe1f3, #efdaff);
}

.player-one-entry__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .3s ease;
}

.photo-mode-focal .player-one-entry__image {
  object-position: var(--about-focus-x) var(--about-focus-y);
}

.photo-mode-contain .player-one-entry__media {
  padding: .5rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.5), transparent),
    var(--rose-100);
}

.photo-mode-contain .player-one-entry__image {
  object-fit: contain;
  object-position: center;
}

.player-one-entry__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(143,47,109,.35);
  font-family: var(--pixel);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.player-one-entry__copy,
.player-one-entry__title,
.player-one-entry__excerpt {
  display: block;
}

.player-one-entry__copy {
  padding: 1rem 1.1rem 1.2rem;
}

.player-one-entry__title {
  margin: 0;
  color: var(--wine-dark);
  font-family: var(--pixel);
  font-size: clamp(.92rem, 1.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.player-one-entry__excerpt {
  margin: .5rem 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.player-one-entry__link:hover .player-one-entry__image {
  transform: scale(1.025);
}

.player-one-empty {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 2rem;
  background: var(--cream);
  border: 2px dashed var(--rose-300);
  border-radius: 14px;
  text-align: center;
}

/* Digital Scrapbook */
.player-one-layout--scrapbook {
  grid-template-columns: minmax(210px, 1fr) minmax(340px, 1.35fr) minmax(210px, 1fr);
  gap: 1.8rem clamp(1.5rem, 3vw, 3rem);
}

.player-one-layout--scrapbook .player-one-bio {
  grid-column: 2;
  grid-row: 1 / span 4;
  min-height: 100%;
  background-image: repeating-linear-gradient(transparent 0 30px, rgba(237,95,168,.14) 30px 31px);
  border-radius: 4px 15px 10px 5px;
}

.player-one-layout--scrapbook .player-one-bio::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -13px;
  right: 10%;
  width: 110px;
  height: 30px;
  background: rgba(244,154,201,.72);
  background-image: repeating-linear-gradient(45deg, transparent 0 7px, rgba(255,255,255,.36) 7px 14px);
  transform: rotate(7deg);
}

.player-one-bio__pin {
  display: none;
}

.player-one-layout--scrapbook .player-one-bio__pin {
  position: absolute;
  z-index: 4;
  top: -18px;
  left: 50%;
  display: block;
  width: 25px;
  height: 25px;
  background: var(--rose-500);
  border: 4px solid #ffabd5;
  border-radius: 50%;
  box-shadow: 0 8px 0 -3px var(--wine);
  transform: translateX(-50%);
}

.player-one-layout--scrapbook .player-one-entry.is-left {
  grid-column: 1;
  grid-row: var(--about-entry-row);
}

.player-one-layout--scrapbook .player-one-entry.is-right {
  grid-column: 3;
  grid-row: var(--about-entry-row);
}

.player-one-layout--scrapbook .player-one-entry.is-extra {
  grid-column: auto;
  grid-row: auto;
}

.player-one-entry--scrapbook {
  --scrapbook-tilt: -1.5deg;
  padding: .65rem .65rem 1.25rem;
  background: #fffdfc;
  border: 1px solid #e9c5da;
  box-shadow: 5px 8px 14px rgba(72, 34, 75, .16);
  transform: rotate(var(--scrapbook-tilt));
}

.player-one-entry--scrapbook::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: -13px;
  left: 50%;
  width: 82px;
  height: 27px;
  background: rgba(255,200,231,.9);
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.45) 8px 16px);
  transform: translateX(-50%) rotate(1deg);
  pointer-events: none;
}

.player-one-entry--scrapbook::after {
  content: "♥";
  position: absolute;
  z-index: 5;
  right: -10px;
  bottom: .35rem;
  color: #fff;
  text-shadow: -2px -2px 0 var(--wine), 2px -2px 0 var(--wine), -2px 2px 0 var(--wine), 2px 2px 0 var(--wine);
  font-family: var(--pixel);
  font-size: 1.6rem;
  pointer-events: none;
}

.player-one-entry--slot-2,
.player-one-entry--slot-5 { --scrapbook-tilt: 1.4deg; }
.player-one-entry--slot-3,
.player-one-entry--slot-8 { --scrapbook-tilt: -.8deg; }
.player-one-entry--slot-4,
.player-one-entry--slot-7 { --scrapbook-tilt: 1deg; }

.player-one-entry--scrapbook .player-one-entry__link {
  background: transparent;
}

.player-one-entry--scrapbook .player-one-entry__number {
  top: .85rem;
  left: .85rem;
}

.player-one-entry--scrapbook .player-one-entry__copy {
  padding: .85rem .4rem 1rem;
  text-align: center;
}

.player-one-entry--scrapbook .player-one-entry__title {
  font-family: var(--rounded);
  font-style: italic;
  letter-spacing: .03em;
}

/* Cozy Magazine */
.player-one-layout--magazine {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .95fr) minmax(0, .9fr);
  grid-auto-flow: row;
  gap: 1.25rem;
}

.player-one-layout--magazine .player-one-bio {
  grid-column: 2;
  grid-row: 1 / span 2;
  height: 100%;
  border-radius: 15px;
  box-shadow: 5px 6px 0 rgba(143,47,109,.08);
}

.player-one-entry--magazine {
  overflow: hidden;
  background: var(--cream);
  border: 2px solid var(--rose-200);
  border-radius: 14px;
  box-shadow: 5px 6px 0 rgba(143,47,109,.08);
}

.player-one-entry--magazine.is-feature {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.player-one-entry--magazine.is-feature .player-one-entry__media {
  aspect-ratio: 4 / 5;
}

.player-one-entry--magazine.is-feature .player-one-entry__title {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.player-one-entry--magazine.is-supporting-2 {
  grid-column: 3;
  grid-row: 1;
}

.player-one-entry--magazine.is-supporting-3 {
  grid-column: 3;
  grid-row: 2;
}

.player-one-entry--magazine.is-supporting .player-one-entry__media {
  aspect-ratio: 16 / 9;
}

.player-one-entry--magazine.is-standard {
  grid-column: auto;
  grid-row: auto;
}

.player-one-entry--magazine .player-one-entry__copy {
  position: relative;
  padding-right: 2rem;
}

.player-one-entry--magazine .player-one-entry__copy::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: .8rem;
  color: var(--rose-500);
  font-size: 1.7rem;
  line-height: 1;
  transform: translateY(-50%);
}

@media (max-width: 1000px) {
  .player-one-layout--scrapbook,
  .player-one-layout--magazine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-one-layout--scrapbook .player-one-bio,
  .player-one-layout--magazine .player-one-bio {
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto;
    min-height: 0;
  }

  .player-one-layout--scrapbook .player-one-entry,
  .player-one-layout--magazine .player-one-entry {
    grid-column: auto;
    grid-row: auto;
  }

  .player-one-entry--magazine.is-feature {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .player-one-page {
    padding-top: 2.2rem;
  }

  .player-one-shell {
    width: min(100% - 1rem, 1320px);
  }

  .player-one-heading {
    margin-bottom: 2.4rem;
  }

  .player-one-heading h1 {
    font-size: clamp(2.75rem, 16vw, 4.5rem);
  }

  .player-one-heading p::before,
  .player-one-heading p::after {
    margin-inline: .35rem;
  }

  .player-one-layout {
    gap: .9rem;
  }

  .player-one-bio {
    padding: 2rem 1.3rem;
  }

  .player-one-bio__content {
    font-size: .96rem;
  }

  .player-one-entry__number {
    top: .35rem;
    left: .35rem;
    min-width: 1.8rem;
    height: 1.8rem;
    font-size: .68rem;
  }

  .player-one-entry__copy {
    padding: .7rem .65rem .8rem;
  }

  .player-one-entry__title {
    font-size: .76rem;
  }

  .player-one-entry__excerpt {
    font-size: .7rem;
  }

  .player-one-entry--scrapbook {
    padding: .4rem .4rem .9rem;
  }

  .player-one-entry--scrapbook::before {
    top: -9px;
    width: 58px;
    height: 20px;
  }

  .player-one-entry--scrapbook::after {
    right: -4px;
    font-size: 1.15rem;
  }

  .player-one-entry--scrapbook .player-one-entry__excerpt {
    display: none;
  }

  .player-one-entry--magazine.is-feature .player-one-entry__media {
    aspect-ratio: 4 / 5;
  }

  .player-one-entry--magazine.is-feature .player-one-entry__title {
    font-size: 1rem;
  }
}

@media (max-width: 360px) {
  .player-one-layout--scrapbook,
  .player-one-layout--magazine {
    grid-template-columns: 1fr;
  }

  .player-one-entry--magazine.is-feature,
  .player-one-layout--scrapbook .player-one-bio,
  .player-one-layout--magazine .player-one-bio {
    grid-column: auto;
  }
}

/* Full-photo mode must never inherit a fixed card ratio or hover crop. */
.player-one-entry.photo-mode-contain .player-one-entry__media {
  aspect-ratio: auto;
}

.player-one-entry.photo-mode-contain .player-one-entry__image,
.player-one-entry.photo-mode-contain .player-one-entry__link:hover .player-one-entry__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}
