/* ==========================================================================
   THE KANGES — stylesheet
   Token system lives in :root — change these and the whole site retunes.
   ========================================================================== */

:root{
  --paper:       #F2ECDE;   /* page background — warm parchment */
  --paper-deep:  #E8DEC7;   /* card / panel background */
  --ink:         #211C16;   /* primary text, near-black warm ink */
  --ink-soft:    #574B3E;   /* secondary text */
  --clay:        #A8622E;   /* primary accent — brass-clay */
  --indigo:      #1F2D4A;   /* secondary accent — pulled from the seal's navy */
  --gold:        #C9A03E;   /* thread / stitch accent — pulled from the seal's gold */
  --rule:        #D3C4A3;   /* hairline rule colour */
  --paper-rgb:   242,236,222;

  --display: 'Fraunces', ui-serif, Georgia, serif;
  --body:    'Newsreader', ui-serif, Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem);}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--clay);
  display:flex;
  align-items:center;
  gap:0.6em;
  margin:0 0 0.9em;
}
.eyebrow::before{ content:""; width:1.6em; height:1px; background:var(--gold); display:inline-block; }

h1,h2,h3{ font-family:var(--display); font-weight:500; line-height:1.08; margin:0 0 0.4em; color:var(--ink); }
h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:450;}
h2 em, h1 em{ font-style:italic; font-weight:350; color:var(--indigo); }
p{margin:0 0 1em; color:var(--ink-soft); max-width:60ch;}

.btn{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.5em; padding:0.85em 1.4em; border-radius:2px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper); text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease; cursor:pointer;
}
.btn:hover{background:var(--clay); border-color:var(--clay); transform:translateY(-1px);}
.btn:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.btn[disabled]{opacity:0.6; cursor:not-allowed; transform:none;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--paper-rgb), 0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:0.85rem clamp(1.25rem,5vw,3rem); }
.brand{display:flex; align-items:center; gap:0.7em; text-decoration:none;}
.brand img{ height:44px; width:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(33,28,22,0.08); }
.brand span{font-family:var(--display); font-size:1.05rem; letter-spacing:0.01em;}

nav.links{display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem);}
nav.links a{
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); padding:0.3em 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
nav.links a:hover{color:var(--clay); border-color:var(--clay);}
nav.links a.cta{color:var(--paper); background:var(--ink); padding:0.6em 1.1em; border-radius:2px;}
nav.links a.cta:hover{background:var(--clay); color:var(--paper);}
.menu-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:2px; padding:0.5em 0.7em; font-family:var(--mono); cursor:pointer;}

/* ---------- Hero ---------- */
.hero{ padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem); position:relative; overflow:hidden; }
.hero .wrap{display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--gap); align-items:center;}
.hero h1{font-size:clamp(2.2rem, 4.6vw, 3.4rem); max-width:14ch;}
.hero .lede{font-family:var(--body); font-size:1.1rem; max-width:46ch;}
.hero-cta{display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem;}

/* Signature element: the family seal, presented like a wax seal stamped
   on a letter, with the three covers fanned beneath it like enclosures. */
.seal-scene{position:relative; display:flex; flex-direction:column; align-items:center; gap:1.6rem;}
.seal{
  width:clamp(120px,14vw,170px); height:clamp(120px,14vw,170px); border-radius:50%;
  box-shadow:0 22px 40px -16px rgba(33,28,22,0.5), 0 0 0 6px var(--paper), 0 0 0 7px var(--rule);
  position:relative; z-index:2;
}
.seal-scene::before{
  content:""; position:absolute; top:14%; left:50%; width:1px; height:30%;
  background:repeating-linear-gradient(to bottom, var(--gold) 0 6px, transparent 6px 12px);
  transform:translateX(-50%); opacity:0.5; z-index:1;
}
.cover-fan{position:relative; display:flex; justify-content:center; align-items:flex-end; height:clamp(160px,18vw,210px); width:100%;}
.cover-fan img{
  position:absolute; width:clamp(96px,11vw,128px); border-radius:2px;
  box-shadow:0 16px 30px -14px rgba(33,28,22,0.45); border:1px solid rgba(33,28,22,0.08);
}
.cover-fan img:nth-child(1){left:14%; bottom:0; transform:rotate(-7deg); z-index:1;}
.cover-fan img:nth-child(2){left:41%; bottom:16px; transform:rotate(2deg); z-index:2;}
.cover-fan img:nth-child(3){right:10%; bottom:2px; transform:rotate(8deg); z-index:1;}

.marquee{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:0.9rem 0;
  overflow:hidden; white-space:nowrap; font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);
}
.marquee span{display:inline-block; padding-right:2.5rem;}

/* ---------- Collection / thread ---------- */
section{padding:clamp(3rem,7vw,5.5rem) 0;}
.collection-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); position:relative; margin-top:2.5rem;}
.collection-grid::before{
  content:""; position:absolute; top:1.4rem; left:0; right:0; height:1px;
  background:repeating-linear-gradient(to right, var(--gold) 0 6px, transparent 6px 12px);
  opacity:0.55; z-index:0;
}
.thread-item{position:relative; z-index:1;}
.thread-num{font-family:var(--mono); font-size:0.8rem; color:var(--clay); background:var(--paper); display:inline-block; padding-right:0.6em;}
.thread-item h3{font-size:1.3rem; margin-top:0.5em;}

