/*
 * ============================================
 * Jerilicious — Jeri Ryan Fanlisting
 * Theme stylesheet (mint / lavender / gold / wine / teal)
 * Self-contained :root — safe to load independently
 * of fanatically.css, which carries its own copy
 * of these tokens.
 * ============================================
 */

:root {
  --mint: #cdf6e6;
  --mint-deep: #a9e9cf;
  --lavender: #efeaf9;
  --lavender-deep: #ddd2f2;
  --gold: #b6935e;
  --gold-light: #e3cd9f;
  --wine: #8a5a70;
  --teal: #5fa992;
  --ink: #3a2c33;
  --ink-soft: #5f5772;
  --ink-light: #9c8aa8;
  --paper: #fdfcf9;
}

* {
  box-sizing: border-box;
}

/* Mobile browsers (Firefox for Android especially, but also Chrome)
   silently inflate font-size on narrow text blocks they judge to be
   "body copy" - this site's uppercase/letter-spaced small-caps text
   (footer, nav pills, .kicker, h5/h6, figcaption) is a textbook case
   that heuristic gets wrong, since those are deliberately small.
   Disabling it makes every font-size in this stylesheet render as
   authored instead of being unpredictably rescaled per element. */
html {
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: linear-gradient(160deg, var(--mint) 0%, var(--lavender) 55%, var(--lavender-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  margin: 0;
  min-height: 100vh;
}

/* ---------- header ---------- */

header {
  align-items: center;
  background: linear-gradient(90deg, hsla(162, 93%, 88%, 1) 0%, hsla(250, 100%, 99%, 1) 100%);
  box-shadow: 0 6px 24px rgba(36, 31, 43, 0.18);
  display: flex;
  justify-content: center;
  position: relative;
}

header img {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

header::after {
  background: linear-gradient(180deg, transparent 0%, rgba(239, 234, 249, 0.9) 100%);
  bottom: 0;
  content: '';
  height: 48px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* ---------- nav ---------- */

nav {
  backdrop-filter: blur(10px);

  background: rgba(253, 252, 249, 0.82);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: -1.75rem auto 0.5rem;
  max-width: 92%;
  padding: 1.1rem 1.5rem;
  position: relative;
  width: fit-content;
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(182, 147, 94, 0.25);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(36, 31, 43, 0.14);
}

/* Decorative accent hairline for the header site nav specifically -
   scoped to nav.site-nav rather than the bare `nav` element for the
   same reason as the mobile rules below: Fanatically's .fan-size-nav,
   .fan-joined-category-nav, .fan-owned-category-nav and archivio's
   .breadcrumb are real <nav> elements too, and this pseudo-element
   (plus the `position: relative` above) was leaking onto them,
   drawing the gradient line at their own top edge with almost no
   clearance from the content below it. */
nav.site-nav::before {
  background: linear-gradient(90deg, transparent, var(--wine) 15%, var(--gold) 50%, var(--teal) 85%, transparent);
  content: '';
  height: 2px;
  left: 8%;
  opacity: 0.6;
  position: absolute;
  right: 8%;
  top: 0;
}

nav a {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  padding: 0.65rem 1.15rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

nav a:hover,
nav a:focus-visible {
  background: linear-gradient(120deg, var(--mint) 0%, var(--lavender) 100%);
  border-color: var(--gold-light);
  color: #241f2b;
  outline: none;
  transform: translateY(-2px);
}

nav a:visited {
  color: var(--ink-soft);
}

/* Current page, set via aria-current="page" from header.php's PHP logic
   (header.php is shared by every page, so this can't be hardcoded). Wine
   reads as clearly "selected" without duplicating the mint/lavender
   hover treatment or the dark hover-text color above. */
nav a[aria-current="page"] {
  background: var(--white-soft, rgba(253, 252, 249, 0.78));
  border-color: var(--gold);
  color: var(--wine);
  font-weight: 700;
}

nav a[aria-current="page"]:visited {
  color: var(--wine);
}

nav a[aria-current="page"]:hover,
nav a[aria-current="page"]:focus-visible {
  color: var(--wine);
}

/* ---------- headings ---------- */

h1 {
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 0.35rem;
  text-align: center;
}

h2 {
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 3rem 0 0.6rem;
  position: relative;
  text-align: center;
}

h2::after {
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  content: '';
  display: block;
  height: 2px;
  margin: 0.6rem auto 0;
  opacity: 0.7;
  width: 90px;
}

h3 {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 600;
  gap: 0.7rem;
  letter-spacing: 0.01em;
  margin: 2.4rem 0 0.7rem;
  text-align: left;
}

h3::before {
  background: linear-gradient(180deg, var(--teal), var(--gold), var(--wine));
  border-radius: 2px;
  content: '';
  display: inline-block;
  flex-shrink: 0;
  height: 1.1em;
  width: 3px;
}

h4 {
  color: var(--wine);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 1.6rem 0 0.5rem;
  text-align: left;
}

h5 {
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  margin: 1.4rem 0 0.5rem;
  text-transform: uppercase;
}

h6 {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  margin: 1.2rem 0 0.4rem;
  opacity: 0.85;
  text-transform: uppercase;
}

h1 em,
h2 em,
h3 em,
h4 em {
  color: var(--wine);
  font-style: italic;
  font-weight: inherit;
}

.kicker {
  color: var(--gold);
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-bottom: 0.6rem;
  text-align: center;
  text-transform: uppercase;
}

.flourish {
  display: block;
  height: 22px;
  margin: 0.5rem auto 2.1rem;
  opacity: 0.85;
  width: 160px;
}

/* ---------- typography helpers ---------- */

em,i {
  border-bottom: 2px dotted var(--gold);
  color: var(--wine);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 1px;
}

strong,b {
  background-image: linear-gradient(var(--mint-deep), var(--mint-deep));
  background-position: 0 88%;
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  color: var(--ink);
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0 0.06em;
  text-transform: uppercase;
}

/* ---------- links ---------- */

a {
  color: var(--teal);
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

a:visited {
  color: #4f8f7c;
}

a:hover {
  color: var(--gold);
}

a:active {
  color: var(--ink);
  transform: translateY(1px);
}

a:focus-visible {
  border-radius: 2px;
  outline: 2px dashed var(--gold);
  outline-offset: 3px;
}

/* Prose links (paragraphs, blockquotes, captions, footer credit line)
   get an italic treatment with an underline that solidifies on hover.
   Nav pills, pagination, and other UI chrome set their own explicit
   color/background with higher specificity and are unaffected. */
main p a,
blockquote a,
figcaption a,
footer a {
  border-bottom: 1px dotted rgba(182, 147, 94, 0.45);
  font-style: italic;
}

main p a:hover,
blockquote a:hover,
figcaption a:hover,
footer a:hover {
  border-bottom-color: var(--gold);
  border-bottom-style: solid;
}

footer a:visited {
  color: #5c5d62;
}

/* ---------- blockquote ---------- */

blockquote {
  background: linear-gradient(135deg, rgba(205, 246, 230, 0.4), rgba(239, 234, 249, 0.4));
  border-image: linear-gradient(180deg, var(--teal), var(--gold), var(--wine)) 1;
  border-left: 3px solid transparent;
  border-radius: 0 1.25rem 1.25rem 0;
  box-shadow: 0 10px 30px rgba(36, 31, 43, 0.1);
  margin: 2.2rem 0;
  padding: 1.7rem 2.2rem 1.7rem 2.5rem;
  position: relative;
}

blockquote::before {
  color: var(--gold-light);
  content: '\201C';
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 700;
  left: 0.5rem;
  line-height: 1;
  opacity: 0.75;
  position: absolute;
  top: -0.35rem;
}

blockquote p {
  color: var(--ink-soft);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.5rem;
}

blockquote cite {
  color: var(--gold);
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-top: 1rem;
  padding-left: 1.5rem;
  text-transform: uppercase;
}

blockquote cite::before {
  content: '\2014 ';
  opacity: 0.6;
}

/* ---------- images ---------- */

img {
  height: auto;
  max-width: 100%;
}

/* :not([style]) excludes third-party widget markup that ships its
   own inline style attribute - e.g. Fanatically's FansFansFans
   exchange badge (<img style="border:0;margin:0;height:15px">)
   nested inside .fanlisting-fff on the stats page. Without this,
   `display:block` here still applies (the class rule sets a
   property the inline style doesn't touch), but the inline
   `margin:0` then blocks the `margin:1.8rem auto` centering from
   taking effect, so the tiny badge collapses flush-left instead of
   centering like its sibling <object> - same class of bug as the
   drop-cap :not([style]) fix above for Fanatically's injected <p>. */
main img:not([style]),
.content img:not([style]) {
  border: 1px solid rgba(182, 147, 94, 0.25);
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(36, 31, 43, 0.14);
  display: block;
  margin: 1.8rem auto;
}

a img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a:hover img {
  box-shadow: 0 16px 40px rgba(36, 31, 43, 0.2);
  transform: translateY(-3px);
}

figure {
  margin: 1.8rem 0;
  text-align: center;
}

figure img {
  margin: 0 auto 0.8rem;
}

figcaption {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* ---------- main card ---------- */

main {
  background: var(--paper);
  border: 1px solid rgba(182, 147, 94, 0.2);
  border-radius: 1.75rem;
  box-shadow: 0 24px 60px rgba(36, 31, 43, 0.12);
  margin: 1.5rem auto 3rem;
  max-width: 46rem;
  padding: 3.25rem 3rem 3.5rem;
  position: relative;
  width: 90%;
}

main::before,
main::after {
  border: 2px solid var(--gold-light);
  content: '';
  height: 34px;
  opacity: 0.65;
  position: absolute;
  width: 34px;
}

main::before {
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 1.25rem;
  left: 14px;
  top: 14px;
}

main::after {
  border-bottom-right-radius: 1.25rem;
  border-left: none;
  border-top: none;
  bottom: 14px;
  right: 14px;
}

main > p {
  color: var(--ink-soft);
  font-size: 1.18rem;
  line-height: 1.75;
  margin: 0 0 1.4rem;
}

main > p:first-of-type:not([style])::first-letter {
  color: var(--gold);
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 0.85;
  padding: 0.1rem 0.5rem 0 0;
}

main > p:last-of-type {
  border-top: 1px solid rgba(182, 147, 94, 0.25);
  color: var(--wine);
  font-style: italic;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  text-align: center;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid rgba(182, 147, 94, 0.15);
  color: #96979c;
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  margin: 0.5rem auto 0;
  max-width: 46rem;
  opacity: 0.78;
  padding: 1.75rem 1rem 2.5rem;
  text-align: right;
  width: 90%;
}

footer a {
  color: #74767c;
}

footer a:hover {
  color: var(--gold);
}

footer span {
  color: var(--gold);
  opacity: 0.85;
}

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  /* Pill nav wraps unevenly on narrow screens because word length
     varies (SCREENCAPS vs JOIN), producing 4+ short rows and a lot
     of wasted vertical height. A single-row horizontal scroller is
     the standard mobile pattern and keeps nav height constant
     regardless of how many links there are.
     Scoped to nav.site-nav (the header.php main nav) rather than
     the bare `nav` element: Fanatically renders .fan-size-nav and
     .breadcrumb as real <nav> elements too, and they rely on the
     shared pill background/border from the base `nav` rule above
     (see archivio.css comment on .breadcrumb) while wrapping
     normally instead of scrolling. Applying overflow-x/nowrap/
     border-radius:999px to those as well turned them into an oval
     once they wrapped into several narrow rows. */
  nav.site-nav {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 28px), transparent 100%);
    border-radius: 999px;
    flex-wrap: nowrap;
    gap: 0.4rem;
    justify-content: flex-start;
    margin: -1rem auto 0.5rem;
    max-width: 94%;
    overflow-x: auto;
    padding: 0.65rem 1.5rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  nav.site-nav::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  nav.site-nav a {
    flex: 0 0 auto;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
  }

  main {
    padding: 2.25rem 1.5rem 2.5rem;
    width: 88%;
  }

  main > p:first-of-type:not([style])::first-letter {
    font-size: 2.6rem;
  }

  blockquote {
    border-radius: 0 1rem 1rem 0;
    margin: 1.6rem 0;
    padding: 1.5rem 1.1rem 1.5rem 1.3rem;
  }

  blockquote::before {
    font-size: 3rem;
    left: 0.3rem;
    top: -0.15rem;
  }

  blockquote p {
    font-size: 1.1rem;
    padding-left: 0.6rem;
  }

  blockquote cite {
    padding-left: 0.6rem;
  }

  footer {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 2;
    padding: 1.5rem 1.25rem 2.25rem;
  }
}
/* ============================================
   FanUpdate Redux
   ============================================ */

div#fanupdate {
  color: var(--ink-soft);
}

div#fanupdate h1 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0 0 0.5rem;
}

div#fanupdate h2 {
  font-size: 1.4rem;
  margin: 0 0 0.4rem;
  text-align: left;
}

div#fanupdate h2::after {
  display: none;
}

div#fanupdate h3 {
  font-size: 1.1rem;
  margin: 1.6rem 0 0.5rem;
}

