/*
Theme Name: Valentine Ayuko
Theme URI: https://valentineayuko.com
Author: Valentine Ayuko
Author URI: https://valentineayuko.com
Description: A warm, editorial author theme for Valentine Ayuko — built for book launches, reader newsletters and storytelling. Custom-built for valentineayuko.com.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: valentine-ayuko
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --cream:        #F4E9D8;   /* main light background */
  --cream-deep:   #EDE0C8;   /* secondary section background */
  --paper:        #FBF6EC;   /* card / form background */
  --ink:          #2B1D14;   /* primary dark text */
  --ink-soft:     #5A473A;   /* secondary body text */
  --hero-bg:      #1B140F;   /* near-black brown, hero + footer */
  --hero-bg-2:    #241A12;
  --rust:         #8A4A2A;   /* primary accent / buttons */
  --rust-dark:    #6E3A20;   /* hover state */
  --rust-text:    #A8613A;   /* eyebrow / link accent on light bg */
  --olive:        #5B6B47;   /* events block */
  --olive-dark:   #4A5839;
  --cream-text:   #F3E9D8;   /* light text on dark backgrounds */
  --line:         rgba(43,29,20,0.14);
  --line-light:   rgba(243,233,216,0.22);

  --font-display: "Playfair Display", "Georgia", serif;
  --font-script:  "Style Script", cursive;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --radius: 2px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; margin:0 0 .5em; color: var(--ink); }
p{ margin:0 0 1em; }
button, input{ font-family: var(--font-body); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow{
  display:block;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust-text);
  margin-bottom: 14px;
  font-weight: 500;
}

