/*
Theme Name: Nightshade
Theme URI: https://theitsign.com
Author: Itsign Digital Agency
Author URI: https://theitsign.com
Description: A dark, atmospheric, fully-dynamic theme for authors and creators. Every homepage section, book, news item and retailer is editable inside WordPress — no code required. Built by Itsign Digital Agency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nightshade
Tags: author, blog, portfolio, custom-colors, custom-menu, custom-logo, featured-images, full-width-template, translation-ready

This theme displays a "Powered by Itsign Digital Agency" footer credit. You are free to remove it (this theme is GPL); keeping it is appreciated.
*/

/* ============================================================
   DESIGN TOKENS
   Accent + a few surfaces are overridden inline from the
   Customizer (see inc/customizer.php -> nightshade_css_vars()).
   ============================================================ */
:root{
  --ns-ink:        #0c0b10;
  --ns-ink-2:      #141118;
  --ns-panel:      #1a1620;
  --ns-bone:       #ece6d8;
  --ns-bone-dim:   #a49e93;
  --ns-bone-faint: #6f6a63;
  --ns-accent:     #9b1c22;
  --ns-accent-2:   #d98a3a;
  --ns-line:       rgba(236,230,216,.12);
  --ns-line-soft:  rgba(236,230,216,.06);

  --ns-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --ns-body:    "Spectral", Georgia, "Times New Roman", serif;
  --ns-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ns-wrap: 1180px;
  --ns-gap:  clamp(1rem, 4vw, 2.75rem);
  --ns-radius: 4px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--ns-ink);
  color:var(--ns-bone);
  font-family:var(--ns-body);
  font-size:clamp(1rem, .96rem + .3vw, 1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ns-accent-2); text-decoration:none; transition:color .2s ease, opacity .2s ease; }
a:hover{ color:var(--ns-bone); }
h1,h2,h3,h4{ font-family:var(--ns-display); font-weight:600; line-height:1.15; letter-spacing:.01em; margin:0 0 .5em; }
p{ margin:0 0 1.1em; }
:focus-visible{ outline:2px solid var(--ns-accent-2); outline-offset:3px; }

.ns-wrap{ width:min(var(--ns-wrap), 92%); margin-inline:auto; }
.ns-section{ padding:clamp(3.5rem, 9vw, 7rem) 0; position:relative; }
.ns-eyebrow{
  font-family:var(--ns-display); font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--ns-accent-2); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:.7rem;
}
.ns-eyebrow::before{ content:""; width:34px; height:1px; background:var(--ns-accent); display:inline-block; }
.ns-h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); margin-bottom:.6em; }
.ns-lede{ color:var(--ns-bone-dim); max-width:60ch; font-size:1.08em; }

.ns-btn{
  display:inline-flex; align-items:center; gap:.55rem; cursor:pointer;
  font-family:var(--ns-ui); font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:.95rem 1.7rem; border-radius:var(--ns-radius);
  border:1px solid var(--ns-accent); background:var(--ns-accent); color:#fff;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.ns-btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px -12px var(--ns-accent); }
.ns-btn--ghost{ background:transparent; color:var(--ns-bone); border-color:var(--ns-line); }
.ns-btn--ghost:hover{ border-color:var(--ns-accent-2); color:var(--ns-bone); box-shadow:none; }

/* ============================================================
   HEADER
   ============================================================ */
.ns-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  transition:background .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.ns-header.is-stuck{
  background:rgba(12,11,16,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--ns-line-soft);
  padding-block:.7rem;
}
.ns-brand{ display:flex; align-items:center; gap:.8rem; font-family:var(--ns-display); font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ns-bone); }
.ns-brand img{ max-height:44px; width:auto; }
.ns-brand:hover{ color:var(--ns-bone); opacity:.85; }
.ns-nav{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.2rem); }
.ns-nav ul{ list-style:none; display:flex; gap:clamp(1rem,2.4vw,2rem); margin:0; padding:0; }
.ns-nav a{ color:var(--ns-bone-dim); font-family:var(--ns-ui); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.ns-nav a:hover{ color:var(--ns-bone); }
.ns-nav .current-menu-item > a{ color:var(--ns-bone); }
.ns-menu-toggle{ display:none; background:none; border:0; color:var(--ns-bone); cursor:pointer; padding:.4rem; }
.ns-menu-toggle svg{ width:26px; height:26px; }

@media (max-width:860px){
  .ns-menu-toggle{ display:inline-flex; }
  .ns-nav{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:2rem;
    background:rgba(10,9,13,.98); transform:translateX(100%); transition:transform .35s ease; z-index:1001;
  }
  .ns-nav.is-open{ transform:translateX(0); }
  .ns-nav ul{ flex-direction:column; text-align:center; gap:1.4rem; }
  .ns-nav a{ font-size:1.1rem; }
  .ns-nav .ns-close{ position:absolute; top:1.4rem; right:1.6rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.ns-hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:8rem 0 5rem; isolation:isolate; overflow:hidden;
}
.ns-hero__bg{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.ns-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent, rgba(12,11,16,.35) 55%, var(--ns-ink) 100%),
    linear-gradient(180deg, rgba(12,11,16,.55) 0%, rgba(12,11,16,.35) 40%, var(--ns-ink) 100%);
}
.ns-hero__inner{ max-width:22ch; }
.ns-hero__tag{
  font-family:var(--ns-display); font-style:normal; font-weight:600;
  font-size:clamp(2.4rem, 1.4rem + 5.5vw, 5.4rem); line-height:1.04; letter-spacing:.005em;
  text-wrap:balance; margin:0 0 1.4rem;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.ns-hero__sub{ color:var(--ns-bone-dim); font-size:1.15rem; max-width:46ch; margin-bottom:2rem; }
.ns-hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; }
.ns-hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; color:var(--ns-bone-faint);
  font-family:var(--ns-ui); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.ns-hero__scroll span{ width:1px; height:38px; background:linear-gradient(var(--ns-accent-2), transparent); animation:ns-fall 2.2s ease-in-out infinite; }
@keyframes ns-fall{ 0%{ transform:scaleY(.2); transform-origin:top; opacity:.3 } 50%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(.2); transform-origin:bottom; opacity:.3 } }

