/* ============================================================
   Cassidy Jones — author site
   Design concept: dusk over the Texas countryside, lantern-light
   pushing back the dark, and a running-stitch motif (a nod to
   embroidery) used as the site's structural device instead of
   generic dividers or cards.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  /* color */
  --dusk:        #1B2340;
  --dusk-deep:   #131A31;
  --dusk-line:   #333E66;
  --mist:        #C7CBE0;
  --mist-dim:    #8D93B8;
  --paper:       #F6F1E4;
  --paper-line:  #DCD4BC;
  --ink:         #232016;
  --ink-dim:     #5B5646;
  --gold:        #E8A94C;
  --gold-deep:   #C4832E;
  --thread:      #B5563C;

  /* type */
  --display: 'Fraunces', serif;
  --body:    'Work Sans', sans-serif;

  /* layout */
  --measure: 62ch;
  --edge: 6vw;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);}
h3{font-size:1.25rem; font-weight:600;}
p{margin:0 0 1.1em;}
a{color:inherit;}
img{max-width:100%;display:block;}

.measure{max-width:var(--measure);}

/* skip link / focus */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--thread);
  outline-offset:3px;
}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--gold); color:var(--dusk-deep); padding:.6em 1em;
  font-family:var(--body); font-weight:600; z-index:100;
}
.skip-link:focus{left:1rem; top:1rem;}

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

/* ---------- running-stitch divider (structural motif) ---------- */
.stitch{
  border:0;
  height:0;
  margin:0;
  border-top:2px dashed var(--paper-line);
}
.stitch.on-dusk{border-top-color:var(--dusk-line);}
.stitch.thread{border-top-color:var(--thread); opacity:.55;}

/* ---------- header / nav ---------- */
.site-header{
  background:var(--dusk);
  color:var(--mist);
  padding:1.1rem var(--edge);
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 1px 0 var(--dusk-line);
}
.nav-row{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.brand{
  font-family:var(--display); font-size:1.25rem; font-weight:600;
  color:var(--paper); text-decoration:none; white-space:nowrap;
}
.brand em{font-style:italic; color:var(--gold);}
.nav-links{
  display:flex; gap:1.9rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; color:var(--mist); font-size:.98rem;
  padding:.2rem 0; border-bottom:1px solid transparent;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{
  color:var(--paper); border-bottom-color:var(--gold);
}
.nav-toggle{
  display:none; background:none; border:1px solid var(--dusk-line);
  color:var(--paper); border-radius:4px; padding:.4rem .7rem; font-size:1rem;
}
@media (max-width:760px){
  .nav-toggle{display:block;}
  .nav-links{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--dusk-deep); flex-direction:column; gap:0;
    padding:.5rem var(--edge) 1.2rem; border-top:1px solid var(--dusk-line);
  }
  .nav-links.open{display:flex;}
  .nav-links a{display:block; padding:.7rem 0; border-bottom:1px solid var(--dusk-line);}
}

/* ---------- hero ---------- */
.hero{
  background:var(--dusk);
  color:var(--mist);
  padding:5rem var(--edge) 4.2rem;
  position:relative;
  overflow:hidden;
}
.hero-inner{max-width:1180px; margin:0 auto; position:relative;}
.hero .kicker{
  font-family:var(--body); color:var(--gold); font-size:.95rem;
  margin:0 0 1rem; font-weight:500;
}
.hero h1{color:var(--paper); max-width:14ch;}
.hero .lede{
  color:var(--mist); max-width:46ch; font-size:1.15rem; margin-top:1.1rem;
}
.hero-actions{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
.lantern{
  position:absolute; right:6vw; top:0; width:210px; height:210px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--gold) 0%, rgba(232,169,76,.35) 40%, rgba(232,169,76,0) 72%);
  filter:blur(1px);
}
@media (max-width:900px){.lantern{display:none;}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-family:var(--body);
  font-weight:600; font-size:.98rem; padding:.75rem 1.5rem;
  border-radius:2px; border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--gold); color:var(--dusk-deep);}
.btn-primary:hover{background:var(--gold-deep);}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--dusk-line);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-dark{background:var(--ink); color:var(--paper);}
.btn-dark:hover{background:#000;}

/* ---------- generic page sections ---------- */
main{max-width:1180px; margin:0 auto; padding:0 var(--edge);}
.page-head{padding:3.6rem 0 2.2rem;}
.page-head .kicker{color:var(--thread); font-family:var(--body); font-weight:600; margin:0 0 .6rem; font-size:.95rem;}
section{padding:3rem 0;}

/* ---------- about page ---------- */
.about-grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:3.5rem;
}
@media (max-width:820px){.about-grid{grid-template-columns:1fr;}}

