/* ===========================================================
   A.R. CHRIS ARDEN — literary site stylesheet
   =========================================================== */

:root{
  --ink:#15140F;
  --ink-2:#1C1B15;
  --ink-3:#242219;
  --paper:#EDE8DB;
  --paper-dim:rgba(237,232,219,0.62);
  --paper-faint:rgba(237,232,219,0.58);
  --accent:#8A4A38;
  --accent-soft:#B98066;
  --line-dark:rgba(237,232,219,0.14);
  --line-light:rgba(21,20,15,0.13);
  --serif:'Newsreader', 'Georgia', serif;
  --sans:'Inter', -apple-system, sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:0.8rem 1.2rem; z-index:1000; font-family:var(--sans); font-size:0.85rem;
}
.skip-link:focus{left:1rem; top:1rem;}

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

.eyebrow{
  font-family:var(--sans); font-size:0.7rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent); font-weight:600;
  display:inline-block;
}

h1,h2,h3,h4{font-family:var(--serif); font-weight:500; color:inherit; letter-spacing:-0.01em;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 2.5rem;}
@media (max-width:640px){.container{padding:0 1.3rem;}}

/* ---------------- NAV ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem 2.5rem;
  background:rgba(21,20,15,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
  color:var(--paper);
}
.site-nav .wordmark{
  display:flex; align-items:center; gap:0.7rem;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:0.06em; color:var(--paper);
}
.site-nav .wordmark .logo-mark{
  height:30px; width:auto; filter:brightness(0) invert(1) opacity(0.92);
}
.site-nav .wordmark small{
  display:block; font-family:var(--sans); font-size:0.6rem; letter-spacing:0.24em;
  color:var(--paper-faint); margin-top:0.2rem; font-weight:500;
}
.site-nav .wordmark .name-text{display:block;}
.nav-links{display:flex; align-items:center; gap:2rem;}
.nav-links a{
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--paper-dim); font-weight:500; padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{color:var(--paper); border-color:var(--accent);}
.nav-cta{
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper) !important; border:1px solid var(--accent-soft); padding:0.55rem 1.1rem;
}
.nav-cta:hover{background:var(--accent); border-color:var(--accent);}
.menu-toggle{
  display:none; background:none; border:none; color:var(--paper); flex-direction:column;
  padding:0.4rem;
}
.menu-toggle span{width:22px; height:1px; background:var(--paper); display:block; margin-top:5px;}
.menu-toggle span:first-child{margin-top:0;}
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,80vw); height:100vh;
    background:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2.5rem; transform:translateX(100%); transition:transform .35s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:0.85rem;}
  .menu-toggle{display:flex;}
  .site-nav{padding:1.1rem 1.3rem;}
}

/* ---------------- HERO / OPENING ---------------- */
.opening{
  min-height:100svh; display:flex; align-items:center;
  background:
    radial-gradient(ellipse 900px 600px at 28% 48%, rgba(21,20,15,0.6), transparent 70%),
    linear-gradient(180deg, rgba(21,20,15,0.55) 0%, rgba(21,20,15,0.68) 45%, var(--ink-2) 100%),
    url("hero_bg.jpg");
  background-size:auto, auto, cover; background-position:center, center, center 30%;
  color:var(--paper); padding:8rem 2.5rem 5rem; position:relative; overflow:hidden;
}
.opening::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(138,74,56,0.12), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 90%, rgba(30,42,74,0.35), transparent 65%);
}
.opening::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.045;
}
.opening-inner{max-width:760px; position:relative; z-index:1;}
.opening .statement{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.4rem, 3.2vw, 2.15rem); line-height:1.55; color:var(--paper);
  opacity:0; animation:riseIn 1.1s ease forwards; animation-delay:.2s;
}
.opening .byline{
  margin-top:3rem; opacity:0; animation:riseIn 1s ease forwards; animation-delay:.6s;
}
.opening .byline .name{font-size:1.4rem; letter-spacing:0.03em;}
.opening .byline .role{
  font-family:var(--sans); font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent-soft); margin-top:0.5rem;
}
@keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.scroll-hint{
  position:absolute; bottom:2.4rem; left:2.5rem; width:1px; height:44px;
  background:linear-gradient(var(--accent-soft), transparent); animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:0.2;} 50%{opacity:0.8;}}

/* ---------------- GENERIC SECTION ---------------- */
section{padding:6.5rem 0;}
.section-head{max-width:640px; margin-bottom:3rem;}
.section-head h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-top:0.8rem; line-height:1.2;}
.section-head p.dek{color:var(--ink-3); opacity:0.72; margin-top:0.9rem; font-size:1.02rem; max-width:520px;}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

.rule{height:1px; background:var(--line-light); width:100%; margin:0;}
.rule.on-dark{background:var(--line-dark);}