div#fanupdate h4 {
  font-size: 1.05rem;
  margin: 1.2rem 0 0.4rem;
}

div#fanupdate h5 {
  margin: 1rem 0 0.4rem;
}

div#fanupdate h6 {
  margin: 0.9rem 0 0.3rem;
}

div#fanupdate p {
  color: var(--ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 1.1rem;
}

/* Each post — set via Admin -> Options -> Templates -> entry_template,
   which wraps {{title}}/{{catfile}}/{{body}} in <div class="fu-entry">
   ...</div>. Redux 2.5.0+ ships this wrapper by default. */
#fanupdate .fu-entry {
  background: linear-gradient(135deg, rgba(205, 246, 230, 0.35), rgba(239, 234, 249, 0.35));
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--teal), var(--gold), var(--wine)) 1;
  border-radius: 0 1.1rem 1.1rem 0;
  box-shadow: 0 8px 24px rgba(36, 31, 43, 0.08);
  margin-bottom: 1.6rem;
  padding: 1.3rem 1.6rem;
}

#fanupdate .fu-entry:last-of-type {
  margin-bottom: 0;
}

p.catfile {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  padding: 0;
  text-transform: uppercase;
}

/* Entry date in the category archive listing (show-cat.php). */
span.date {
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* ---------- images inside posts ---------- */

/* Wraps every image inserted via the post editor's "Insert image" button.
   Neutralises the site-wide `main img:not([style])` rule (border/radius/
   shadow/centering) so the border/radius/shadow live on the <a> wrapper
   instead — matches the fu-lightbox convention used by other skins. */
a.fu-lightbox {
  border: 1px solid rgba(182, 147, 94, 0.3);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(36, 31, 43, 0.12);
  display: inline-block;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

a.fu-lightbox:hover,
a.fu-lightbox:focus {
  border-color: var(--gold);
  box-shadow: 0 14px 34px rgba(36, 31, 43, 0.2);
  outline: none;
  transform: translateY(-2px);
}

a.fu-lightbox img {
  border: none;
  box-shadow: none;
  cursor: zoom-in;
  display: block;
  height: auto;
  margin: 0;
  max-width: 100%;
  transition: opacity 0.2s ease;
}

a.fu-lightbox:hover img,
a.fu-lightbox:focus img {
  opacity: 0.92;
}

a.fu-lightbox.fu-img-left {
  float: left;
  margin: 0 1.25em 0.75em 0;
}

a.fu-lightbox.fu-img-right {
  float: right;
  margin: 0 0 0.75em 1.25em;
}

a.fu-lightbox.fu-img-center {
  display: block;
  margin: 1.4rem auto;
}

/* ---------- archives (?view=archive) ---------- */

#fanupdate .fu-archive-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

#fanupdate .fu-archive-item {
  border-bottom: 1px dotted rgba(182, 147, 94, 0.35);
  color: var(--ink-soft);
  font-size: 1rem;
  padding: 0.6rem 0;
}

#fanupdate .fu-archive-item:last-child {
  border-bottom: none;
}