/* ============================================================
   ABOUT
   ============================================================ */
.ns-about{ background:linear-gradient(180deg, var(--ns-ink), var(--ns-ink-2)); }
.ns-about__grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.ns-about__body p{ color:var(--ns-bone-dim); }
.ns-about__portrait{ position:relative; }
.ns-about__portrait img{ border-radius:var(--ns-radius); box-shadow:0 30px 60px -30px #000; }
.ns-about__portrait::after{ content:""; position:absolute; inset:0; border:1px solid var(--ns-line); border-radius:var(--ns-radius); transform:translate(16px,16px); z-index:-1; }
.ns-social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; list-style:none; padding:0; }
.ns-social a{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border:1px solid var(--ns-line); border-radius:50%; color:var(--ns-bone-dim);
}
.ns-social a:hover{ border-color:var(--ns-accent-2); color:var(--ns-bone); transform:translateY(-2px); }
.ns-social svg{ width:18px; height:18px; }
@media (max-width:760px){ .ns-about__grid{ grid-template-columns:1fr; } .ns-about__portrait{ max-width:320px; } }

/* ============================================================
   LEAD MAGNET
   ============================================================ */
.ns-lead{ position:relative; overflow:hidden; }
.ns-lead__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; }
.ns-lead__panel{ background:var(--ns-panel); border:1px solid var(--ns-line); border-radius:8px; padding:clamp(1.8rem,4vw,3rem); }
.ns-lead__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.ns-lead__img img{ border-radius:6px; box-shadow:0 40px 70px -35px #000; }
@media (max-width:760px){ .ns-lead__grid{ grid-template-columns:1fr; } .ns-lead__img{ order:-1; max-width:260px; } }

/* ============================================================
   BOOKSHELF
   ============================================================ */
.ns-books__grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:clamp(1.4rem,3vw,2.4rem); margin-top:3rem;
}
.ns-book{ text-align:center; }
.ns-book__cover{
  position:relative; display:block; border-radius:4px; overflow:hidden;
  box-shadow:0 18px 34px -20px #000; transition:transform .3s ease, box-shadow .3s ease;
  aspect-ratio:2/3; background:var(--ns-panel);
}
.ns-book__cover img{ width:100%; height:100%; object-fit:cover; }
.ns-book:hover .ns-book__cover{ transform:translateY(-8px) rotate(-.6deg); box-shadow:0 30px 50px -22px var(--ns-accent); }
.ns-book__title{ font-family:var(--ns-display); font-size:1rem; margin:1rem 0 .25rem; letter-spacing:.02em; }
.ns-book__meta{ color:var(--ns-bone-faint); font-size:.82rem; font-family:var(--ns-ui); }

/* ============================================================
   NEWS
   ============================================================ */
.ns-news{ background:linear-gradient(180deg, var(--ns-ink-2), var(--ns-ink)); }
.ns-news__list{ list-style:none; margin:3rem 0 0; padding:0; border-top:1px solid var(--ns-line); }
.ns-news__item a{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.5rem; padding:1.35rem 0; border-bottom:1px solid var(--ns-line); color:var(--ns-bone); }
.ns-news__item a:hover{ color:var(--ns-accent-2); }
.ns-news__item a:hover .ns-news__title{ padding-left:.6rem; }
.ns-news__title{ font-family:var(--ns-display); font-size:1.15rem; transition:padding .25s ease; }
.ns-news__src{ font-family:var(--ns-ui); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ns-bone-faint); }

/* ============================================================
   RETAILERS
   ============================================================ */
.ns-retail__grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.6rem,5vw,4rem); margin-top:2.6rem; }
.ns-retail__grid img{ max-height:44px; width:auto; opacity:.55; filter:grayscale(1) brightness(1.6); transition:opacity .25s ease, filter .25s ease; }
.ns-retail__grid a:hover img{ opacity:1; filter:none; }