.about-bio-row{
  display:grid; grid-template-columns:230px 1fr; gap:2.5rem; align-items:start;
}
@media (max-width:700px){
  .about-bio-row{grid-template-columns:1fr; gap:1.4rem;}
  .about-bio-row .headshot,
  .about-bio-row .thumb-placeholder{max-width:200px;}
}
.facts{list-style:none; margin:0; padding:0; border-top:2px dashed var(--paper-line);}
.facts li{
  display:grid; grid-template-columns:9rem 1fr; gap:1rem;
  padding:.9rem 0; border-bottom:2px dashed var(--paper-line);
}
.facts .k{color:var(--thread); font-weight:600; font-size:.92rem;}

/* ---------- worlds / books cards ---------- */
.entry-list{display:flex; flex-direction:column;}
.entry{
  padding:2.6rem 0; border-top:2px dashed var(--paper-line);
  display:grid; grid-template-columns:.85fr 2fr; gap:2.2rem;
}
.entry:last-child{border-bottom:2px dashed var(--paper-line);}
@media (max-width:760px){.entry{grid-template-columns:1fr; gap:.8rem;}}
.entry .tag{
  color:var(--thread); font-weight:600; font-size:.85rem; align-self:start;
}
.entry .format{color:var(--ink-dim); font-size:.95rem; margin-bottom:.6rem;}
.placeholder{color:var(--gold-deep); font-style:italic;}

.entry-media{display:flex; flex-direction:column; gap:.9rem;}
.thumb{width:100%; max-width:150px; object-fit:cover; background:#fff; border:1px solid var(--paper-line);}
.thumb-cover{aspect-ratio:2/3;}
.thumb-world{aspect-ratio:4/3;}
.thumb-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:2px dashed var(--paper-line); color:var(--ink-dim); font-size:.82rem;
  padding:.6rem; line-height:1.35;
}
.thumb-placeholder em{color:var(--thread); font-style:normal; font-weight:600;}
@media (max-width:760px){
  .entry-media{flex-direction:row; align-items:center;}
  .thumb{max-width:90px;}
}

.headshot{width:100%; max-width:230px; aspect-ratio:1; object-fit:cover; background:#fff; border:1px solid var(--paper-line);}
.headshot.thumb-placeholder{max-width:230px; aspect-ratio:1;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- newsletter ---------- */
.newsletter{text-align:center;}
.newsletter-inner{max-width:38rem; margin:0 auto;}
.newsletter-inner h2{color:var(--thread);}
.newsletter-inner .measure{margin-left:auto; margin-right:auto;}
.newsletter-form{
  display:flex; gap:.8rem; margin-top:1.6rem; justify-content:center; flex-wrap:wrap;
}
.newsletter-form input{max-width:20rem;}
@media (max-width:520px){
  .newsletter-form{flex-direction:column; align-items:stretch;}
  .newsletter-form input{max-width:none;}
}

/* ---------- blog ---------- */
.post{
  padding:2.2rem 0; border-top:2px dashed var(--paper-line);
}
.post:last-child{border-bottom:2px dashed var(--paper-line);}
.post .date{color:var(--ink-dim); font-size:.9rem; margin-bottom:.3rem;}
.post h3{margin-bottom:.4rem;}
.post h3 a{text-decoration:none;}
.post h3 a:hover{color:var(--thread);}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;}}
form{display:flex; flex-direction:column; gap:1.2rem;}
label{font-weight:600; font-size:.92rem; display:block; margin-bottom:.35rem;}
input,select,textarea{
  width:100%; font-family:var(--body); font-size:1rem; padding:.7rem .8rem;
  border:1px solid var(--paper-line); background:#fff; color:var(--ink); border-radius:2px;
}
textarea{resize:vertical; min-height:9rem;}
.field-note{color:var(--ink-dim); font-size:.88rem; margin-top:.3rem;}
.contact-side .k{color:var(--thread); font-weight:600; font-size:.85rem; margin-top:1.6rem;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--dusk-deep); color:var(--mist-dim);
  padding:2.4rem var(--edge); font-size:.9rem;
}
.footer-row{
  max-width:1180px; margin:0 auto; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.footer-row a{color:var(--mist); text-decoration:none;}
.footer-row a:hover{color:var(--gold);}