#fanupdate .fu-archive-count {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-left: 0.3rem;
}

/* ---------- comments ---------- */

div#comments {
  border-top: 1px solid rgba(182, 147, 94, 0.25);
  margin-top: 2.2rem;
  padding-top: 1.6rem;
}

/* Shown in place of the comment list/form when comments are off. */
p.comments-closed {
  color: var(--ink-light);
  font-style: italic;
}

/* Comment validation/spam-guard error messages. */
p.error,
ul.error {
  background: rgba(138, 90, 112, 0.1);
  border: 1px solid rgba(138, 90, 112, 0.35);
  border-radius: 0.75rem;
  color: var(--wine);
  font-size: 0.92rem;
  list-style: none;
  margin-bottom: 1rem;
  padding: 0.8rem 1.1rem;
}

ul.error li {
  margin: 0;
}

ul.error li + li {
  margin-top: 0.3rem;
}

/* Every comment always carries both "comment" and "fu-comment" — the
   latter follows the fu- prefix used elsewhere (fu-entry, fu-lightbox)
   and is the selector to style against going forward. */
#fanupdate .fu-comment {
  background: rgba(253, 252, 249, 0.6);
  border: 1px solid rgba(182, 147, 94, 0.2);
  border-radius: 1rem;
  clear: both;
  margin-bottom: 0.9rem;
  padding: 1.1rem 1.4rem;
}

