/*
Theme Name: Fansite Project
Theme URI: https://example.com/
Author: Fansite Theme
Description: A customizable classic fansite directory theme. Celebrity profiles live as Pages under the Project parent page.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: fansite-project
*/

:root {
  --fp-bg: #fdfaff;
  --fp-text: #8a7f96;
  --fp-primary: #12b3b8;
  --fp-secondary: #1e6fb8;
  --fp-accent: #6d28d9;
  --fp-gold: #c9a227;
  --fp-heading: #25707d;
  --fp-paper: #ffffff;
  --fp-border: #d7e4e7;
  --fp-shadow: rgba(18,59,69,.15);
}
html { box-sizing:border-box; }
*,*:before,*:after { box-sizing:inherit; }
body {
  margin:0;
  background:var(--fp-bg);
  color:var(--fp-text);
  font:400 12px 'Quicksand',sans-serif;
  letter-spacing:.5px;
}
a { color:var(--fp-accent); text-decoration:none; }
a:hover { color:var(--fp-primary); }
img { max-width:100%; height:auto; }

.fp-topbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  padding:10px 18px;
  box-shadow:0 2px 10px var(--fp-shadow);
}
.fp-topbar .left,.fp-topbar .right { display:flex; align-items:center; gap:12px; }
.fp-diamonds { color:rgba(255,255,255,.9); font-size:.8em; text-shadow:0 1px 3px rgba(18,59,69,.35); }
.fp-site-name {
  font-weight:700; text-transform:uppercase; letter-spacing:3px;
  color:#fff; font-size:1em; text-shadow:0 1px 3px rgba(18,59,69,.35);
}
.fp-crest {
  position:absolute; left:50%; top:9px; width:40px; height:40px;
  transform:translateX(-50%) rotate(45deg); border-radius:6px;
  background:#fff; box-shadow:0 3px 10px rgba(18,59,69,.3);
  display:flex; align-items:center; justify-content:center;
}
.fp-crest span {
  transform:rotate(-45deg); font-family:'Abril Fatface',cursive;
  color:var(--fp-accent); font-size:1.6em; line-height:1;
}
.fp-social { display:flex; gap:10px; align-items:center; }
.fp-social a { color:#fff; font-size:1.05em; font-weight:700; }
.fp-social a:hover { color:#123b45; }

.fp-container { max-width:1000px; margin:0 auto; padding:0 20px; }
.fp-hero { text-align:center; padding:40px 10px 18px; }
.fp-hero h1 {
  margin:0; font:400 4em/1.1 'Julius Sans One',sans-serif;
  text-transform:uppercase; letter-spacing:4px;
  background-image:linear-gradient(45deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.fp-tag {
  margin-top:8px; font-style:italic; letter-spacing:1.5px;
  color:#79a4ad; font-size:1.2em; font-weight:500;
}

.fp-profile {
  display:grid;
  grid-template-columns:minmax(180px,30%) 1fr;
  gap:28px;
  align-items:start;
  margin:22px auto 36px;
}
.fp-featured {
  background:linear-gradient(160deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  border:4px solid var(--fp-paper);
  box-shadow:0 4px 16px var(--fp-shadow);
  overflow:hidden;
}
.fp-featured img {
  width:100%; display:block; aspect-ratio:3/4;
  object-fit:cover; object-position:center top;
}
.fp-meta {
  background:var(--fp-paper);
  padding:20px 22px;
  box-shadow:0 3px 14px var(--fp-shadow);
  line-height:1.8;
}
.fp-meta p { margin:0 0 5px; }
.fp-meta strong {
  color:var(--fp-heading); text-transform:uppercase;
  letter-spacing:1px; margin-right:5px;
}
.fp-about { margin-top:18px; }
.fp-about p:last-child { margin-bottom:0; }

.fp-quote {
  max-width:800px; margin:34px auto;
  padding:26px 30px;
  text-align:center;
  font-family:Georgia,serif;
  font-size:1.35em; line-height:1.6;
  font-style:italic;
  color:var(--fp-heading);
  border-top:1px solid var(--fp-border);
  border-bottom:1px solid var(--fp-border);
}
.fp-quote cite {
  display:block; margin-top:10px;
  font:500 .75em 'Quicksand',sans-serif;
  font-style:normal; letter-spacing:1px;
  text-transform:uppercase; color:var(--fp-accent);
}

.fp-news { margin:36px auto 42px; }
.fp-section-title {
  text-align:center; margin:0 0 18px;
  color:var(--fp-heading); font-size:1.2em;
  text-transform:uppercase; letter-spacing:2px;
}
.fp-news ul { list-style:none; padding:0; margin:0; }
.fp-news li {
  background:var(--fp-paper); margin:8px 0; padding:11px 14px;
  box-shadow:0 2px 7px var(--fp-shadow);
}
.fp-news li a { font-weight:700; }
.fp-news .date { display:block; margin-top:3px; font-size:.8em; color:#93bec5; }

.fp-content { max-width:850px; margin:30px auto 45px; line-height:1.8; }
.fp-content h2,.fp-content h3 { color:var(--fp-heading); }
.fp-content img { margin:10px 0; }

.fp-buttons { text-align:center; margin:22px auto 34px; padding:0 16px; }
.fp-buttons a {
  display:inline-block; margin:4px; padding:8px 16px;
  background:var(--fp-paper); border:1px solid var(--fp-border);
  text-transform:uppercase; letter-spacing:1.5px;
  font-weight:700; font-size:.8em; color:var(--fp-heading);
  box-shadow:0 2px 6px var(--fp-shadow);
}
.fp-buttons a:hover {
  color:#fff;
  background:linear-gradient(45deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  border-color:transparent;
}
.fp-footer {
  background:linear-gradient(90deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  padding:10px 18px; color:#fff;
  text-transform:uppercase; letter-spacing:1.5px; font-size:.85em;
}
.fp-footer a { color:#123b45; }
.fp-footer a:hover { color:#fff; }

@media (max-width:700px) {
  .fp-crest { display:none; }
  .fp-hero h1 { font-size:10vw; }
  .fp-profile { grid-template-columns:1fr; }
  .fp-featured { max-width:360px; margin:0 auto; width:100%; }
}


/* ----------------- PROJECT DIRECTORY / MAIN INDEX ----------------- */

.fp-gallery {
  max-width:960px;
  margin:30px auto 10px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:26px 20px;
}

.fp-gallery .card {
  display:block;
  text-align:center;
  position:relative;
}

.fp-gallery .portrait-wrap {
  position:relative;
}

.fp-gallery .portrait {
  width:100%;
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  border:4px solid #fff;
  box-shadow:0 4px 16px var(--fp-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Abril Fatface',cursive;
  color:#fff;
  font-size:3em;
  text-transform:lowercase;
  transition:transform .3s ease,filter .3s ease,box-shadow .3s ease;
}

.fp-gallery .portrait img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  filter:grayscale(100%) contrast(1.18) brightness(1.08) saturate(1.05);
  transition:filter .3s ease;
}

.fp-gallery .card:hover .portrait {
  transform:translateY(-5px);
  box-shadow:0 10px 22px rgba(18,59,69,.3);
}

.fp-gallery .card:hover .portrait img {
  filter:grayscale(0) contrast(1.12) brightness(1.03);
}

.fp-gallery .overlay {
  position:absolute;
  inset:4px;
  background:rgba(255,255,255,.88);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px;
  text-align:center;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.fp-gallery .card:hover .overlay {
  opacity:1;
}

.fp-gallery .overlay strong {
  display:block;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--fp-heading);
  font-size:1em;
  margin-bottom:6px;
}

.fp-gallery .overlay small {
  color:var(--fp-text);
  font-size:.78em;
  letter-spacing:.5px;
  line-height:1.5;
}

.fp-gallery .overlay small strong {
  display:inline;
  margin:0;
  font-size:1em;
  color:var(--fp-accent);
  letter-spacing:1px;
}

.fp-gallery .nameplate {
  margin-top:8px;
  background:#fff;
  padding:7px 6px;
  box-shadow:0 2px 8px var(--fp-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  font-size:.82em;
  color:var(--fp-heading);
  transition:color .3s ease;
}

.fp-gallery .nameplate:before {
  content:"\2666";
  color:var(--fp-gold);
  font-size:.9em;
  transition:color .3s ease;
}

.fp-gallery .card:hover .nameplate {
  color:var(--fp-primary);
}

.fp-gallery .card:hover .nameplate:before {
  color:var(--fp-primary);
}

.fp-gallery .domain {
  margin-top:4px;
  font-size:.75em;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#93bec5;
}

@media all and (max-width:640px) {
  .fp-gallery {
    grid-template-columns:repeat(2,minmax(120px,1fr));
    gap:20px 14px;
  }
}

.fp-topbar .fp-site-name { color:#fff; }
.fp-topbar .fp-site-name:hover { color:#fff; }


/* ----------------- CELEBRITY FEATURED IMAGE ----------------- */

.fp-featured {
  position:relative;
  cursor:pointer;
}

.fp-featured img {
  filter:grayscale(100%) contrast(1.18) brightness(1.08) saturate(1.05);
  transition:filter .3s ease, transform .3s ease;
}

.fp-featured:hover img {
  filter:grayscale(0) contrast(1.12) brightness(1.03) saturate(1);
}

.fp-featured .fp-visit-overlay {
  position:absolute;
  inset:4px;
  background:rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.fp-featured:hover .fp-visit-overlay {
  opacity:1;
}

.fp-featured .fp-visit-overlay span {
  color:var(--fp-heading);
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:700;
  font-size:1.05em;
}


/* ----------------- CELEBRITY PAGE PAGINATION ----------------- */

.fp-pagination {
  max-width:850px;
  margin:42px auto 50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.fp-page-link {
  min-height:58px;
  padding:10px 16px;
  background:var(--fp-paper);
  border:1px solid var(--fp-border);
  box-shadow:0 2px 8px var(--fp-shadow);
  color:var(--fp-heading);
  display:flex;
  align-items:center;
  gap:9px;
  transition:all .25s ease;
}

.fp-page-link:hover {
  color:#fff;
  background:linear-gradient(90deg,var(--fp-primary),var(--fp-secondary),var(--fp-accent));
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 6px 14px var(--fp-shadow);
}

.fp-page-link .arrow {
  font-size:1.45em;
  line-height:1;
  flex:0 0 auto;
}

.fp-page-link .label {
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:700;
  font-size:.72em;
  opacity:.8;
  flex:0 0 auto;
}

.fp-page-link .name {
  font-size:.82em;
  font-weight:700;
  letter-spacing:.7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.fp-prev { justify-content:flex-start; }
.fp-next { justify-content:flex-end; text-align:right; }

.fp-page-disabled {
  visibility:hidden;
  box-shadow:none;
  border-color:transparent;
  background:transparent;
}

@media all and (max-width:640px) {
  .fp-pagination {
    grid-template-columns:1fr;
  }
  .fp-next {
    justify-content:flex-start;
    text-align:left;
  }
}


.fp-page-link.fp-arrows-only {
  min-height:54px;
  justify-content:center;
  padding:8px;
}

.fp-page-link.fp-arrows-only .arrow {
  font-size:1.7em;
  margin:0;
}

.fp-page-link.fp-arrows-only:hover .arrow {
  transform:translateX(2px);
}