/*
Theme Name: Athena Minerva Devine
Theme URI: https://amdevine.com
Author: AM Devine
Description: Celestial Dragon — author site for Athena Minerva Devine
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: amdevine
*/

/* ======================================================================
   FONTS
   ====================================================================== */
@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/Cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.normalfont {
  font-family: "Cinzel";
}

/* ======================================================================
   DESIGN TOKENS — Celestial Dragon palette
   ====================================================================== */
:root {
  --cd-white: #ffffff;
  --cd-black: #000000;
  --cd-void: #040b17;
  --cd-night: #050d3c;
  --cd-midnight: #080866;
  --cd-indigo: #0b0b85;
  --cd-sapphire: #0070ff;
  --cd-stellar: #777a84;
  --cd-aurora-violet: #6a4fb0;
  --cd-aurora-cyan: #2a4d7a;

  --bg-base: var(--cd-void);
  --bg-raised: var(--cd-night);
  --bg-elevated: var(--cd-midnight);
  --bg-inset: #02060f;
  --bg-overlay: rgba(4, 11, 23, 0.72);

  --fg-1: var(--cd-white);
  --fg-2: #c9cdd9;
  --fg-3: var(--cd-stellar);
  --fg-4: #4a4d5a;
  --fg-on-accent: var(--cd-white);

  --accent: var(--cd-sapphire);
  --accent-hover: #2589ff;
  --accent-press: #005ed6;
  --accent-soft: rgba(0, 112, 255, 0.16);
  --accent-ring: rgba(0, 112, 255, 0.45);

  --border-1: rgba(255, 255, 255, 0.08);
  --border-2: rgba(255, 255, 255, 0.14);
  --border-3: rgba(255, 255, 255, 0.24);
  --border-accent: var(--cd-sapphire);

  --status-success: #52c8a3;
  --status-warning: #e6b450;
  --status-danger: #ef6b6b;

  --font-display-decorative: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-display: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --font-body: "Montserrat", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.22em;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.35);
  --glow-sapphire-sm: 0 0 12px rgba(0, 112, 255, 0.45);
  --glow-sapphire: 0 0 24px rgba(0, 112, 255, 0.55), 0 0 4px rgba(0, 112, 255, 0.7);
  --glow-starlight: 0 0 14px rgba(255, 255, 255, 0.22);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ======================================================================
   RESET + BASE
   ====================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

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

::selection {
  background: var(--accent);
  color: #fff;
}

/* ======================================================================
   HEADER
   ====================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  background: rgba(4, 11, 23, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-1);
}

.site-header__mark {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-decoration: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__mark:hover {
  color: var(--accent-hover);
}

.site-header__mark-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
  /* SVG uses currentColor — change this to tint the icon */
}

.site-footer__mark {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-footer__mark-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  /* SVG uses currentColor — change this to tint the icon */
}

.site-header nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.site-header nav a {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 180ms, border-color 180ms;
  text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a.current-menu-item,
.site-header nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--accent);
}

/* ======================================================================
   BUTTONS
   ====================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 52px;
  border-radius: var(--r-xs);
  border: none;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow-sapphire-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 200ms, box-shadow 200ms;
}

.btn:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-sapphire);
  color: #fff;
}

.btn:active {
  background: var(--accent-press);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border-3);
  box-shadow: none;
  padding: 10px 28px;
  font-size: 11px;
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.btn--sm {
  font-size: 11px;
  padding: 10px 28px;
}

/* ======================================================================
   EYEBROW
   ====================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ======================================================================
   HERO (Homepage — C3 left-aligned)
   ====================================================================== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  background: #040b17;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/images/celestial-night-sky.jpg");
  background-size: cover;
  background-position: center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 11, 23, 0.65);
}

.hero__name {
  position: absolute;
  left: clamp(40px, 5vw, 100px);
  top: 0;
  bottom: 200px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero__name h1 {
  font-family: var(--font-display-decorative);
  font-weight: 400;
  font-size: clamp(80px, 9.5vw, 148px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 0 120px rgba(0, 80, 200, 0.22);
  margin: 0;
}

.hero__name h1 .faded {
  color: rgba(255, 255, 255, 0.42);
}

.hero__tagline {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}

.hero__scroll-cue {
  position: absolute;
  bottom: 220px;
  right: 60px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.hero__scroll-cue span {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
}

.hero__scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
}

/* ======================================================================
   BOOKS STRIP (hero bottom)
   ====================================================================== */
