/* ============================================================
   KB WYLDE — "Chrome & Denim" design system
   Dark, moody MC-romance. Brushed chrome + denim ink + hot pink.
   Fonts are enqueued by the theme (functions.php) and driven by
   the Customizer via the --serif / --cond / --sans variables.
   ============================================================ */

:root{
  /* ---- denim / leather base ---- */
  --ink:        oklch(0.15 0.028 268);   /* near-black denim */
  --ink-2:      oklch(0.12 0.022 268);   /* leather black */
  --denim:      oklch(0.22 0.045 264);   /* mid denim panel */
  --denim-hi:   oklch(0.30 0.055 262);   /* lighter denim */
  --line:       oklch(0.36 0.04 262);    /* hairlines / stitch */
  --line-soft:  oklch(0.30 0.03 264);

  /* ---- type ---- */
  --paper:      oklch(0.94 0.008 280);   /* off-white */
  --muted:      oklch(0.70 0.018 278);   /* muted grey-lilac */
  --faint:      oklch(0.56 0.02 278);

  /* ---- signature pink ---- */
  --pink:       oklch(0.64 0.236 352);   /* hot magenta */
  --pink-soft:  oklch(0.72 0.18 350);
  --pink-deep:  oklch(0.50 0.20 354);
  --pink-glow:  oklch(0.64 0.236 352 / 0.45);

  /* ---- chrome ---- */
  --chrome-1:   #f4f7fb;
  --chrome-2:   #c4ccd8;
  --chrome-3:   #7d8798;
  --chrome-4:   #b9c2cf;

  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --cond:  'Oswald', 'Arial Narrow', sans-serif;
  --sans:  'Manrope', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---- denim texture background applied to body ---- */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.24 0.05 268) 0%, transparent 55%),
    repeating-linear-gradient(58deg, oklch(0.17 0.03 268) 0px, oklch(0.17 0.03 268) 2px, oklch(0.155 0.028 268) 2px, oklch(0.155 0.028 268) 4px),
    repeating-linear-gradient(-58deg, oklch(0.165 0.03 268 / .6) 0px, oklch(0.165 0.03 268 / .6) 2px, transparent 2px, transparent 5px),
    var(--ink);
}
/* grain */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-weight:500;
  font-size:.72rem;
  color:var(--pink-soft);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--pink));
}
.eyebrow.center::after{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg,var(--pink),transparent);
}

h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.02; margin:0; letter-spacing:.005em; }
.display{
  font-size:clamp(3rem,8vw,7rem);
  font-weight:600;
  line-height:.96;
}
.display em{ font-style:italic; color:var(--pink-soft); font-weight:500; }
h2.section-title{ font-size:clamp(2.2rem,4.5vw,3.6rem); }
h3{ font-size:1.7rem; }

.lede{ font-size:1.18rem; color:var(--muted); font-weight:300; line-height:1.75; }

