:root {
  --ink: #16162d;
  --night: #282450;
  --violet: #6557a8;
  --blue: #7fa8d8;
  --mist: #e9e6ff;
  --glow: #eef7b4;
  --gold: #f5dc72;
  --sage: #b8d794;
  --paper: #fbfaff;
  --white: #ffffff;
  --border: rgba(81, 69, 139, 0.19);
  --shadow: 0 24px 70px rgba(56, 44, 104, 0.14);
  --max-width: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 5%, rgba(127, 168, 216, 0.19), transparent 27rem),
    radial-gradient(circle at 94% 14%, rgba(238, 247, 180, 0.24), transparent 26rem),
    linear-gradient(180deg, #fbfaff 0%, #f7f6ff 50%, #fcfbf1 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(70, 60, 124, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 60, 124, 0.025) 1px, transparent 1px);
  background-size: 38px 38px;
}

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

a {
  color: inherit;
}

svg {
  display: block;
}

.site-glow {
  position: fixed;
  z-index: -2;
  width: 28rem;
  height: 28rem;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.34;
}

.site-glow-one {
  top: 10%;
  left: -12rem;
  background: var(--blue);
}

.site-glow-two {
  right: -10rem;
  bottom: 10%;
  background: var(--glow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem max(5vw, 1.25rem);
  background: rgba(251, 250, 255, 0.82);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.brand-crown {
  width: 2rem;
  color: var(--violet);
}

.brand-crown svg,
.card-icon svg,
.signature-mark svg,
.footer-crown svg {
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.primary-nav a {
  position: relative;
  color: var(--night);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--violet), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  padding: 0.65rem 0.85rem;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.hero,
.section {
  width: min(var(--max-width), calc(100% - 3rem));
  margin-inline: auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: center;
  min-height: 82vh;
  padding: 7rem 0 6rem;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: var(--violet);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mini-crown {
  color: #9c8b27;
  font-size: 1.1rem;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

h1 {
  max-width: 760px;
  margin-bottom: 1.35rem;
  font-size: clamp(4.4rem, 11vw, 8.8rem);
  font-weight: 500;
  letter-spacing: -0.065em;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

h3 {
  font-size: 1.75rem;
}

.hero-line {
  max-width: 720px;
  margin: 0;
  color: #4c4867;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--night), var(--violet));
  box-shadow: 0 14px 35px rgba(67, 55, 126, 0.22);
}

.button-secondary {
  color: var(--night);
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border);
}

.hero-art {
  position: relative;
  min-height: 430px;
}

.moon-orb {
  position: absolute;
  inset: 4rem 1.5rem auto auto;
  width: min(29vw, 360px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), transparent 22%),
    radial-gradient(circle at 50% 55%, rgba(238,247,180,0.86), rgba(127,168,216,0.55) 58%, rgba(101,87,168,0.44));
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 50%;
  box-shadow:
    0 0 80px rgba(238,247,180,0.76),
    0 0 150px rgba(127,168,216,0.42);
}

.hero-crown {
  position: absolute;
  top: 9rem;
  right: 0;
  width: min(31vw, 380px);
  fill: rgba(255,255,255,0.09);
  stroke: rgba(45, 39, 87, 0.75);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 12px 24px rgba(56,44,104,0.18));
  transform: rotate(2deg);
}

.star {
  position: absolute;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(245,220,114,0.85);
}

.star-one {
  top: 2.8rem;
  left: 2rem;
  font-size: 2.2rem;
}

.star-two {
  right: 0.5rem;
  bottom: 4rem;
  color: var(--sage);
  font-size: 3rem;
}

.star-three {
  bottom: 1rem;
  left: 4rem;
  font-size: 1.6rem;
}

.section {
  padding: 7rem 0;
  border-top: 1px solid var(--border);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 3rem;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1.18fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}

.portrait-card {
  position: relative;
  padding: 0.8rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(233,230,255,0.78));
  border: 1px solid var(--border);
  border-radius: 2rem 2rem 2rem 0.6rem;
  box-shadow: var(--shadow);
}

.portrait-card::before {
  position: absolute;
  inset: -1rem auto auto -1rem;
  z-index: -1;
  width: 5rem;
  height: 5rem;
  content: "";
  background: var(--glow);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
}

.portrait-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.35rem 1.35rem 1.35rem 0.25rem;
}

.photo-note,
.small-note {
  margin: 0.8rem 0 0.2rem;
  color: #69637d;
  font-size: 0.78rem;
}

.about-copy {
  max-width: 690px;
}

.lead {
  color: var(--night);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
  line-height: 1.45;
}

.signature-mark {
  display: inline-grid;
  grid-template-columns: 1fr 3.2rem 1fr;
  gap: 0.8rem;
  align-items: center;
  margin-top: 1.4rem;
  color: var(--violet);
}

.signature-mark span {
  color: var(--gold);
}

.writing-section {
  position: relative;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
.work-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 1.7rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  box-shadow: 0 16px 44px rgba(56, 44, 104, 0.08);
}

.work-card::after {
  position: absolute;
  right: -4rem;
  bottom: -4rem;
  width: 10rem;
  height: 10rem;
  content: "";
  background: radial-gradient(circle, rgba(184,215,148,0.5), transparent 68%);
}
.work-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-card-link .work-card {
  height: 100%;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.work-card-link:hover .work-card,
.work-card-link:focus-visible .work-card {
  border-color: rgba(101, 87, 168, 0.45);
  box-shadow: 0 22px 55px rgba(56, 44, 104, 0.16);
  transform: translateY(-5px);
}

.work-card-link:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
  border-radius: 1.4rem;
}

.featured-card {
  background:
    radial-gradient(circle at 90% 12%, rgba(238,247,180,0.72), transparent 9rem),
    linear-gradient(145deg, rgba(40,36,80,0.98), rgba(101,87,168,0.95));
  color: var(--white);
}

.featured-card .work-type,
.featured-card .status {
  color: var(--glow);
}

.card-icon {
  width: 2.3rem;
  margin-bottom: 2.5rem;
  color: var(--violet);
}

.featured-card .card-icon {
  color: var(--gold);
}

.work-type {
  margin: 0 0 0.5rem;
  color: var(--violet);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  margin-top: auto;
  padding-top: 1.5rem;
  color: #5d5772;
  font-size: 0.78rem;
  font-weight: 800;
}

.news-list {
  display: grid;
  gap: 1rem;
}

.news-item {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
}

.news-item:last-child {
  border-bottom: 1px solid var(--border);
}

.news-item time {
  color: var(--violet);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.news-item h3 {
  margin-bottom: 0.5rem;
}

.news-item p {
  margin: 0;
  color: #5d5872;
}

.contact-section {
  border-top: 0;
}

.contact-panel {
  padding: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 95% 5%, rgba(238,247,180,0.24), transparent 14rem),
    linear-gradient(140deg, #26224d, #4f4686);
  color: var(--white);
  border-radius: 2rem;
  box-shadow: var(--shadow);
}

.contact-panel .eyebrow {
  color: var(--glow);
}

.contact-panel h2 {
  margin-bottom: 0.7rem;
}

.contact-panel > div p:last-child {
  max-width: 650px;
  color: rgba(255,255,255,0.78);
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding: 1.2rem 0;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.19);
  border-bottom: 1px solid rgba(255,255,255,0.19);
}

.contact-panel .small-note {
  color: rgba(255,255,255,0.55);
}

.site-footer {
  display: grid;
  justify-items: center;
  padding: 3rem 1.5rem 4rem;
  color: #666078;
  text-align: center;
}

.footer-crown {
  width: 2.5rem;
  margin-bottom: 0.8rem;
  color: var(--violet);
}

.site-footer p {
  margin: 0.2rem 0;
  font-size: 0.83rem;
}

.site-footer a {
  color: var(--violet);
}

.header-socials {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--border);
}