.hero__books-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 200px;
  background: rgba(4, 11, 23, 0.92);
  border-top: 1px solid var(--border-1);
  padding: 0 clamp(40px, 5vw, 100px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.books-strip__list {
  display: flex;
  gap: 40px;
  align-items: center;
}

.book-entry {
  display: flex;
  gap: 18px;
  align-items: center;
  text-decoration: none;
}

.book-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 138px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  position: relative;
  overflow: hidden;
}

.book-cover--lg {
  width: 140px;
  height: 202px;
  padding: 12px 9px;
}

.book-cover--md {
  width: 130px;
  height: 188px;
  padding: 12px 9px;
}

.book-cover__genre {
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.book-cover__title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  position: relative;
  z-index: 2;
}

.book-cover__subtitle {
  font-family: var(--font-display);
  font-size: 8px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
  letter-spacing: 0.06em;
  text-align: center;
  position: relative;
  z-index: 2;
}

.book-cover__author {
  font-family: var(--font-body);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9cdd9;
  position: relative;
  z-index: 2;
}

.book-cover__top {
  position: relative;
  z-index: 2;
  text-align: center;
}

.book-entry__meta .eyebrow {
  margin-bottom: 4px;
}

.book-entry__title {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 8px 0 5px;
  line-height: 1.2;
}

.book-entry__pen {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ======================================================================
   HOME — ABOUT BLURB SECTION
   ====================================================================== */
.about-blurb {
  background: linear-gradient(180deg, #050d3c, #040b17);
  padding: 96px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.about-blurb__rule {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: var(--border-1);
}

.about-blurb__body {
  max-width: 700px;
}

.about-blurb__body h2 {
  font-family: var(--font-display-decorative);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.04em;
  color: #fff;
  margin: 16px 0 28px;
  line-height: 1.1;
}

.about-blurb__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg-2);
  margin: 0 0 18px;
  max-width: none;
}

/* ======================================================================
   HOME — NOTES PREVIEW
   ====================================================================== */
.notes-preview {
  background: #040b17;
  padding: 96px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
}

.notes-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
}

.notes-preview__header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 36px);
  letter-spacing: 0.06em;
  color: #fff;
  margin: 8px 0 0;
}

.notes-preview__all {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.notes-preview__all:hover {
  color: var(--accent-hover);
}

.notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
}

/* ======================================================================
   NOTE CARD
   ====================================================================== */
.note-card {
  padding: 28px 0;
  border-top: 1px solid var(--border-1);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.note-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.note-card__date,
.note-card__read {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}

.note-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  margin: 0 0 10px;
  transition: color 180ms;
}

.note-card:hover .note-card__title {
  color: var(--accent);
}

.note-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0;
}

/* ======================================================================
   NEWSLETTER BAR
   ====================================================================== */
.newsletter {
  background: #08082a;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: 40px clamp(40px, 8vw, 160px);
}

.newsletter form,
.newsletter__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.newsletter label,
.newsletter__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em;
  flex: 0 0 auto;
}

/* CF7 newsletter overrides */
.newsletter .wpcf7-form {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.newsletter .wpcf7-form p {
  margin: 0;
  max-width: none;
}

.newsletter .wpcf7-form .newsletter__label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em;
}

.newsletter input[type="email"],
.newsletter .wpcf7-email {
  background: var(--bg-inset);
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  flex: 1 1 220px;
  max-width: 300px;
  outline: none;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.newsletter input[type="email"]:focus,
.newsletter .wpcf7-email:focus {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.newsletter input[type="submit"],
.newsletter .wpcf7-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 10px 28px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: var(--glow-sapphire-sm);
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms;
}

.newsletter input[type="submit"]:hover,
.newsletter .wpcf7-submit:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-sapphire);
}