/* chrome metallic text */
.chrome{
  background:linear-gradient(176deg,
     var(--chrome-1) 0%, var(--chrome-4) 26%, var(--chrome-3) 50%,
     var(--chrome-2) 64%, #fff 80%, var(--chrome-3) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 2px 6px rgba(0,0,0,.4));
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.section{ padding:clamp(72px,11vw,140px) 0; position:relative; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }

/* hot-pink stitched divider */
.stitch{
  height:2px; border:0; margin:0;
  background:repeating-linear-gradient(90deg,var(--pink) 0 14px, transparent 14px 26px);
  opacity:.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--cond);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:500;
  font-size:.92rem;
  display:inline-flex; align-items:center; gap:.6em;
  padding:16px 30px;
  border-radius:2px;
  cursor:pointer; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-pink{
  background:linear-gradient(180deg,var(--pink-soft),var(--pink-deep));
  color:#fff;
  box-shadow:0 6px 22px -6px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-pink:hover{ box-shadow:0 12px 34px -8px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.45); }
.btn-chrome{
  background:linear-gradient(180deg,#e9eef5,#aeb8c6 60%,#869, );
  background:linear-gradient(180deg,#eef2f8,#b4bdca 55%,#828d9d);
  color:#1a1d26;
  box-shadow:inset 0 1px 0 #fff, 0 6px 18px -8px rgba(0,0,0,.7);
}
.btn-ghost{
  background:transparent; color:var(--paper);
  border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--pink); color:#fff; }
.btn-sm{ padding:11px 20px; font-size:.8rem; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px);
  background:oklch(0.13 0.024 268 / .72);
  border-bottom:1px solid var(--line-soft);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand .mark{
  font-family:var(--serif); font-weight:700;
  font-size:1.7rem; letter-spacing:.02em;
}
.brand .sub{
  font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.42em; font-size:.52rem; color:var(--muted);
  margin-top:5px; padding-left:.1em;
}
.nav-links{ display:flex; align-items:center; gap:38px; }
.nav-links a{
  font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.18em; font-size:.82rem; font-weight:400;
  color:var(--muted); position:relative; padding:6px 0;
  transition:color .2s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--paper); }
.nav-links a.active::after, .nav-links a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--pink);
}
.nav-cta{ display:flex; align-items:center; gap:22px; }
.menu-btn{ display:none; background:none;border:0;color:var(--paper);cursor:pointer; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line-soft);
  background:oklch(0.12 0.02 268 / .7);
  padding:64px 0 40px;
  margin-top:0;
}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  align-items:start;
}
.foot-grid h4{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em;
  font-size:.78rem; color:var(--paper); margin:0 0 18px;
}
.foot-links{ display:flex; flex-direction:column; gap:11px; }
.foot-links a{ color:var(--muted); font-size:.95rem; }
.foot-links a:hover{ color:var(--pink-soft); }
.foot-bottom{
  margin-top:54px; padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  color:var(--faint); font-size:.82rem; flex-wrap:wrap;
}
.socials{ display:flex; gap:14px; }
.socials a{
  width:38px; height:38px; border:1px solid var(--line);
  display:grid; place-items:center; border-radius:2px; color:var(--muted);
  transition:.2s;
}
.socials a:hover{ border-color:var(--pink); color:#fff; transform:translateY(-2px); }

/* ============================================================
   PLACEHOLDER (for imagery to be supplied)
   ============================================================ */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(45deg, oklch(0.20 0.035 266) 0 10px, oklch(0.175 0.03 266) 10px 20px);
  border:1px solid var(--line-soft);
  display:grid; place-items:center; color:var(--faint);
}
.ph span{
  font-family:'Courier New',monospace; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; text-align:center; padding:10px 16px;
  background:oklch(0.12 0.02 268 / .7); border:1px solid var(--line-soft);
}

/* trope tags */
.tropes{ display:flex; flex-wrap:wrap; gap:9px; }
.trope{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em;
  font-size:.68rem; color:var(--pink-soft);
  padding:6px 13px; border:1px solid var(--pink-deep);
  border-radius:100px; background:oklch(0.64 0.236 352 / .07);
}

/* small reveal — progressive enhancement only (visible by default) */
.reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js-anim .reveal{ opacity:0; transform:translateY(22px); }
.js-anim .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{ opacity:1; transform:none; }
}

@media (max-width:860px){
  .nav-links{ display:none; }
  .menu-btn{ display:block; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
}

/* ============================================================
   WORDPRESS NAV MENU (wp_nav_menu output)
   ============================================================ */
.nav-links ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:38px; }
.nav-links li{ margin:0; position:relative; }
.nav-links li a{
  font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.18em; font-size:.82rem; font-weight:400;
  color:var(--muted); position:relative; padding:6px 0; display:inline-block;
  transition:color .2s;
}
.nav-links li a:hover,
.nav-links li.current-menu-item > a,
.nav-links li.current_page_item > a,
.nav-links li.current-menu-parent > a{ color:var(--paper); }
.nav-links li.current-menu-item > a::after,
.nav-links li.current_page_item > a::after,
.nav-links li a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--pink);
}
/* submenus */
.nav-links li ul{
  position:absolute; top:calc(100% + 14px); left:0; flex-direction:column; gap:0;
  background:oklch(0.12 0.02 268 / .97); border:1px solid var(--line); padding:8px 0;
  min-width:200px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s; z-index:60;
}
.nav-links li:hover > ul{ opacity:1; visibility:visible; transform:none; }
.nav-links li ul li a{ padding:9px 18px; display:block; letter-spacing:.14em; }