.btn{
  display:inline-block;
  padding: 15px 30px;
  border: 1px solid var(--rust);
  background: var(--rust);
  color: var(--cream-text);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn:hover{ background: var(--rust-dark); border-color: var(--rust-dark); }
.btn-outline{
  background: transparent;
  border: 1px solid var(--line-light);
  color: var(--cream-text);
}
.btn-outline:hover{ background: var(--line-light); }
.btn-ink{
  background: var(--ink);
  border-color: var(--ink);
}
.btn-ink:hover{ background: #43311F; border-color:#43311F; }

.divider{
  width: 46px;
  height: 1px;
  background: var(--rust-text);
  margin: 22px auto;
  opacity: .6;
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header{
  background: var(--cream);
  padding: 22px 0;
  position: relative;
  z-index: 50;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.site-logo{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--rust);
  letter-spacing: .01em;
}
.site-logo span{ font-style: italic; }

.main-nav ul{ display:flex; gap: 34px; align-items:center; }
.main-nav a{
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}
.main-nav a:hover,
.main-nav .current-menu-item a,
.main-nav a.is-active{ border-color: var(--rust); color: var(--rust); }

.header-cta .btn{ padding: 12px 22px; font-size:12px; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  width: 30px; height: 22px; position: relative;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; position:absolute; left:0; right:0; height:1px; background: var(--ink);
}
.nav-toggle::before{ top:0; }
.nav-toggle span{ top:50%; margin-top:-.5px; }
.nav-toggle::after{ bottom:0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background: linear-gradient(120deg, var(--hero-bg) 0%, var(--hero-bg-2) 100%);
  color: var(--cream-text);
  padding: 90px 0 100px;
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items:center;
}
.hero-script{
  font-family: var(--font-script);
  font-size: 34px;
  color: var(--cream-text);
  opacity: .9;
  display:block;
  margin-bottom: 6px;
}
.hero h1{
  font-size: 46px;
  line-height: 1.18;
  color: var(--cream-text);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: 26px;
}
.hero h1 em{
  font-family: var(--font-script);
  font-style:normal;
  text-transform:none;
  color: var(--rust-text);
  font-size: .7em;
  margin: 0 6px;
  vertical-align: baseline;
}
.hero p.lede{
  max-width: 430px;
  color: var(--line-light);
  font-size: 17px;
  margin-bottom: 34px;
}
.hero-ctas{ display:flex; gap: 16px; flex-wrap:wrap; }

/* book cover mock */
.book-stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height: 420px; }

/* hero carousel */
.hero-carousel{ position:relative; }
.carousel-track{
  display:flex;
  transition: transform .5s ease;
}
.carousel-slide{
  flex: 1 0 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 22px;
}
.carousel-slide .book-photo{ width:100%; max-width:460px; }
.slide-caption{ text-align:center; }
.slide-caption h3{
  font-family: var(--font-display);
  color: var(--cream-text);
  text-transform: uppercase;
  font-size: 22px;
  margin-bottom: 6px;
}
.slide-caption p{
  color: var(--line-light);
  font-size: 14px;
  max-width: 340px;
  margin: 0 auto 16px;
}
.carousel-arrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(243,233,216,.1);
  border: 1px solid var(--line-light);
  color: var(--cream-text);
  width: 42px; height:42px;
  border-radius: 50%;
  cursor:pointer;
  font-size: 16px;
  display:flex; align-items:center; justify-content:center;
}
.carousel-arrow:hover{ background: rgba(243,233,216,.2); }
.carousel-arrow.prev{ left: -6px; }
.carousel-arrow.next{ right: -6px; }
.carousel-dots{ display:flex; gap:10px; justify-content:center; margin-top: 22px; }
.carousel-dots .dot{
  width: 9px; height:9px; border-radius:50%;
  background: rgba(243,233,216,.3);
  border: none; cursor:pointer; padding:0;
}
.carousel-dots .dot.is-active{ background: var(--rust-text); }
.book-cover{
  width: 260px;
  aspect-ratio: 2/3;
  position:relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  border-radius: 1px;
  overflow:hidden;
  background: radial-gradient(ellipse at 50% 20%, #4a3626 0%, #241a12 62%, #120d09 100%);
}
.book-cover::before{
  content:"";
  position:absolute; inset: 8%;
  border: 1px solid rgba(243,233,216,.18);
  pointer-events:none;
}
.book-cover .silhouette{
  position:absolute; left:50%; bottom:36%; transform:translateX(-50%);
  width: 34%; aspect-ratio: 1/2.6;
  background: #0d0906;
  border-radius: 50% 50% 6% 6%/ 30% 30% 6% 6%;
  opacity:.9;
}
.book-cover .cover-title{
  position:absolute; left:0; right:0; bottom: 16%;
  text-align:center; padding: 0 10%;
}
.book-cover .cover-title .imprint{
  font-family: var(--font-script);
  color: var(--cream-text);
  font-size: 15px;
  opacity:.85;
  display:block;
}
.book-cover .cover-title h3{
  font-family: var(--font-display);
  color: var(--cream-text);
  text-transform: uppercase;
  font-size: 26px;
  letter-spacing: .04em;
  margin: 4px 0 6px;
}
.book-cover .cover-title small{
  display:block;
  color: rgba(243,233,216,.7);
  font-size: 11px;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.book-cover .cover-title .byline{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform:uppercase;
  color: var(--rust-text);
}
.book-cover.style-b{
  background: radial-gradient(ellipse at 50% 25%, #3d4a30 0%, #202417 60%, #100d09 100%);
}

/* real book cover photography */
.book-photo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(ellipse at 50% 30%, #2a2019 0%, #1b140f 70%);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.book-photo img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.book-photo.ratio-portrait{ aspect-ratio: 3/4; max-width: 340px; }
.book-photo.ratio-landscape{ aspect-ratio: 3/2; }
.book-photo.ratio-square{ aspect-ratio: 1/1; }

/* ==========================================================================
   About / split sections
   ========================================================================== */
.section{ padding: 96px 0; }
.section-deep{ background: var(--cream-deep); }
.section-hero-dark{ background: var(--hero-bg); color: var(--cream-text); }

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:center;
}
.split img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.split h2{ font-size: 34px; margin-bottom: 18px; }
.split .signature{ font-family: var(--font-script); color: var(--rust-text); font-size: 22px; margin: 18px 0 26px; }

/* portrait placeholder (no photo uploaded yet) */
.portrait-placeholder{
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #C9A98A 0%, #8C6B4E 55%, #4A3626 100%);
  display:flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.75);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing:.08em;
  text-align:center;
  padding: 20px;
}

/* ==========================================================================
   Books band
   ========================================================================== */
.books-band{
  background: var(--cream-deep);
  padding: 90px 0;
}
.books-band .container{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items:center;
}
.books-band .mini-cover{ width: 100%; }
.books-band .mini-cover .book-cover{ width:100%; }
.book-headline{ font-size: 32px; margin-bottom: 8px; }
.book-tagline{ color: var(--rust-text); font-family: var(--font-display); font-style:italic; margin-bottom: 16px; font-size:20px; }
.learn-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 13px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--rust); border-bottom: 1px solid var(--rust); padding-bottom:3px;
}

/* ==========================================================================
   Two-tone band (events / newsletter)
   ========================================================================== */
.two-tone{ display:grid; grid-template-columns: 1fr 1fr; }
.two-tone > div{ padding: 80px 48px; }
.tone-olive{ background: var(--olive); color: var(--cream-text); }
.tone-cream{ background: var(--cream-deep); }
.two-tone h3{ font-size: 26px; }
.two-tone .tone-olive h3, .two-tone .tone-olive .eyebrow{ color: var(--cream-text); }
.event-row{ display:flex; gap:16px; align-items:flex-start; margin-top: 26px; padding-top:22px; border-top: 1px solid var(--line-light); }
.event-date{
  width: 52px; text-align:center; flex-shrink:0;
  font-family: var(--font-display); color: var(--cream-text);
}
.event-date .num{ font-size: 26px; display:block; line-height:1; }
.event-date .mon{ font-size: 11px; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }
.event-details a{ font-size: 13px; letter-spacing:.08em; text-transform:uppercase; color: var(--cream-text); border-bottom:1px solid rgba(243,233,216,.5); }

/* newsletter form */
.newsletter-form{ display:flex; gap:0; max-width: 420px; margin-top: 28px; }
.newsletter-form input[type=email]{
  flex:1; border:1px solid var(--line); background: var(--paper);
  padding: 15px 16px; font-size: 14px; color: var(--ink); outline:none;
}
.newsletter-form input[type=email]:focus{ border-color: var(--rust); }
.newsletter-form button{ border:none; }
.form-msg{ margin-top: 12px; font-size: 13px; }
.form-msg.success{ color: var(--olive-dark); }
.form-msg.error{ color: #9a3324; }

/* ==========================================================================
   Generic page hero (inner pages)
   ========================================================================== */
.page-hero{
  background: var(--hero-bg);
  color: var(--cream-text);
  padding: 70px 0 60px;
  text-align:center;
}
.page-hero .eyebrow{ text-align:center; }
.page-hero h1{ color: var(--cream-text); font-size: 40px; text-transform:uppercase; }
.page-hero p{ max-width: 560px; margin: 14px auto 0; color: var(--line-light); }

/* ==========================================================================
   Buy links / cards
   ========================================================================== */
.retailer-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:22px; margin-top: 34px; }
.retailer-card{
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 26px;
  text-align:center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.retailer-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,29,20,.1); }