/* ---------------- THE WRITER ---------------- */
.writer{background:var(--paper);}
.writer-grid{display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start;}
.writer-text p{margin-bottom:1.3rem; font-size:1.06rem; color:var(--ink-3); max-width:52ch;}
.writer-text p:first-of-type{font-size:1.18rem; color:var(--ink);}
.writer-portrait{
  aspect-ratio:4/5; background:linear-gradient(150deg, var(--ink-2), var(--ink));
  border:1px solid var(--line-light); position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem;
}
.writer-portrait .portrait-logo{
  width:110px; height:auto; opacity:0.85;
  filter:brightness(0) invert(1) opacity(0.9);
}
.writer-portrait .cap{
  position:absolute; bottom:0; left:0; right:0;
  padding:1.3rem; font-family:var(--sans); font-size:0.66rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--paper-faint); text-align:center;
}
@media (max-width:840px){.writer-grid{grid-template-columns:1fr;} .writer-portrait{max-width:320px;}}

/* ---------------- BOOK FEATURE (current + in progress) ---------------- */
.book-feature{background:var(--ink); color:var(--paper);}
.book-feature .section-head h2{color:var(--paper);}
.book-feature-grid{display:grid; grid-template-columns:0.85fr 1.3fr; gap:4.5rem; align-items:start;}
.book-feature-grid.reverse{grid-template-columns:1.3fr 0.85fr;}
.book-feature-grid.reverse .cover-slot{order:2;}
.cover-slot img{border:1px solid var(--line-dark); box-shadow:0 40px 70px -30px rgba(0,0,0,0.6);}
.cover-slot.placeholder{
  aspect-ratio:2/3; background:linear-gradient(150deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--paper-faint); text-align:center; padding:2rem;
}
.status-tag{
  display:inline-block; font-family:var(--sans); font-size:0.65rem; letter-spacing:0.18em;
  text-transform:uppercase; border:1px solid var(--accent-soft); color:var(--accent-soft);
  padding:0.35rem 0.8rem; margin-bottom:1.3rem;
}
.book-feature-text .kicker{font-style:italic; font-size:1.15rem; color:var(--paper-dim); margin-bottom:1.2rem;}
.book-feature-text h3{font-size:clamp(1.7rem,3.2vw,2.2rem); margin-bottom:1.2rem;}
.book-feature-text p{color:var(--paper-dim); margin-bottom:1.1rem; max-width:56ch;}
.meta-row{display:flex; gap:2.2rem; margin:1.8rem 0 2rem; flex-wrap:wrap;}
.meta-row div .eyebrow{margin-bottom:0.4rem;}
.meta-row div p{font-size:0.98rem; color:var(--paper);}
.btn-line{
  display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--sans); font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--paper); border-bottom:1px solid var(--accent-soft);
  padding-bottom:4px; transition:gap .25s ease, color .25s ease;
}
.btn-line:hover{gap:0.9rem; color:var(--accent-soft);}

/* ---------------- WORK AHEAD ---------------- */
.work-ahead{background:var(--paper);}
.ahead-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
.ahead-item{background:var(--paper); padding:2.2rem;}
.ahead-item p{color:var(--ink-3); font-size:0.98rem; opacity:0.85;}
.ahead-item .stage{font-family:var(--sans); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:0.7rem; display:block;}
@media (max-width:700px){.ahead-list{grid-template-columns:1fr;}}
.ahead-cta{margin-top:2.6rem;}

/* ---------------- PHILOSOPHY ---------------- */
.philosophy{background:var(--ink-2); color:var(--paper);}
.philosophy .section-head h2{color:var(--paper);}
.philosophy-body{max-width:680px;}
.philosophy-body p{color:var(--paper-dim); font-size:1.08rem; margin-bottom:1.3rem; max-width:64ch;}
.philosophy-body p.lede{font-style:italic; font-size:1.3rem; color:var(--paper); line-height:1.6;}

/* ---------------- ABOUT PREVIEW ---------------- */
.about-preview{background:var(--paper);}
.about-preview-inner{display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start;}
.bio-block h4{font-size:1.15rem; margin-bottom:0.9rem;}
.bio-block p{color:var(--ink-3); font-size:0.98rem; margin-bottom:1rem; max-width:50ch;}
@media (max-width:840px){.about-preview-inner{grid-template-columns:1fr; gap:2.5rem;}}

/* ---------------- PUBLISHERS & AGENTS ---------------- */
.pub-agents{background:var(--ink); color:var(--paper);}
.pub-agents .section-head h2{color:var(--paper);}
.pub-grid{display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start;}
.pub-text p{color:var(--paper-dim); margin-bottom:1.2rem; max-width:56ch;}
.rights-list{margin:1.6rem 0 2rem; padding-left:0;}
.rights-list li{
  display:flex; gap:0.9rem; padding:0.85rem 0; border-bottom:1px solid var(--line-dark);
  font-family:var(--sans); font-size:0.88rem; color:var(--paper-dim);
}
.rights-list li::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-soft); margin-top:0.5em; flex-shrink:0;}
.pack-card{
  border:1px solid var(--line-dark); padding:2.4rem; background:var(--ink-2);
}
.pack-card h4{font-size:1.25rem; margin-bottom:0.9rem;}
.pack-card p{color:var(--paper-dim); font-size:0.95rem; margin-bottom:1.6rem;}
.btn-solid{
  display:inline-block; font-family:var(--sans); font-size:0.72rem; letter-spacing:0.14em;
  text-transform:uppercase; background:var(--accent); color:var(--paper); padding:0.9rem 1.6rem;
  transition:background .25s ease;
}
.btn-solid:hover{background:var(--accent-soft);}
@media (max-width:840px){.pub-grid{grid-template-columns:1fr;}}