.header-socials a {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  color: var(--violet);
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border);
  border-radius: 50%;
  text-decoration: none;
  transition:
    transform 180ms ease,
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.header-socials a::after {
  display: none;
}

.header-socials a:hover,
.header-socials a:focus-visible {
  color: var(--night);
  background: var(--glow);
  border-color: rgba(101, 87, 168, 0.35);
  transform: translateY(-2px);
}

.header-socials svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-links {
  margin-top: 2.5rem;
}

.social-heading {
  margin: 0 0 1rem;
  color: var(--violet);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 88px;
  padding: 1rem 1.2rem;
  color: var(--night);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 10px 28px rgba(56, 44, 104, 0.08);
  text-decoration: none;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.social-link:hover,
.social-link:focus-visible {
  background: var(--white);
  border-color: rgba(101, 87, 168, 0.42);
  box-shadow: 0 14px 34px rgba(56, 44, 104, 0.14);
  transform: translateY(-2px);
}

.social-link strong,
.social-link small {
  display: block;
}

.social-link strong {
  color: var(--night);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.social-link small {
  margin-top: 0.15rem;
  color: #716b85;
  font-size: 0.74rem;
}

.social-brand-icon {
  display: grid;
  flex: 0 0 2.8rem;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  color: var(--violet);
  background: rgba(101, 87, 168, 0.09);
  border-radius: 50%;
}

.social-brand-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 2.5rem;
  color: var(--violet);
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.featured-card .card-icon {
  color: var(--gold);
}
/* ========================================
   INTERIOR BOOK / PROJECT PAGES
======================================== */

.interior-page {
  min-height: 100vh;
}

.project-page {
  width: min(var(--max-width), calc(100% - 3rem));
  margin: 0 auto;
  padding: 3rem 0 8rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: 3rem;
  color: var(--violet);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--night);
}

.project-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
  min-height: 540px;
  margin-bottom: 6rem;
  padding: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(238, 247, 180, 0.58),
      transparent 15rem
    ),
    linear-gradient(
      135deg,
      rgba(233, 230, 255, 0.86),
      rgba(255, 255, 255, 0.88)
    );
  border: 1px solid var(--border);
  border-radius: 2rem;
  box-shadow: var(--shadow);
}