.retailer-card .retailer-name{ font-family: var(--font-display); font-size: 19px; margin-bottom: 10px; }
.retailer-card .btn{ width:100%; margin-top:14px; }
.book-picker{ display:flex; gap:14px; justify-content:center; margin: 34px 0 10px; flex-wrap:wrap; }
.book-picker button{
  background:transparent; border: 1px solid var(--line); padding: 10px 22px;
  font-size: 12px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
}
.book-picker button.active{ background: var(--ink); color: var(--cream-text); border-color: var(--ink); }

/* ==========================================================================
   Launch info / timeline
   ========================================================================== */
.timeline{ max-width: 720px; margin: 46px auto 0; }
.timeline-item{ display:grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child{ border-bottom:none; }
.timeline-item .t-date{ font-family: var(--font-display); color: var(--rust-text); font-size: 17px; }
.timeline-item h4{ margin-bottom:6px; }

.countdown{ display:flex; gap: 22px; justify-content:center; margin: 40px 0; }
.countdown div{ text-align:center; }
.countdown .num{ font-family: var(--font-display); font-size: 40px; color: var(--rust); display:block; }
.countdown .lab{ font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; }
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid var(--line); background: var(--paper);
  padding: 14px 16px; font-size: 15px; margin-bottom: 16px; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{ border-color: var(--rust); }
.contact-form textarea{ min-height: 140px; resize: vertical; }

.social-list{ display:flex; gap: 14px; margin-top: 10px; }
.social-list a{
  width: 44px; height:44px; border-radius:50%;
  border: 1px solid var(--rust);
  display:flex; align-items:center; justify-content:center;
  color: var(--rust); font-size: 16px;
}
.social-list a:hover{ background: var(--rust); color: var(--cream-text); }
.contact-detail{ margin-bottom: 26px; }
.contact-detail .label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--rust-text); display:block; margin-bottom:4px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--hero-bg);
  color: rgba(243,233,216,.75);
  padding: 70px 0 26px;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-light);
}
.footer-brand{ font-family: var(--font-display); font-size: 26px; color: var(--cream-text); display:flex; align-items:center; gap:14px; }
.footer-tag{ margin-top: 14px; font-size: 14px; max-width: 240px; }
.footer h5{ color: var(--cream-text); font-family: var(--font-body); font-size: 13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom: 18px; font-weight:500; }
.footer-col ul li{ margin-bottom: 10px; }
.footer-col a:hover{ color: var(--cream-text); }
.footer-social{ display:flex; gap: 10px; margin-bottom: 22px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line-light);
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.footer-social a:hover{ background: var(--rust); border-color: var(--rust); }
.footer-newsletter-form{ display:flex; }
.footer-newsletter-form input{
  flex:1; background: rgba(243,233,216,.06); border:1px solid var(--line-light);
  padding: 12px 14px; color: var(--cream-text);
}
.footer-newsletter-form button{
  background: var(--rust); border:1px solid var(--rust); color: var(--cream-text);
  padding: 0 18px; cursor:pointer;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px; font-size: 13px; flex-wrap:wrap; gap:10px;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-center{ text-align:center; }
.mt-0{margin-top:0;}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero{ padding: 60px 0 70px; text-align:center; }
  .hero p.lede{ margin-left:auto; margin-right:auto; }
  .hero-ctas{ justify-content:center; }
  .split{ grid-template-columns: 1fr; }
  .books-band .container{ grid-template-columns: 1fr; text-align:center; }
  .books-band .mini-cover{ max-width: 220px; margin: 0 auto; }
  .two-tone{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .timeline-item{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .header-cta{ display:none; }
  .hero h1{ font-size: 32px; }
  .footer-top{ grid-template-columns: 1fr; }
  .retailer-grid{ grid-template-columns: 1fr; }
}