#fanupdate .fu-comment p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

#fanupdate .fu-comment p.commenter {
  color: var(--gold);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

div#newComment {
  border-top: 1px solid rgba(182, 147, 94, 0.25);
  margin-top: 2.2rem;
  padding-top: 1.6rem;
}

img.gravatar {
  border: 1px solid rgba(182, 147, 94, 0.3);
  border-radius: 50%;
  float: right;
  margin: 0 0 1rem 1.2rem;
}

/* ---------- comment form ---------- */

form#comments-form {}

h3#postcomment {
  margin-top: 1.6rem;
}

p#cmt-rules,
p#cmt-moderation {
  color: var(--ink-light);
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

/* Moderation notice in the built-in fallback comment form template. */
p.hint {
  color: var(--ink-light);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.4rem 0 0.8rem;
}

/* "Remember me" checkbox label. */
label.checkbox {
  color: var(--ink-soft);
  display: inline;
  float: none;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  text-align: left;
  text-transform: none;
  width: auto;
}

/* Comment form submit button. */
.submit {
  background: linear-gradient(120deg, var(--teal), var(--gold));
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.65rem 1.6rem;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.submit:hover {
  box-shadow: 0 10px 26px rgba(36, 31, 43, 0.2);
  transform: translateY(-2px);
}

#captcha-img {
  border: 1px solid rgba(182, 147, 94, 0.3);
  border-radius: 0.5rem;
  display: block;
  margin: 0.4rem 0 0.8rem;
}