.project-hero::before {
  position: absolute;
  top: -7rem;
  right: -6rem;
  width: 24rem;
  height: 24rem;
  content: "";
  background: var(--blue);
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.24;
}

.project-hero > * {
  position: relative;
  z-index: 1;
}

.project-hero h1 {
  max-width: 750px;
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.95;
}

.project-hook {
  max-width: 700px;
  margin: 0;
  color: #504a69;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
  line-height: 1.55;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 2rem;
}

.project-meta span {
  padding: 0.5rem 0.8rem;
  color: var(--night);
  font-size: 0.76rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.project-symbol {
  display: grid;
  width: min(100%, 300px);
  aspect-ratio: 1;
  place-items: center;
  justify-self: center;
  color: var(--gold);
  font-size: clamp(8rem, 18vw, 15rem);
  line-height: 1;
  background:
    radial-gradient(
      circle,
      rgba(238, 247, 180, 0.78),
      rgba(127, 168, 216, 0.28) 48%,
      transparent 70%
    );
  border-radius: 50%;
  text-shadow:
    0 0 35px rgba(245, 220, 114, 0.9),
    0 0 90px rgba(127, 168, 216, 0.7);
}

.project-content {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
  gap: clamp(3rem, 8vw, 7rem);
  align-items: start;
}

.project-main {
  display: grid;
  gap: 5rem;
}

.project-main section {
  max-width: 760px;
}

.project-main h2 {
  max-width: 760px;
  margin-bottom: 1.5rem;
  font-size: clamp(2.7rem, 5vw, 4.7rem);
}

.project-main p {
  color: #504b62;
  font-size: 1.05rem;
  line-height: 1.85;
}

.project-sidebar {
  position: sticky;
  top: 7rem;
}

.project-facts {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  box-shadow: 0 16px 44px rgba(56, 44, 104, 0.08);
}

.project-facts dl {
  margin: 0;
}

.project-facts div {
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}

.project-facts dt {
  margin-bottom: 0.2rem;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-facts dd {
  margin: 0;
  color: var(--night);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.theme-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-list li {
  padding: 0.65rem 0.9rem;
  color: var(--night);
  font-size: 0.82rem;
  font-weight: 800;
  background: rgba(184, 215, 148, 0.22);
  border: 1px solid rgba(101, 87, 168, 0.18);
  border-radius: 999px;
}

@media (max-width: 860px) {
  .project-hero,
  .project-content {
    grid-template-columns: 1fr;
  }

  .project-symbol {
    width: min(70vw, 280px);
  }

  .project-sidebar {
    position: static;
  }
}

@media (max-width: 680px) {
  .project-page {
    width: min(100% - 2rem, var(--max-width));
    padding-top: 2rem;
  }

  .project-hero {
    min-height: auto;
    margin-bottom: 4rem;
    padding: 2rem 1.4rem;
    border-radius: 1.4rem;
  }

  .project-hero h1 {
    font-size: clamp(3.7rem, 18vw, 5.5rem);
  }

  .project-main {
    gap: 4rem;
  }
.novel-list {
  display: grid;
  gap: 2rem;
}

.novel-listing {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  box-shadow: 0 18px 48px rgba(56, 44, 104, 0.09);
}

.novel-cover-link {
  display: block;
  text-decoration: none;
}

.novel-cover-link img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(81, 69, 139, 0.2);
  border-radius: 0.45rem;
  box-shadow: 0 18px 40px rgba(56, 44, 104, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.novel-cover-link:hover img,
.novel-cover-link:focus-visible img {
  box-shadow: 0 24px 55px rgba(56, 44, 104, 0.28);
  transform: translateY(-4px);
}

.novel-listing-copy {
  max-width: 700px;
}

.novel-listing-copy h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.novel-listing-copy h2 a {
  text-decoration: none;
}

.novel-listing-copy h2 a:hover,
.novel-listing-copy h2 a:focus-visible {
  color: var(--violet);
}

.novel-hook {
  color: var(--night);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  line-height: 1.5;
}

.novel-listing-copy .button {
  margin-top: 1.6rem;
}

.novel-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(6rem, 14vw, 10rem);
  background:
    radial-gradient(
      circle at 60% 25%,
      rgba(238, 247, 180, 0.34),
      transparent 10rem
    ),
    linear-gradient(145deg, var(--night), var(--violet));
  border-radius: 0.45rem;
  box-shadow: 0 18px 40px rgba(56, 44, 104, 0.2);
}

@media (max-width: 760px) {
  .novel-listing {
    grid-template-columns: 1fr;
  }

  .novel-cover-link,
  .novel-placeholder {
    width: min(100%, 320px);
    justify-self: center;
  }
}
}


@media (prefers-reduced-motion: no-preference) {
  .moon-orb {
    animation: float 7s ease-in-out infinite;
  }

  .star-one,
  .star-two,
  .star-three {
    animation: twinkle 4s ease-in-out infinite;
  }

  .star-two {
    animation-delay: 1s;
  }

  .star-three {
    animation-delay: 2s;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.08); }
  }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-art {
    min-height: 340px;
  }

  .moon-orb {
    right: 10%;
    width: min(65vw, 340px);
  }

  .hero-crown {
    right: 7%;
    width: min(70vw, 360px);
  }

  .about-grid,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .portrait-card {
    max-width: 520px;
  }

  .work-card {
    min-height: 300px;
  }
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .site-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .primary-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.7rem 0 0.3rem;
  }

  .primary-nav.is-open {
    display: flex;
  }

  .hero,
  .section {
    width: min(100% - 2rem, var(--max-width));
  }

  .hero {
    padding-top: 4.7rem;
  }

  .hero-art {
    min-height: 290px;
  }

  .section {
    padding: 5rem 0;
  }

  .news-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
 .header-socials {
    flex-direction: row;
    align-items: center;
    padding-top: 0.8rem;
    padding-left: 0;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

 .social-grid {
    grid-template-columns: 1fr;
  }

.work-grid {
    grid-template-columns: 1fr;
  }
}

/* COLLECTION AND STORY PAGES */

.collection-page {
  width: min(var(--max-width), calc(100% - 3rem));
  margin: 0 auto;
  padding: 3rem 0 8rem;
}

.collection-hero {
  max-width: 850px;
  margin-bottom: 4rem;
  padding: 3rem 0 2rem;
}

.collection-hero h1 {
  margin-bottom: 1.2rem;
  font-size: clamp(4rem, 10vw, 8rem);
}

.collection-intro {
  max-width: 760px;
  color: #504a69;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.7vw, 1.85rem);
}

.story-list,
.flash-list {
  display: grid;
  gap: 1rem;
}

.story-listing,
.flash-listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--border);
  border-radius: 1.3rem;
  box-shadow: 0 14px 38px rgba(56, 44, 104, 0.07);
}