/* ============================================================
   CONTACT
   ============================================================ */
.ns-contact__grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,6vw,4.5rem); }
.ns-form{ display:grid; gap:1rem; }
.ns-form label{ font-family:var(--ns-ui); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ns-bone-dim); display:block; margin-bottom:.4rem; }
.ns-form input, .ns-form textarea{
  width:100%; background:var(--ns-ink-2); border:1px solid var(--ns-line); border-radius:var(--ns-radius);
  color:var(--ns-bone); padding:.85rem 1rem; font-family:var(--ns-body); font-size:1rem;
}
.ns-form input:focus, .ns-form textarea:focus{ outline:none; border-color:var(--ns-accent-2); }
.ns-form textarea{ min-height:150px; resize:vertical; }
.ns-hp{ position:absolute; left:-9999px; opacity:0; }
.ns-form__note{ font-size:.9rem; }
.ns-form__note--ok{ color:#7ec98a; }
.ns-form__note--err{ color:#e0757a; }
@media (max-width:760px){ .ns-contact__grid{ grid-template-columns:1fr; } }

/* ============================================================
   SOCIAL LINKS UNDER PORTRAIT
   ============================================================ */
.ns-social--under{ margin-top:1.2rem; justify-content:center; }
@media (max-width:760px){ .ns-social--under{ justify-content:flex-start; } }

/* ============================================================
   BOOK "WHERE TO BUY" ICONS
   ============================================================ */
.ns-book__buy{ list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.ns-book__buy a{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border:1px solid var(--ns-line); border-radius:50%; color:var(--ns-bone-dim);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.ns-book__buy a:hover{ color:var(--ns-bone); border-color:var(--ns-accent-2); transform:translateY(-2px); }
.ns-book__buy svg{ width:16px; height:16px; }

/* ============================================================
   LATEST BLOG POSTS
   ============================================================ */
.ns-blog__more{ margin-top:2.2rem; }

/* ============================================================
   FAQ
   ============================================================ */
.ns-faq__wrap{ width:min(820px,92%); }
.ns-faq__list{ margin-top:3rem; border-top:1px solid var(--ns-line); }
.ns-faq__item{ border-bottom:1px solid var(--ns-line); }
.ns-faq__q{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.4rem 0; font-family:var(--ns-display); font-size:1.12rem; color:var(--ns-bone);
}
.ns-faq__q::-webkit-details-marker{ display:none; }
.ns-faq__q:hover{ color:var(--ns-accent-2); }
.ns-faq__mark{ position:relative; flex:0 0 16px; width:16px; height:16px; }
.ns-faq__mark::before, .ns-faq__mark::after{
  content:""; position:absolute; background:var(--ns-accent-2); transition:transform .25s ease, opacity .25s ease;
}
.ns-faq__mark::before{ top:7px; left:0; width:16px; height:2px; }
.ns-faq__mark::after{ top:0; left:7px; width:2px; height:16px; }
.ns-faq__item[open] .ns-faq__mark::after{ transform:scaleY(0); opacity:0; }
.ns-faq__a{ padding:0 0 1.5rem; color:var(--ns-bone-dim); max-width:70ch; }
.ns-faq__a p{ margin:0 0 1rem; }
.ns-faq__a :last-child{ margin-bottom:0; }

/* ============================================================
   FOOTER
   ============================================================ */
.ns-footer{ background:var(--ns-ink-2); border-top:1px solid var(--ns-line); padding:3.5rem 0 2rem; }
.ns-footer__top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.ns-footer__brand{ font-family:var(--ns-display); letter-spacing:.16em; text-transform:uppercase; color:var(--ns-bone); }
.ns-footer__legal{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--ns-line-soft); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; color:var(--ns-bone-faint); font-size:.85rem; font-family:var(--ns-ui); }
.itsign-credit{ font-family:var(--ns-ui); font-size:.82rem; letter-spacing:.04em; }
.itsign-credit a{ color:var(--ns-bone-dim); }
.itsign-credit a:hover{ color:var(--ns-accent-2); }

/* ============================================================
   GENERIC CONTENT (posts / pages)
   ============================================================ */
.ns-page{ padding-top:8rem; }
.ns-article{ width:min(760px,92%); margin-inline:auto; }
.ns-article h1{ font-size:clamp(2rem,1.4rem+2.4vw,3rem); }
.ns-article a{ text-decoration:underline; text-underline-offset:3px; }
.ns-article blockquote{ border-left:2px solid var(--ns-accent); margin-inline:0; padding-left:1.2rem; color:var(--ns-bone-dim); font-style:italic; }
.ns-meta{ color:var(--ns-bone-faint); font-family:var(--ns-ui); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.5rem; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.ns-skip{ position:absolute; left:-9999px; }
.ns-skip:focus{ left:1rem; top:1rem; z-index:2000; background:var(--ns-accent); color:#fff; padding:.6rem 1rem; border-radius:4px; }