.newsletter-prefix {
  font-family: Cinzel;
  margin-right: 10px;
}

/* ======================================================================
   FOOTER
   ====================================================================== */
.site-footer {
  background: #02030f;
  padding: 28px clamp(40px, 8vw, 160px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  border-top: 1px solid var(--border-1);
}

.site-footer__mark {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--accent);
  text-decoration: none;
}

.site-footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer nav a {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms;
}

.site-footer nav a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__copy {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.06em;
}

.site-footer__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.site-footer__social {
  display: flex;
  gap: 20px;
  align-items: center;
}

.site-footer__social-link {
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__social-link:hover {
  color: var(--accent);
}

.site-footer__social-link svg {
  width: 18px;
  height: 18px;
}

/* ======================================================================
   PAGE HERO (interior pages)
   ====================================================================== */
.page-hero {
  position: relative;
  min-height: 320px;
  padding: 120px clamp(40px, 5vw, 100px) 72px;
  background-image: url("assets/images/celestial-night-sky.jpg");
  background-size: cover;
  background-position: center;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 11, 23, 0.76);
}

.page-hero__content {
  position: relative;
  z-index: 2;
}

.page-hero .eyebrow {
  margin-bottom: 16px;
}

.page-hero h1 {
  font-family: var(--font-display-decorative);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.05;
  white-space: pre-line;
}

.page-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--fg-2);
  letter-spacing: 0.03em;
}

/* ======================================================================
   BOOKS PAGE
   ====================================================================== */
.books-section {
  background: linear-gradient(180deg, #080830, #040b17);
  padding: 80px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
}

.books-section>.eyebrow {
  margin-bottom: 40px;
}

/* ── Horizontal tag filter bar ──────────────────────────────────────── */
.books-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-1);
}

.books-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.book-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
}

.book-card__cover-wrap {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 2px;
  transition: border-color 200ms, box-shadow 200ms;
}

.book-card:hover .book-card__cover-wrap {
  border-color: var(--accent);
  box-shadow: var(--glow-sapphire-sm);
}

.book-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 4px;
  transition: color 180ms;
}

.book-card:hover .book-card__title {
  color: var(--accent);
}

.book-card__subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.book-detail {
  margin-top: 64px;
  padding: 40px 48px;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.book-detail h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0 0 20px;
}

.book-detail p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--fg-2);
  margin: 0 0 28px;
  max-width: 560px;
}

.book-detail__tags {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  border-radius: var(--r-pill);
  color: var(--accent);
}

/* ======================================================================
   ABOUT PAGE
   ====================================================================== */
.about-section {
  background: linear-gradient(180deg, #050d3c, #040b17);
  padding: 96px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
}

.about-section>.eyebrow {
  margin-bottom: 24px;
}

.about-section__body {
  max-width: 720px;
}

.about-section__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-2);
  margin: 0 0 22px;
  max-width: none;
}

/* the_content() output inside about-section__body */
.about-section__body p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--fg-2);
  margin: 0 0 22px;
  max-width: none;
}

.about-section__body blockquote,
.about-section__body .wp-block-quote {
  margin: 16px 0 22px;
  padding: 24px 28px;
  border-left: 2px solid var(--accent) !important;
  background: rgba(0, 112, 255, 0.06);
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.about-section__body blockquote p,
.about-section__body .wp-block-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0.03em;
}

.pull-quote {
  margin-top: 16px;
  padding: 24px 28px;
  border-left: 2px solid var(--accent);
  background: rgba(0, 112, 255, 0.06);
}

.pull-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0.03em;
}

/* ======================================================================
   FIELD NOTES PAGE
   ====================================================================== */
.notes-section {
  background: linear-gradient(180deg, #050d3c, #040b17);
  padding: 80px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
}

.notes-list {
  max-width: 680px;
}

.note-card--full {
  padding: 32px 0;
  border-bottom: 1px solid var(--border-1);
  display: block;
  text-decoration: none;
}

.note-card--full .note-card__meta {
  margin-bottom: 12px;
}

.note-card--full .note-card__read::before {
  content: " read";
}

.note-card--full .note-card__title {
  font-size: 24px;
  margin: 0 0 12px;
}

.note-card--full .note-card__excerpt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
}

