/* ==========================================================
   Dominika Creates
   Night-sky palette: midnight navy ground, pale cool starlight
   yellow, gold accent. Slavic folk ornament in gold linework.
   ========================================================== */

:root{
  --navy:      #101B38;   /* page ground */
  --navy-2:    #17244B;   /* alternate sections, panels */
  --navy-deep: #0A1129;   /* footer */
  --starlight: #F4EDC4;   /* primary text — pale cool yellow */
  --gold:      #E4C96A;   /* accent: links, rules, eyebrows */
  --silver:    #A9BBD6;   /* muted secondary text */
  --rule:      rgba(244,237,196,.18);

  --display: 'Yeseva One', Georgia, serif;
  --body:    'PT Serif', Georgia, serif;
  --util:    'PT Sans', system-ui, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--navy);
  color:var(--starlight);
  font-family:var(--body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

.wrap{
  width:min(1120px, 100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.narrow{ max-width:44rem; }
.center{ text-align:center; }

.skip{
  position:absolute; left:-9999px;
  background:var(--starlight); color:var(--navy);
  padding:.75rem 1rem; z-index:99;
}
.skip:focus{ left:1rem; top:1rem; }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

/* ---------- type ---------- */

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0 0 .6em;
  color:var(--starlight);
}
h1{ font-size:clamp(2.75rem, 1.6rem + 5vw, 5rem); }
h2{ font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h3{ font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-bottom:.15em; }

h1 em{ font-style:normal; color:var(--gold); }

.eyebrow{
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.1rem;
}
.eyebrow-light{ color:var(--gold); }

.lede{
  font-size:clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  max-width:var(--measure);
  margin-inline:auto;
  color:var(--silver);
}
.hero-text .lede{ margin-inline:0; }

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--util);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--starlight);
  border:2px solid var(--starlight);
  padding:.85rem 1.7rem;
  background:transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--starlight); color:var(--navy); }

.btn-solid{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-deep);
}
.btn-solid:hover{
  background:var(--starlight);
  border-color:var(--starlight);
  color:var(--navy-deep);
}

/* ---------- masthead ---------- */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--navy);
  position:sticky; top:0; z-index:20;
}
.masthead-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1rem 0; flex-wrap:wrap;
}
.wordmark{ text-decoration:none; color:var(--starlight); line-height:1; }
.wordmark-name{ display:block; font-family:var(--display); font-size:1.5rem; }
.wordmark-sub{
  display:block; font-family:var(--util);
  font-size:.7rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
  margin-top:.2rem;
}
.masthead nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.masthead nav a{
  font-family:var(--util);
  font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none; color:var(--starlight);
  padding-bottom:.2rem;
  border-bottom:2px solid transparent;
}
.masthead nav a:hover{ border-bottom-color:var(--gold); }

/* ---------- hero ---------- */

.hero{ padding-top:clamp(3rem, 7vw, 6rem); }
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  padding-bottom:clamp(3rem, 7vw, 5.5rem);
}
/* warm cover framed as an artifact against the cool ground */
.hero-book img{
  border:1px solid var(--gold);
  box-shadow:
    16px 16px 0 var(--navy-2),
    17px 17px 0 rgba(228,201,106,.35);
}