/* ---------------- PRESS ---------------- */
.press{background:var(--paper);}
.press-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
.press-item{background:var(--paper); padding:2.4rem 2rem;}
.press-item .eyebrow{margin-bottom:0.9rem;}
.press-item p{color:var(--ink-3); font-size:0.92rem; opacity:0.8;}
@media (max-width:840px){.press-grid{grid-template-columns:1fr;}}

/* ---------------- CONTACT ---------------- */
.contact{background:var(--ink-2); color:var(--paper);}
.contact .section-head h2{color:var(--paper);}
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:1rem;}
.contact-card{
  border:1px solid var(--line-dark); padding:2rem 1.6rem; transition:border-color .25s ease, transform .25s ease;
}
.contact-card:hover{border-color:var(--accent-soft); transform:translateY(-4px);}
.contact-card h4{font-size:1.05rem; margin-bottom:0.7rem;}
.contact-card p{color:var(--paper-faint); font-size:0.86rem; margin-bottom:1.3rem;}
.contact-card a.email-link{
  font-family:var(--sans); font-size:0.74rem; letter-spacing:0.06em; color:var(--accent-soft);
  border-bottom:1px solid transparent;
}
.contact-card a.email-link:hover{border-color:var(--accent-soft);}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.contact-grid{grid-template-columns:1fr;}}

/* ---------------- FOOTER ---------------- */
footer{
  background:var(--ink); color:var(--paper-faint); padding:2.8rem 2.5rem;
  border-top:1px solid var(--line-dark); font-family:var(--sans); font-size:0.72rem; letter-spacing:0.08em;
}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
footer a:hover{color:var(--paper);}

/* ---------------- INNER PAGE HERO (About / Book) ---------------- */
.page-hero{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color:var(--paper);
  padding:9.5rem 2.5rem 4.5rem;
}
.page-hero .eyebrow{color:var(--accent-soft);}

/* Dark-background sections need the lighter accent for AA contrast */
.book-feature .eyebrow,
.philosophy .eyebrow,
.pub-agents .eyebrow,
.contact .eyebrow,
.bio-versions .eyebrow,
.page-hero .eyebrow{color:var(--accent-soft);}

.page-hero h1{font-size:clamp(2.3rem,5vw,3.4rem); margin-top:0.9rem; max-width:820px;}
.page-hero p.dek{color:var(--paper-dim); margin-top:1.2rem; max-width:600px; font-size:1.05rem;}

/* ---------------- ESSAY (About page) ---------------- */
.essay{background:var(--paper); padding:5.5rem 0;}
.essay-inner{max-width:680px; margin:0 auto;}
.essay-inner p{font-size:1.08rem; color:var(--ink-2); margin-bottom:1.5rem;}
.essay-inner p.lede{font-size:1.3rem; font-style:italic; color:var(--ink);}
.essay-inner h3{margin:3rem 0 1.2rem; font-size:1.5rem;}

.bio-versions{background:var(--ink-2); color:var(--paper); padding:5.5rem 0;}
.bio-versions .section-head h2{color:var(--paper);}
.bio-cols{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem;}
.bio-cols .col h4{margin-bottom:1rem; font-size:1.1rem;}
.bio-cols .col p{color:var(--paper-dim); font-size:0.98rem; margin-bottom:1rem;}
@media (max-width:800px){.bio-cols{grid-template-columns:1fr; gap:2.5rem;}}

/* ---------------- BOOK PAGE ---------------- */
.book-detail{background:var(--paper);}
.book-detail-grid{display:grid; grid-template-columns:0.8fr 1.3fr; gap:5rem; align-items:start;}
.book-detail-grid img{border:1px solid var(--line-light); box-shadow:0 40px 70px -34px rgba(21,20,15,0.35);}
.book-detail-text p{color:var(--ink-3); margin-bottom:1.3rem; max-width:60ch;}
.theme-tags{display:flex; flex-wrap:wrap; gap:0.6rem; margin:1.6rem 0 2rem;}
.theme-tags span{
  font-family:var(--sans); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid var(--line-light); padding:0.4rem 0.8rem; color:var(--ink-3);
}
.authors-note{
  background:var(--ink); color:var(--paper); padding:2.4rem; margin-top:2.5rem; border-left:2px solid var(--accent);
}
.authors-note .eyebrow{margin-bottom:1rem;}
.authors-note p{color:var(--paper-dim); font-style:italic; font-size:1.05rem;}
@media (max-width:840px){.book-detail-grid{grid-template-columns:1fr;} .book-detail-grid img{max-width:320px;}}

@media (prefers-reduced-motion: reduce){
  .opening .statement, .opening .byline, .reveal{animation:none !important; opacity:1 !important; transform:none !important; transition:none !important;}
  .scroll-hint{animation:none !important;}
}