/* ======================================================================
   FIELD NOTES — two-column layout + topic sidebar
   ====================================================================== */
.notes-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 64px;
  align-items: start;
}

/* Sidebar */
.notes-sidebar {
  position: sticky;
  top: 88px;
  /* clear fixed header */
}

.notes-sidebar__header {
  margin-bottom: 20px;
}

.notes-sidebar__topics {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Topic pill — base same as .tag */
.tag--topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.tag--topic:hover {
  background: rgba(0, 112, 255, 0.28);
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Active / selected state */
.tag--active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tag--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.tag__count {
  font-size: 9px;
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Topics shown on each note card */
.note-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Clear filters link */
.notes-sidebar__clear {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  margin-top: 6px;
  transition: color var(--dur-fast);
}

.notes-sidebar__clear:hover {
  color: var(--fg-2);
}

/* Empty state */
.notes-empty {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--fg-3);
  padding: 48px 0;
  max-width: none;
}

/* ======================================================================
   CONTACT PAGE
   ====================================================================== */
.contact-section {
  background: linear-gradient(180deg, #050d3c, #040b17);
  padding: 96px clamp(40px, 8vw, 160px);
  border-top: 1px solid var(--border-1);
}

.contact-form-wrap {
  max-width: 560px;
}

/* CF7 contact form overrides */
.contact-form-wrap .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form-wrap .wpcf7-form p {
  margin: 0;
  max-width: none;
}

.contact-form-wrap label,
.contact-form-wrap .field-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
}

.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap textarea,
.contact-form-wrap .wpcf7-text,
.contact-form-wrap .wpcf7-email,
.contact-form-wrap .wpcf7-textarea {
  display: block;
  width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  resize: vertical;
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.contact-form-wrap .wpcf7-text:focus,
.contact-form-wrap .wpcf7-email:focus,
.contact-form-wrap .wpcf7-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.contact-form-wrap input[type="submit"],
.contact-form-wrap .wpcf7-submit {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 52px;
  border-radius: var(--r-xs);
  border: none;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--glow-sapphire-sm);
  cursor: pointer;
  transition: background 200ms, box-shadow 200ms;
}

.contact-form-wrap input[type="submit"]:hover,
.contact-form-wrap .wpcf7-submit:hover {
  background: var(--accent-hover);
  box-shadow: var(--glow-sapphire);
}

.wpcf7-not-valid-tip {
  color: var(--status-danger);
  font-size: 12px;
}

.wpcf7-response-output {
  border: none !important;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg-2);
}

/* Book cover background is set via inline style from CPT meta. */

/* ======================================================================
   SOCIAL LINKS PAGE
   ====================================================================== */
.social-page {
  background: linear-gradient(180deg, #050d3c, #040b17);
}

/* ── Recent book ─────────────────────────────────────────────────────── */
.social-book-section {
  padding: 80px clamp(40px, 8vw, 160px);
  border-bottom: 1px solid var(--border-1);
}

.book-detail--linked {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  text-decoration: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.book-detail--linked:hover {
  opacity: 0.85;
}

.book-detail--linked h2 {
  color: #fff;
}

/* ── Newsletter ──────────────────────────────────────────────────────── */
.social-newsletter-section {
  padding: 80px clamp(40px, 8vw, 160px);
  border-bottom: 1px solid var(--border-1);
  background: rgba(0, 112, 255, 0.04);
}

.social-newsletter__inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.social-newsletter__heading {
  font-family: var(--font-display-decorative);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.1;
}

.social-newsletter__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 0 36px;
  max-width: none;
}

/* ── Social page newsletter form — prominent centred treatment ────────── */
.social-newsletter__form {
  position: relative;
  padding: 40px 48px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  background: rgba(4, 11, 23, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 80px rgba(0, 112, 255, 0.08), var(--shadow-3);
}

/* Subtle corner accent lines */
.social-newsletter__form::before,
.social-newsletter__form::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--accent);
  border-style: solid;
  opacity: 0.4;
}

.social-newsletter__form::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-radius: var(--r-xl) 0 0 0;
}