/* signature embroidery band — tiled rushnyk cross-stitch motif */
.band{
  height:30px;
  background-color:var(--navy-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='30' viewBox='0 0 48 30'%3E%3Cg fill='%23E4C96A'%3E%3Cpath d='M24 3 L29 8 L24 13 L19 8 Z'/%3E%3Cpath d='M24 17 L29 22 L24 27 L19 22 Z'/%3E%3Crect x='21' y='13' width='6' height='4'/%3E%3C/g%3E%3Cg fill='%23F4EDC4'%3E%3Cpath d='M0 8 L4 4 L8 8 L4 12 Z'/%3E%3Cpath d='M48 8 L44 4 L40 8 L44 12 Z'/%3E%3Cpath d='M0 22 L4 18 L8 22 L4 26 Z'/%3E%3Cpath d='M48 22 L44 18 L40 22 L44 26 Z'/%3E%3C/g%3E%3Cg fill='%23A9BBD6'%3E%3Crect x='11' y='13' width='5' height='4'/%3E%3Crect x='32' y='13' width='5' height='4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:center;
  border-block:1px solid var(--rule);
}

/* ---------- sections ---------- */

.section{ padding:clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-dark{ background:var(--navy-2); }

/* ---------- book ---------- */

.book + .book{
  margin-top:clamp(3rem, 7vw, 5rem);
  padding-top:clamp(3rem, 7vw, 5rem);
  border-top:1px solid var(--rule);
}

.book{
  display:grid;
  grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(1.75rem, 4vw, 3.5rem);
  align-items:start;
  padding-top:1rem;
}
.book-cover img{ border:1px solid var(--gold); }
.book-sub{ font-style:italic; color:var(--gold); margin:0 0 1.2rem; }
.book-body p{ color:var(--silver); }

.specs{
  list-style:none; padding:0; margin:1.5rem 0 2rem;
  font-family:var(--util); font-size:.92rem;
  color:var(--starlight);
}
.specs li{
  padding:.5rem 0 .5rem 1.5rem;
  border-top:1px solid var(--rule);
  position:relative;
}
.specs li:last-child{ border-bottom:1px solid var(--rule); }
.specs li::before{
  content:""; position:absolute; left:.15rem; top:1.05em;
  width:7px; height:7px; background:var(--gold);
  transform:rotate(45deg);
}

.coming{
  margin-top:clamp(2.5rem, 6vw, 4rem);
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-style:italic;
  color:var(--silver);
  display:flex; align-items:center; gap:.9rem;
}
.coming-mark{
  flex:none; width:9px; height:9px;
  background:var(--gold); transform:rotate(45deg);
}

/* ---------- about ---------- */

.about-grid{
  display:grid;
  grid-template-columns:minmax(0,360px) 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.about-portrait img{
  border:1px solid var(--gold);
  box-shadow:12px 12px 0 rgba(228,201,106,.15);
}
.about-portrait figcaption{
  font-family:var(--util);
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver);
  margin-top:1rem;
  text-align:center;
}
.about-text p{ max-width:var(--measure); color:var(--silver); }
.about-text p:first-of-type{ margin-top:0; }
.about-text strong{ color:var(--starlight); }

/* ---------- signup ---------- */

.signup{
  display:flex; gap:.75rem; flex-wrap:wrap;
  justify-content:center;
  margin-top:2rem;
}
.signup input{
  font-family:var(--body); font-size:1rem;
  padding:.85rem 1rem;
  min-width:min(320px, 100%);
  border:2px solid var(--starlight);
  background:var(--navy-deep);
  color:var(--starlight);
}
.signup input::placeholder{ color:var(--silver); opacity:.75; }
.signup button{ cursor:pointer; }

/* ---------- contact / foot ---------- */

/* spam honeypot — hidden from people, visible to bots */
.hidden-field{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

.contact-form{ margin-top:2.5rem; text-align:left; }

.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
.field{ margin:0 0 1.25rem; }
.field label{
  display:block;
  font-family:var(--util);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.5rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  padding:.75rem .85rem;
  border:2px solid rgba(244,237,196,.35);
  background:var(--navy-deep);
  color:var(--starlight);
  border-radius:0;
}
.field textarea{ resize:vertical; min-height:9rem; }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--gold); }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                   linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 18px) 1.25rem, calc(100% - 12px) 1.25rem;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
}
.form-actions{ margin:.5rem 0 0; }
.form-actions button{ cursor:pointer; width:100%; }

@media (min-width: 560px){
  .form-actions button{ width:auto; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns:1fr; gap:0; }
}

.foot{
  background:var(--navy-deep);
  border-top:1px solid var(--rule);
  padding:2rem 0;
  font-family:var(--util);
  font-size:.82rem;
  letter-spacing:.04em;
  color:var(--starlight);
}
.foot-inner{
  display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.foot-note{ color:var(--silver); }

/* ---------- responsive ---------- */

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

  .hero-book{ margin:0; max-width:340px; }
  .hero-book img{
    box-shadow:11px 11px 0 var(--navy-2), 12px 12px 0 rgba(228,201,106,.35);
  }
  .book-cover{ max-width:280px; }
  .about-portrait{ max-width:320px; margin:0 0 1rem; }
  .masthead{ position:static; }
}

@media (max-width: 520px){
  .masthead nav{ gap:1rem; }
  .masthead nav a{ font-size:.75rem; }
}