.story-listing h2,
.flash-listing h2 {
  margin-bottom: 0.55rem;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.story-listing h2 a,
.flash-listing h2 a {
  text-decoration: none;
}

.story-listing p,
.flash-listing p {
  max-width: 720px;
  margin-bottom: 0;
  color: #57516a;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.story-meta span {
  padding: 0.35rem 0.65rem;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(101, 87, 168, 0.08);
  border-radius: 999px;
}

.reading-page {
  width: min(100% - 2rem, 760px);
  margin: 0 auto;
  padding: 4rem 0 8rem;
}

.story-header {
  margin-bottom: 4rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.story-header h1 {
  margin-bottom: 1rem;
  font-size: clamp(3.5rem, 10vw, 6.5rem);
}

.story-deck {
  color: #5d5872;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height: 1.55;
}

.story-byline {
  margin-top: 1.4rem;
  color: var(--violet);
  font-size: 0.82rem;
  font-weight: 800;
}

.story-body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  line-height: 1.95;
}

.story-body p {
  margin: 0 0 1.6rem;
}

.story-divider {
  margin: 3rem 0;
  color: var(--violet);
  text-align: center;
  letter-spacing: 0.7rem;
}

.story-footer {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.story-next {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 2rem;
}

.story-next a {
  color: var(--violet);
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 680px) {
  .collection-page {
    width: min(100% - 2rem, var(--max-width));
  }

  .story-listing,
  .flash-listing {
    grid-template-columns: 1fr;
    align-items: start;
  }

}
/* ========================================
   NOVELS COLLECTION PAGE
======================================== */

.novel-collection {
  width: min(var(--max-width), calc(100% - 3rem));
  margin-inline: auto;
  padding: 3rem 0 8rem;
}

.novel-list {
  display: grid;
  gap: 2.5rem;
}

.novel-listing {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(238, 247, 180, 0.24),
      transparent 14rem
    ),
    rgba(255, 255, 255, 0.76);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  box-shadow: 0 18px 48px rgba(56, 44, 104, 0.09);
}

.novel-cover-link {
  display: block;
  width: 100%;
  text-decoration: none;
}

.novel-cover-link img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(81, 69, 139, 0.22);
  border-radius: 0.45rem;
  box-shadow:
    0 20px 44px rgba(56, 44, 104, 0.22),
    0 0 36px rgba(127, 168, 216, 0.12);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.novel-cover-link:hover img,
.novel-cover-link:focus-visible img {
  box-shadow:
    0 26px 58px rgba(56, 44, 104, 0.3),
    0 0 45px rgba(127, 168, 216, 0.17);
  transform: translateY(-4px);
}

.novel-listing-copy {
  max-width: 720px;
}

.novel-listing-copy h2 {
  margin-bottom: 1rem;
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  line-height: 1.02;
}

.novel-listing-copy h2 a {
  text-decoration: none;
}

.novel-listing-copy h2 a:hover,
.novel-listing-copy h2 a:focus-visible {
  color: var(--violet);
}

.novel-hook {
  margin-bottom: 1rem;
  color: var(--night);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.5;
}

.novel-listing-copy > p:not(.work-type):not(.novel-hook) {
  color: #57516a;
  line-height: 1.8;
}

.novel-listing-copy .story-meta {
  margin-top: 1.3rem;
}

.novel-listing-copy .button {
  margin-top: 1.7rem;
}

.novel-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 2 / 3;
  place-items: center;
  overflow: hidden;
  color: var(--gold);
  font-size: clamp(6rem, 12vw, 10rem);
  background:
    radial-gradient(
      circle at 62% 22%,
      rgba(238, 247, 180, 0.34),
      transparent 10rem
    ),
    linear-gradient(145deg, var(--night), var(--violet));
  border: 1px solid rgba(81, 69, 139, 0.22);
  border-radius: 0.45rem;
  box-shadow:
    0 20px 44px rgba(56, 44, 104, 0.22),
    0 0 36px rgba(127, 168, 216, 0.12);
}