.social-newsletter__form::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 var(--r-xl) 0;
}

/* Stack the form fields vertically and full-width */
.social-newsletter__form .newsletter__inner,
.social-newsletter__form .wpcf7-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.social-newsletter__form .newsletter__label,
.social-newsletter__form .wpcf7-form .newsletter__label {
  display: none;
  /* heading already provides context */
}

.social-newsletter__form input[type="email"],
.social-newsletter__form .wpcf7-email {
  max-width: 100%;
  width: 100%;
  padding: 16px 24px;
  font-size: 15px;
  border-radius: var(--r-md);
  border-color: var(--border-2);
  background: rgba(2, 6, 15, 0.8);
  text-align: center;
  letter-spacing: 0.02em;
}

.social-newsletter__form input[type="email"]:focus,
.social-newsletter__form .wpcf7-email:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring), var(--glow-sapphire-sm);
}

.social-newsletter__form input[type="submit"],
.social-newsletter__form .wpcf7-submit {
  width: 100%;
  margin-top: 8px;
  padding: 16px 24px;
  font-size: 13px;
  border-radius: var(--r-md);
  box-shadow: var(--glow-sapphire);
  letter-spacing: 0.2em;
  background: var(--accent);
  color: #fff;
}

.social-newsletter__form input[type="submit"]:hover,
.social-newsletter__form .wpcf7-submit:hover {
  box-shadow: var(--glow-sapphire), 0 8px 32px rgba(0, 112, 255, 0.35);
  transform: translateY(-1px);
  transition: background 200ms, box-shadow 200ms, transform 200ms var(--ease-out);
}

@media (max-width: 600px) {
  .social-newsletter__form {
    padding: 28px 24px;
  }
}