/* mobile menu drawer */
.menu-btn{ font-size:1.4rem; line-height:1; }
.mobile-menu{
  display:none; position:fixed; inset:0; z-index:80;
  background:oklch(0.10 0.018 268 / .97); backdrop-filter:blur(8px);
  padding:90px 32px 32px;
}
.mobile-menu.open{ display:block; }
.mobile-menu ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.mobile-menu li a{
  font-family:var(--serif); font-size:2rem; color:var(--paper); display:block; padding:10px 0;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu .close{
  position:absolute; top:24px; right:28px; background:none; border:0; color:var(--paper);
  font-size:1.8rem; cursor:pointer;
}
.mobile-menu .btn{ margin-top:24px; }

/* ============================================================
   HOME / FRONT PAGE
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero-photo{ position:absolute; inset:0; background-size:cover; background-position:center 30%; background-repeat:no-repeat; }
.hero.var-a{ min-height:94vh; display:flex; align-items:flex-end; }
.hero.var-a .scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, oklch(0.12 0.02 268 / .35) 0%, transparent 30%, transparent 40%, oklch(0.12 0.02 268 / .9) 86%, var(--ink) 100%),
    linear-gradient(75deg, oklch(0.11 0.02 268 / .85) 0%, oklch(0.11 0.02 268 / .35) 34%, transparent 58%),
    radial-gradient(70% 50% at 20% 118%, oklch(0.64 0.236 352 / .22), transparent 60%);
}
.hero.var-a .hero-inner{ position:relative; padding-bottom:clamp(52px,8vw,104px); width:100%; text-align:left; }
.hero.var-a .display{ margin:0; max-width:14ch; }
.hero.var-a .hero-actions{ justify-content:flex-start; }

.hero.var-b{ padding:clamp(40px,6vw,80px) 0 clamp(60px,8vw,110px); }
.hero.var-b .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center; }
.hero.var-b .frame{
  position:relative; aspect-ratio:16/13; border:1px solid var(--line);
  box-shadow:0 30px 80px -30px #000, inset 0 0 0 6px oklch(0.12 0.02 268 / .5); overflow:hidden;
}
.hero.var-b .frame .hero-photo{ background-position:center 42%; }
.hero.var-b .frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%, oklch(0.12 0.02 268 / .35)); }
.hero.var-b .copy .display{ font-size:clamp(2.8rem,5.5vw,5rem); }

.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }
.tag-line{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.5em; font-size:.7rem; color:var(--muted); margin-top:26px; }

.release{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,84px); align-items:center; }
.cover-wrap{ position:relative; }
.cover{ aspect-ratio:2/3; border-radius:3px; box-shadow:0 40px 90px -30px #000, 0 6px 24px -10px var(--pink-glow); width:100%; object-fit:cover; }
.cover-badge{
  position:absolute; top:-14px; left:-14px; z-index:2;
  background:linear-gradient(180deg,var(--pink-soft),var(--pink-deep)); color:#fff;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem;
  padding:9px 16px; border-radius:2px; box-shadow:0 8px 20px -6px var(--pink-glow); white-space:nowrap;
}
.book-meta{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.28em; font-size:.74rem; color:var(--muted); }
.stars{ color:var(--pink-soft); letter-spacing:.15em; }
.pull{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--paper); line-height:1.4; border-left:2px solid var(--pink); padding-left:20px; margin:6px 0; }

.about-teaser{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.portrait{ aspect-ratio:4/5; border:1px solid var(--line); box-shadow:0 30px 70px -30px #000; width:100%; object-fit:cover; }

.cta-band{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(180deg, oklch(0.18 0.04 266), oklch(0.13 0.025 268));
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.cta-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% 0%, oklch(0.64 0.236 352 / .15), transparent 60%); }
.signup{ display:flex; gap:12px; max-width:520px; margin:30px auto 0; }
.signup input{ flex:1; background:oklch(0.10 0.018 268 / .8); border:1px solid var(--line); color:var(--paper); padding:15px 18px; border-radius:2px; font-family:var(--sans); font-size:1rem; }
.signup input:focus{ outline:none; border-color:var(--pink); }
.fine{ color:var(--faint); font-size:.8rem; margin-top:16px; }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.post-card{ border:1px solid var(--line-soft); background:oklch(0.16 0.028 268 / .6); transition:.3s var(--ease); display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:0 24px 50px -30px #000; }
.post-card .thumb{ aspect-ratio:16/10; background-size:cover; background-position:center; }
.post-card .body{ padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.post-card .date{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--pink-soft); }
.post-card h3{ font-size:1.4rem; margin:10px 0 8px; }
.post-card p{ color:var(--muted); font-size:.95rem; margin:0 0 18px; }
.read{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--paper); margin-top:auto; display:inline-flex; align-items:center; gap:8px; }
.read::after{ content:"\2192"; color:var(--pink-soft); transition:transform .2s; }
.post-card:hover .read::after{ transform:translateX(4px); }

/* ============================================================
   PAGE HEAD (inner pages)
   ============================================================ */
.page-head{ padding:clamp(56px,9vw,120px) 0 clamp(30px,4vw,50px); }
.page-head.center{ text-align:center; }
.page-head .display{ font-size:clamp(2.6rem,6vw,5rem); }

/* ============================================================
   BOOKS (archive + single)
   ============================================================ */
.feature{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,84px); align-items:center; }
.buy-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; align-items:center; }
.ku{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ku b{ color:var(--pink-soft); font-weight:500; }
.coming{ display:grid; grid-template-columns:.55fr 1.45fr; gap:clamp(30px,5vw,70px); align-items:center; }
.coming .cover{ position:relative; }
.book-label{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; color:var(--pink-soft); background:oklch(0.12 0.02 268 / .85); padding:6px 12px; border:1px solid var(--pink-deep); }
.expect{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.expect .cell{ background:var(--ink); padding:40px 34px; }
.expect .num{ font-family:var(--serif); font-style:italic; color:var(--pink-soft); font-size:2.4rem; line-height:1; }
.expect h3{ font-size:1.4rem; margin:14px 0 10px; }
.expect p{ color:var(--muted); font-size:.96rem; margin:0; }
.book-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.book-card{ display:flex; flex-direction:column; gap:18px; }
.book-card .cover{ margin-bottom:4px; }
.book-card h3{ font-size:1.6rem; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-hero{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(36px,6vw,80px); align-items:center; padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,70px); }
.about-hero .display{ font-size:clamp(2.8rem,6vw,5.2rem); }
.bio{ max-width:62ch; margin:0 auto; }
.bio p{ color:var(--paper); opacity:.92; margin:0 0 22px; }
.bio p.first::first-letter{ font-family:var(--serif); font-size:3.4em; float:left; line-height:.8; padding:6px 14px 0 0; color:var(--pink-soft); }
.signature{ font-family:var(--serif); font-style:italic; font-size:2.4rem; margin-top:10px; }
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.facts .cell{ background:var(--ink); padding:30px 26px; text-align:center; }
.facts .k{ font-family:var(--serif); font-style:italic; color:var(--pink-soft); font-size:2.2rem; line-height:1; }
.facts .v{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--muted); margin-top:10px; }
.faves{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fave{ border:1px solid var(--line-soft); padding:30px 30px 34px; background:oklch(0.16 0.028 268 / .5); }
.fave .q{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--pink-soft); }
.fave .a{ font-family:var(--serif); font-size:1.5rem; margin-top:10px; line-height:1.3; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.nl-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,80px); align-items:center; padding:clamp(56px,8vw,110px) 0 clamp(50px,6vw,80px); }
.nl-hero .display{ font-size:clamp(2.8rem,6vw,5rem); }
.magnet{ position:relative; border:1px solid var(--line); background:linear-gradient(180deg, oklch(0.19 0.04 266), oklch(0.14 0.026 268)); padding:8px; box-shadow:0 40px 90px -34px #000; }
.magnet .inner{ border:1px solid var(--line-soft); padding:34px; }
.magnet .ph,.magnet .cover-img{ aspect-ratio:3/4; border-radius:3px; max-width:230px; margin:0 auto 24px; box-shadow:0 24px 50px -20px #000, 0 4px 20px -8px var(--pink-glow); width:100%; object-fit:cover; }
.magnet h3{ text-align:center; font-size:1.7rem; }
.magnet .sub{ text-align:center; color:var(--muted); font-size:.95rem; margin-top:8px; }
.ribbon{ position:absolute; top:-12px; right:24px; background:linear-gradient(180deg,var(--pink-soft),var(--pink-deep)); color:#fff; font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; padding:8px 16px; box-shadow:0 8px 20px -6px var(--pink-glow); white-space:nowrap; }
.form-card{ background:oklch(0.16 0.028 268 / .6); border:1px solid var(--line); padding:clamp(28px,4vw,44px); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--muted); margin-bottom:9px; }
.field input{ width:100%; background:oklch(0.10 0.018 268 / .85); border:1px solid var(--line); color:var(--paper); padding:15px 18px; border-radius:2px; font-family:var(--sans); font-size:1rem; }
.field input:focus{ outline:none; border-color:var(--pink); }
.checks{ display:flex; flex-direction:column; gap:12px; margin:8px 0 22px; }
.check{ display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:.92rem; }
.check input{ margin-top:4px; accent-color:#e0218a; width:17px; height:17px; }
.consent{ color:var(--faint); font-size:.8rem; margin-top:16px; line-height:1.6; }
.perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.perks .cell{ background:var(--ink); padding:36px 28px; }
.perks .num{ font-family:var(--serif); font-style:italic; color:var(--pink-soft); font-size:2rem; line-height:1; }
.perks h3{ font-size:1.3rem; margin:14px 0 8px; }
.perks p{ color:var(--muted); font-size:.92rem; margin:0; }

/* embedded provider forms (Mailchimp / MailerLite / MC4WP) — inherit the look */
.kbw-embed{ width:100%; }
.kbw-embed form{ margin:0; }
.kbw-embed label{ display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--muted); margin:0 0 9px; }
.kbw-embed input[type=text],
.kbw-embed input[type=email],
.kbw-embed input[type=tel],
.kbw-embed select,
.kbw-embed textarea{
  width:100%; background:oklch(0.10 0.018 268 / .85); border:1px solid var(--line);
  color:var(--paper); padding:15px 18px; border-radius:2px; font-family:var(--sans); font-size:1rem; margin-bottom:16px;
}
.kbw-embed input:focus,.kbw-embed select:focus,.kbw-embed textarea:focus{ outline:none; border-color:var(--pink); }
.kbw-embed input[type=checkbox],.kbw-embed input[type=radio]{ accent-color:var(--pink); width:17px; height:17px; margin-right:8px; }
.kbw-embed button,
.kbw-embed input[type=submit]{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-weight:500; font-size:.92rem;
  background:linear-gradient(180deg,var(--pink-soft),var(--pink-deep)); color:#fff; border:0;
  padding:16px 30px; border-radius:2px; cursor:pointer; box-shadow:0 6px 22px -6px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--ease); width:100%;
}
.kbw-embed button:hover,.kbw-embed input[type=submit]:hover{ transform:translateY(-2px); }
.kbw-embed-band button,.kbw-embed-band input[type=submit]{ width:auto; }
.kbw-embed a{ color:var(--pink-soft); }

/* ============================================================
   BLOG (index + single) & CATEGORY CHIPS
   ============================================================ */
.cats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.cat{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--muted); padding:9px 18px; border:1px solid var(--line); border-radius:100px; cursor:pointer; transition:.2s; }
.cat.on, .cat:hover{ color:#fff; border-color:var(--pink); background:oklch(0.64 0.236 352 / .08); }
.featured{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; border:1px solid var(--line); margin-bottom:60px; overflow:hidden; }
.featured .thumb{ aspect-ratio:16/11; background-size:cover; background-position:center; }
.featured .body{ padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.featured .date{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--pink-soft); }
.featured h2{ font-size:clamp(1.8rem,3vw,2.8rem); margin:14px 0 14px; }
.featured p{ color:var(--muted); margin:0 0 24px; }
.loadmore{ text-align:center; margin-top:56px; }
.pagination{ display:flex; gap:10px; justify-content:center; margin-top:56px; flex-wrap:wrap; }
.pagination .page-numbers{ font-family:var(--cond); letter-spacing:.12em; color:var(--muted); border:1px solid var(--line); padding:10px 16px; border-radius:2px; }
.pagination .page-numbers.current,.pagination .page-numbers:hover{ color:#fff; border-color:var(--pink); background:oklch(0.64 0.236 352 / .08); }

/* ============================================================
   PROSE (single post / page editor content)
   ============================================================ */
.prose{ max-width:70ch; margin:0 auto; }
.prose p{ color:var(--paper); opacity:.92; margin:0 0 22px; }
.prose h2{ font-size:2rem; margin:40px 0 16px; }
.prose h3{ font-size:1.5rem; margin:32px 0 12px; }
.prose a{ color:var(--pink-soft); text-decoration:underline; text-underline-offset:3px; }
.prose img{ border:1px solid var(--line); margin:24px 0; }
.prose blockquote{ font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--paper); border-left:2px solid var(--pink); padding-left:22px; margin:26px 0; }
.prose ul,.prose ol{ color:var(--paper); opacity:.92; padding-left:1.3em; margin:0 0 22px; }
.prose li{ margin-bottom:8px; }
.single-meta{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--pink-soft); }
.single-hero-img{ aspect-ratio:16/8; width:100%; object-fit:cover; border:1px solid var(--line); margin:34px 0; background-size:cover; background-position:center; }

/* ============================================================
   WP CORE HELPERS
   ============================================================ */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.alignwide{ max-width:1100px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:none; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.wp-caption-text,figcaption{ color:var(--faint); font-size:.85rem; margin-top:8px; text-align:center; }
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }

@media (max-width:860px){
  .release,.about-teaser,.hero.var-b .hero-grid,.feature,.coming,.about-hero,.nl-hero,.featured{ grid-template-columns:1fr; }
  .posts,.expect,.perks,.faves,.book-grid{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:repeat(2,1fr); }
  .signup{ flex-direction:column; }
  .release .cover-wrap,.feature .cover-wrap{ max-width:300px; margin:0 auto; }
  .hero.var-b .frame{ aspect-ratio:16/11; }
}