/* ---------- Books ---------- */
.book-card{
  display:grid; grid-template-columns:220px 1fr; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
  padding:clamp(1.75rem,3vw,2.5rem) 0; border-top:1px solid var(--rule);
}
.book-card:last-child{border-bottom:1px solid var(--rule);}
.book-card img{border-radius:3px; box-shadow:0 16px 30px -16px rgba(33,28,22,0.4);}
.book-tag{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--indigo); border:1px solid var(--indigo); border-radius:20px; padding:0.25em 0.8em;
  display:inline-block; margin-bottom:0.8em;
}
.book-card h3{font-size:1.6rem;}
.book-card .subtitle{font-family:var(--body); font-style:italic; color:var(--ink-soft); margin-top:-0.3em; margin-bottom:0.8em;}
.book-actions{display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.2rem;}
.availability{font-family:var(--mono); font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.04em;}

/* ---------- Pull quote ---------- */
.quote-band{background:var(--ink); color:var(--paper);}
.quote-band .wrap{display:flex; flex-direction:column; align-items:center; gap:1.2rem;}
.quote-band img.seal-sm{ width:56px; height:56px; border-radius:50%; box-shadow:0 0 0 4px rgba(242,236,222,0.08); }
.quote-band blockquote{
  font-family:var(--display); font-style:italic; font-weight:350; font-size:clamp(1.4rem,3vw,2.1rem);
  max-width:38ch; margin:0 auto; color:var(--paper); text-align:center; line-height:1.3;
}
.quote-band cite{
  display:block; text-align:center; font-family:var(--mono); font-style:normal; font-size:0.75rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--gold);
}

/* ---------- Lead magnet ---------- */
.lead-magnet{background:var(--paper-deep); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.lead-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center;}
form.stack{display:flex; flex-direction:column; gap:0.9rem; max-width:420px;}
.field{display:flex; flex-direction:column; gap:0.35rem;}
.field label{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft);}
.field input{
  font-family:var(--body); font-size:1rem; padding:0.75em 0.9em; border:1px solid var(--ink);
  border-radius:2px; background:var(--paper); color:var(--ink);
}
.field input:focus-visible{outline:2px solid var(--indigo); outline-offset:2px;}
.form-note{font-family:var(--mono); font-size:0.7rem; color:var(--ink-soft); margin-top:0.2rem;}
.form-success{display:none; font-family:var(--mono); font-size:0.85rem; color:var(--indigo); margin-top:0.6rem;}
.form-error{display:none; font-family:var(--mono); font-size:0.85rem; color:#9C3B2E; margin-top:0.6rem;}

/* ---------- About ---------- */
.authors-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); margin-top:2rem;}
.author-card{display:flex; gap:1.2rem; align-items:flex-start;}
.author-card img{width:84px; height:84px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.author-card h3{font-size:1.15rem; margin-bottom:0.1em;}
.author-role{font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--clay); margin-bottom:0.5em; display:block;}

/* ---------- Newsletter / footer ---------- */
.newsletter{background:var(--indigo); color:var(--paper);}
.newsletter h2{color:var(--paper);}
.newsletter p{color:rgba(242,236,222,0.75);}
.newsletter form{display:flex; gap:0.75rem; max-width:460px; flex-wrap:wrap;}
.newsletter input[type=email]{
  flex:1; min-width:220px; padding:0.85em 1em; border-radius:2px; border:1px solid rgba(242,236,222,0.4);
  background:rgba(242,236,222,0.08); color:var(--paper); font-family:var(--body);
}
.newsletter input::placeholder{color:rgba(242,236,222,0.55);}
.newsletter .btn{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.newsletter .btn:hover{background:var(--paper); border-color:var(--paper);}

footer.site{background:var(--ink); color:rgba(242,236,222,0.7); padding:3rem 0 2rem;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.5rem; border-bottom:1px solid rgba(242,236,222,0.15); padding-bottom:2rem; margin-bottom:1.5rem;}
footer.site nav a{font-family:var(--mono); font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; color:rgba(242,236,222,0.75); margin-right:1.5rem;}
footer.site nav a:hover{color:var(--gold);}
.footer-bottom{font-family:var(--mono); font-size:0.7rem; color:rgba(242,236,222,0.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.5rem;}

.skip-link{ position:absolute; left:-999px; top:auto; background:var(--ink); color:var(--paper); padding:0.8em 1.2em; z-index:100; }
.skip-link:focus{left:1rem; top:1rem;}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .seal-scene{order:-1;}
  .collection-grid{grid-template-columns:1fr; gap:2rem;}
  .collection-grid::before{display:none;}
  .book-card{grid-template-columns:1fr; text-align:left;}
  .book-card img{width:140px;}
  .lead-grid{grid-template-columns:1fr;}
  .authors-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  nav.links{
    position:fixed; inset:64px 0 auto 0; background:var(--paper); flex-direction:column;
    align-items:flex-start; padding:1.5rem clamp(1.25rem,5vw,3rem); border-bottom:1px solid var(--rule);
    transform:translateY(-120%); transition:transform .25s ease;
  }
  nav.links.open{transform:translateY(0);}
  .menu-toggle{display:block;}
  .footer-row{flex-direction:column; align-items:flex-start;}
}