/* Tablet */

@media (max-width: 860px) {
  .novel-listing {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 2rem;
  }

  .novel-listing-copy h2 {
    font-size: clamp(2.4rem, 6vw, 3.7rem);
  }
}

/* Mobile */

@media (max-width: 680px) {
  .novel-collection {
    width: min(100% - 2rem, var(--max-width));
  }

  .novel-listing {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .novel-cover-link,
  .novel-placeholder {
    width: min(100%, 300px);
    justify-self: center;
  }
}

/* Newsletter signup: keeps the original background, colors, and site layout. */
.newsletter-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
.newsletter-panel {
  display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
  padding: clamp(1.6rem, 4.5vw, 3.5rem);
  border: 1px solid var(--border); border-radius: 1.6rem;
  background: linear-gradient(135deg, rgba(255,255,255,.89), rgba(233,230,255,.45));
  box-shadow: 0 16px 44px rgba(56,44,104,.07);
}
.newsletter-copy h2 { font-size: clamp(2.3rem, 4.5vw, 3.8rem); margin-bottom: 1rem; }
.newsletter-copy > p:last-child { max-width: 31rem; margin-bottom: 0; color: #55506c; }
.newsletter-form { min-width: 0; }
.newsletter-label { display: block; margin-bottom: .45rem; font-size: .89rem; font-weight: 750; color: var(--night); }
.newsletter-fields { display: flex; align-items: stretch; gap: .6rem; }
.newsletter-fields input[type="email"] {
  display: block; flex: 1 1 auto; min-width: 0; min-height: 50px;
  padding: .78rem 1rem; color: var(--ink); background: #fff;
  border: 1px solid rgba(81,69,139,.35); border-radius: .75rem;
  font: inherit; font-size: 1rem;
}
.newsletter-fields input[type="email"]:focus-visible,
.newsletter-consent input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.newsletter-submit { white-space: nowrap; cursor: pointer; border: none; border-radius: .75rem; font: inherit; font-size: .93rem; font-weight: 800; }
.newsletter-consent { display: flex; align-items: flex-start; gap: .65rem; margin-top: 1rem; color: var(--night); font-size: .84rem; line-height: 1.5; cursor: pointer; }
.newsletter-consent input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex-shrink: 0; accent-color: var(--violet); }
.newsletter-note { margin-bottom: 0; color: #69637d; font-size: .77rem; line-height: 1.6; }
.newsletter-note a { text-underline-offset: 2px; }
.newsletter-thanks { display: grid; align-items: center; min-height: min(73vh, 650px); }
.newsletter-thanks-inner { max-width: 770px; margin: 0 auto; padding: 3rem 0; text-align: center; }
.newsletter-thanks-inner h1 { font-size: clamp(3.1rem, 8vw, 6rem); }
.newsletter-thanks-inner .eyebrow { justify-content: center; }
.newsletter-thanks-inner p:not(.eyebrow) { max-width: 580px; margin-inline: auto; color: #55506c; font-size: 1.1rem; }
.newsletter-thanks-inner .button { margin-top: 1rem; }
@media (max-width: 860px) { .newsletter-panel { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .newsletter-fields { flex-direction: column; } .newsletter-submit { width: 100%; } .newsletter-section { padding-block: 4rem; } }


/* ================================================================
   OCTOBER 2026 REFINEMENT — ORIGINAL BODY BACKGROUND UNMODIFIED.
   A single blended literary collage replaces the oversized star.
   ================================================================ */
.hero {grid-template-columns: minmax(0,1.08fr) minmax(0,0.92fr); gap: clamp(1rem,3vw,3rem); padding: 5.8rem 0 5rem; min-height: 720px;}
.hero-copy{z-index:2;}
.hero-art{min-height: 540px; isolation:isolate; display:flex; align-items:center; justify-content:center;}
.hero-collage{width: min(52vw, 650px); max-width: none; height:auto; aspect-ratio:1; object-fit:contain; position:absolute; left:48%; top:50%; transform:translate(-50%,-50%); filter:drop-shadow(0 18px 40px rgba(56,44,104,0.04)); pointer-events:none;}
.hero-note{margin-top:2rem; font-size:.8rem; color:#746d8a; font-weight:700; letter-spacing:.04em;}
.section-intro{font-family: Georgia,'Times New Roman',serif; color:#58516c; font-size:1.23rem;}
.news-kicker{color:var(--violet);text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;font-weight:800;}
.news-social-prompt{margin-top:1rem!important;} .news-social-prompt a{color:var(--violet);font-weight:750;text-decoration:none;border-bottom:1px solid var(--border);}
.social-section{border-top:1px solid var(--border);padding-top:5.5rem;padding-bottom:5.5rem;}
.social-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);gap:2.5rem;align-items:center;padding:clamp(2rem,5vw,3.7rem);background:radial-gradient(circle at 95% 5%,rgba(238,247,180,.45),transparent 20rem),rgba(255,255,255,.67);border:1px solid var(--border);border-radius:2rem;box-shadow:0 14px 46px rgba(56,44,104,.07);}
.social-feature-copy h2{font-size:clamp(2.5rem,5vw,4.5rem);}
.social-feature-copy>p:not(.eyebrow){max-width:540px;color:#57516a;}
.social-small{font-size:.93rem;}
.social-feature-links{display:grid;gap:.85rem;}
.social-feature-link{display:grid;grid-template-columns:2.5rem 1fr auto;gap:1rem;align-items:center;text-decoration:none;background:rgba(255,255,255,.77);border:1px solid var(--border);border-radius:1rem;padding:1rem 1.15rem;transition:transform .2s,border-color .2s;}
.social-feature-link:hover,.social-feature-link:focus-visible{transform:translateY(-3px);border-color:rgba(101,87,168,.5);}
.social-feature-link strong,.social-feature-link small{display:block;line-height:1.25;}
.social-feature-link small{margin-top:.2rem;color:#756e88;font-size:.83rem;}
.social-feature-mark{display:grid;place-items:center;font-family:Georgia,serif;font-size:1.65rem;color:var(--violet);background:var(--mist);width:2.5rem;height:2.5rem;border-radius:50%;}
.guilty-cover{aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2rem 1.2rem;background:linear-gradient(160deg,#e8e3f0 0%,#c8c1d7 50%,#857697 100%);border:1px solid var(--border);border-radius:.45rem;color:var(--ink);box-shadow:0 18px 40px rgba(56,44,104,.14);text-align:center;}
.guilty-cover strong{font-family:Georgia,serif;font-weight:normal;font-size:clamp(2rem,5vw,4.25rem);line-height:.92;letter-spacing:-.05em;}
.guilty-kicker,.guilty-cover-note{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:#312849;}
.guilty-cover-note{font-size:.65rem;}
.excerpt-end{border-top:1px solid var(--border);margin-top:3rem;padding:1.7rem 0;color:#6a637b;text-align:center;font-style:italic;}
.excerpt-end span{color:var(--violet);font-size:1.4rem;}
.thanks-page .button{margin-top:1.4rem;}
.privacy-page h1,.thanks-page h1{font-size:clamp(3.4rem,8vw,6rem);}
:focus-visible{outline:3px solid #6557a8;outline-offset:3px;}
@media(max-width:860px){.hero{grid-template-columns:1fr;min-height:auto;padding:4.8rem 0 3rem;gap:.3rem;}.hero-art{min-height:440px;}.hero-collage{width:min(86vw,550px);left:50%;top:50%;}.social-feature{grid-template-columns:1fr;}.hero h1{font-size:clamp(4rem,12vw,7.5rem);}}
@media(max-width:680px){.hero{padding-top:3.5rem;}.hero-art{min-height:340px;}.hero-collage{width:min(108vw,450px);}.social-section{padding:3rem 0;}.social-feature{padding:1.4rem;gap:1.5rem;}.social-feature-copy h2{font-size:2.7rem;}.site-header{align-items:center;}.primary-nav{width:100%;}.newsletter-fields{grid-template-columns:1fr;}}