/* ── Social links list ───────────────────────────────────────────────── */
.social-links-section {
  padding: 80px clamp(40px, 8vw, 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.social-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  background: var(--bg-raised);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--fg-1);
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.social-link:hover {
  background: rgba(0, 112, 255, 0.1);
  border-color: var(--accent);
  box-shadow: var(--glow-sapphire-sm);
  color: var(--fg-1);
}

.social-link__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-link__icon svg {
  width: 24px;
  height: 24px;
}

.social-link__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.social-link__arrow {
  font-size: 16px;
  color: var(--fg-3);
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}

.social-link:hover .social-link__arrow {
  color: var(--accent);
  transform: translateX(4px);
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  .social-book-section,
  .social-newsletter-section,
  .social-links-section {
    padding: 56px 24px;
  }

  .book-detail--linked {
    flex-direction: column;
    gap: 28px;
  }

  .social-links-list {
    max-width: 100%;
  }

  .social-link {
    padding: 16px 20px;
  }
}

/* ======================================================================
   UTILITIES
   ====================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ======================================================================
   HAMBURGER MENU — hidden on desktop
   ====================================================================== */
.nav-toggle__input {
  display: none;
}

.nav-toggle__btn {
  display: none;
}

/* ======================================================================
   RESPONSIVE — tablet (≤ 900px)
   ====================================================================== */
@media (max-width: 900px) {
  .site-header nav {
    gap: 20px;
  }

  .site-header nav a {
    font-size: 10px;
  }

  .about-blurb {
    gap: 40px;
    padding: 72px clamp(24px, 5vw, 80px);
  }

  .books-grid {
    gap: 28px;
  }
}

/* ======================================================================
   RESPONSIVE — mobile (≤ 768px)
   ====================================================================== */
@media (max-width: 768px) {

  /* ── Header & hamburger ─────────────────────────────────────────── */
  .site-header {
    padding: 0 20px;
  }

  /* Show hamburger button */
  .nav-toggle__btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 110;
    order: 3;
  }

  .nav-toggle__btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 2px;
    transition: transform 260ms var(--ease-out), opacity 200ms;
    transform-origin: center;
  }

  /* Animate to X when open */
  .nav-toggle__input:checked~.nav-toggle__btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle__input:checked~.nav-toggle__btn span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle__input:checked~.nav-toggle__btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile nav drawer */
  .site-header nav {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: rgba(4, 11, 23, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 0 20px;
    border-bottom: 1px solid var(--border-1);
    z-index: 99;
    order: 4;
  }

  .nav-toggle__input:checked~nav {
    display: flex;
  }

  .site-header nav a {
    width: 100%;
    padding: 14px 24px;
    font-size: 12px;
    letter-spacing: 0.16em;
    border-bottom: none;
  }

  .site-header nav a:hover,
  .site-header nav a[aria-current="page"] {
    background: rgba(0, 112, 255, 0.08);
    color: #fff;
    border-bottom: none;
  }

  /* ── Hero: switch to flex column so the books strip takes natural height ── */
  .hero {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .hero__name {
    position: relative;
    left: 24px;
    top: auto;
    bottom: auto;
    flex: 1;
    padding-top: 88px;
    /* clear the fixed header */
    padding-bottom: 24px;
    z-index: 2;
  }

  .hero__scroll-cue {
    display: none;
  }

  /* Books strip becomes a natural flex child — no longer absolute */
  .hero__books-strip {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    height: auto;
    padding: 24px 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
    z-index: 5;
  }

  .books-strip__list {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .book-entry {
    gap: 14px;
    width: 100%;
  }

  .book-entry__title {
    font-size: 13px;
  }

  /* ── About blurb ────────────────────────────────────────────────── */
  .about-blurb {
    flex-direction: column;
    gap: 24px;
    padding: 56px 24px;
  }

  .about-blurb__rule {
    display: none;
  }

  /* ── Notes preview ──────────────────────────────────────────────── */
  .notes-preview {
    padding: 56px 24px;
  }

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

  .notes-preview__header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* ── Newsletter ─────────────────────────────────────────────────── */
  .newsletter {
    padding: 32px 24px;
  }

  .newsletter form,
  .newsletter .wpcf7-form,
  .newsletter__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .newsletter input[type="email"],
  .newsletter .wpcf7-email {
    max-width: 100%;
    width: 100%;
  }

  /* ── Footer ─────────────────────────────────────────────────────── */
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
  }

  .site-footer nav {
    gap: 16px;
  }

  /* ── Page hero ───────────────────────────────────────────────────── */
  .page-hero {
    padding: 96px 24px 48px;
  }

  /* ── Inner page sections ─────────────────────────────────────────── */
  .books-section,
  .about-section,
  .contact-section,
  .notes-section {
    padding: 56px 24px;
  }

  /* ── Notes layout: sidebar moves above notes list on mobile ───────── */
  .notes-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .notes-sidebar {
    position: static;
    order: -1;
    /* topics appear above the notes list */
  }

  .notes-sidebar__topics {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* ── Books page ──────────────────────────────────────────────────── */
  .books-grid {
    gap: 28px;
  }

  .book-detail {
    flex-direction: column;
    gap: 28px;
    padding: 28px 20px;
  }

  .book-detail h2 {
    font-size: 24px;
  }

  /* ── Contact form ────────────────────────────────────────────────── */
  .contact-form-wrap {
    max-width: 100%;
  }

  .contact-form-wrap input[type="submit"],
  .contact-form-wrap .wpcf7-submit {
    width: 100%;
  }
}

/* ======================================================================
   RESPONSIVE — small phones (≤ 480px)
   ====================================================================== */
@media (max-width: 480px) {

  /* Hero name scales down further on small screens */
  .hero__name h1 {
    font-size: clamp(56px, 15vw, 80px);
  }

  /* Books strip: full width single column */
  .books-strip__list {
    flex-direction: column;
  }

  .book-entry {
    width: 100%;
  }

  /* Book cards full width */
  .books-grid {
    flex-direction: column;
  }

  .book-card {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }

  .book-card__cover-wrap {
    flex: 0 0 auto;
  }

  /* Note cards comfortable on narrow screens */
  .note-card__title,
  .note-card--full .note-card__title {
    font-size: 18px;
  }

  /* Page hero tighter */
  .page-hero h1 {
    font-size: clamp(28px, 10vw, 48px);
  }
}