#fanupdate label {
  color: var(--ink-light);
  display: block;
  float: left;
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  margin: 0 0.6em 0.5em 0;
  padding-top: 0.55em;
  text-align: right;
  text-transform: uppercase;
  width: 9em;
}

#fanupdate input,
#fanupdate textarea,
#fanupdate select,
#fanupdate option {
  background: rgba(253, 252, 249, 0.85);
  border: 1px solid rgba(182, 147, 94, 0.35);
  border-radius: 0.6rem;
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.02rem;
  padding: 0.5em 0.8em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#fanupdate input:focus,
#fanupdate textarea:focus,
#fanupdate select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(182, 147, 94, 0.18);
  outline: none;
}

#fanupdate textarea {
  width: 100%;
}

/* ---------- fanupdate footer bits ---------- */

a.rss {
  background: rgba(95, 169, 146, 0.12);
  border: 1px solid rgba(95, 169, 146, 0.35);
  border-radius: 999px;
  color: var(--teal);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

a.rss:hover {
  border-color: var(--gold);
  color: var(--gold);
}

div.archivelink {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  margin: 2rem 0 0;
  text-align: right;
  text-transform: uppercase;
}

div.archivelink a {
  border-bottom: none;
  font-style: normal;
}

div.credit {
  border-top: 1px solid rgba(182, 147, 94, 0.2);
  clear: both;
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  text-align: center;
}

div.credit p {
  color: var(--ink-light);
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  margin: 0;
  opacity: 0.75;
  text-transform: uppercase;
}

/* -- SiteSkin Redux -- */
p.siteskin-redux-skin
{
    text-align: center;
}

img.siteskin-redux-skin-thumb
{
    backdrop-filter: blur(8px); /* Optional: creates a frosted glass effect */
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(199, 187, 219, 0.3); /* Soft lavender-tinted shadow */
    display: inline;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    width: 150px;
}