/*
Theme Name: Kenneth Longfield
Theme URI: https://kennethlongfield.com
Author: Kenneth Longfield
Description: Theme sur mesure pour le site d'auteur Kenneth Longfield. Palette pierre sombre, accents bleu egyptien et or, typographies Fraunces, Literata et JetBrains Mono. Inclut un type de contenu Roman pour gerer la bibliographie depuis l'admin.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kenneth-longfield
*/

:root{
  --stone-black:#18140F;
  --stone-panel:#221C15;
  --stone-panel-2:#2B241B;
  --limestone:#EAE2D2;
  --limestone-dim:#9F9581;
  --limestone-faint:#726A5A;
  --egyptian-blue:#3A6E9E;
  --egyptian-blue-bright:#5C93C7;
  --verdigris:#6B9179;
  --gold-leaf:#B08C4F;
  --line:#3A3226;
  --radius:2px;
}

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

body{
  margin:0;
  background:var(--stone-black);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(58,110,158,0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(176,140,79,0.05), transparent 55%);
  color:var(--limestone);
  font-family:'Literata', Georgia, serif !important;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--egyptian-blue-bright);}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--egyptian-blue-bright);
  outline-offset:3px;
}
img{ max-width:100%; height:auto; display:block; }

.eyebrow{
  font-family:'JetBrains Mono', monospace !important;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--limestone-faint);
}

.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px;}

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(24,20,15,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px; max-width:1080px; margin:0 auto;
}
.brand{
  font-family:'Fraunces', serif !important;
  font-size:19px;
  letter-spacing:0.01em;
  color:var(--limestone);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.brand .mark{ width:16px; height:16px; flex:none; }

/* Menu WordPress natif */
.main-nav ul{
  display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0;
}
.main-nav li{ position:relative; }
.main-nav a{
  font-family:'JetBrains Mono', monospace !important;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--limestone-dim); text-decoration:none;
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a{
  color:var(--limestone); border-color:var(--gold-leaf);
}
.main-nav ul ul{
  position:absolute; top:100%; left:0; margin-top:14px; z-index:30;
  background:var(--stone-panel); border:1px solid var(--line); border-radius:var(--radius);
  min-width:230px; padding:8px 0; flex-direction:column; gap:0;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav ul ul a{
  display:block; padding:11px 18px;
  text-transform:none; letter-spacing:0.02em;
}
@media (max-width:640px){ .main-nav{ display:none; } }

/* ---------- signature line motif ---------- */
.plumbline{ display:block; width:100%; height:auto; }
.plumbline path, .plumbline line, .plumbline circle{
  stroke:var(--gold-leaf); stroke-width:1; fill:none; vector-effect:non-scaling-stroke;
}
.plumbline .draw{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:draw 1.8s ease forwards; animation-delay:.2s;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.divider{ margin:0 auto; max-width:1080px; padding:0 32px; }

/* ---------- hero (home) ---------- */
.hero{ padding:0 0 60px; position:relative; }
.hero-banner{ width:100%; display:block; border-bottom:1px solid var(--line); }
.hero-sub{ padding:48px 0 0; }
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

/* ---------- interior page hero ---------- */
.page-hero{ padding:76px 0 56px; border-bottom:1px solid var(--line); }
.page-hero .eyebrow{ margin-bottom:20px; }
.page-hero h1{
  font-family:'Fraunces', serif !important; font-weight:500;
  font-size:clamp(34px, 5vw, 54px); line-height:1.1;
  margin:0 0 20px; max-width:16ch; color:var(--limestone);
}
.page-hero h1 em{ font-style:italic; font-weight:400; color:var(--gold-leaf); }
.page-hero p.lede{ font-size:18px; line-height:1.7; max-width:56ch; color:var(--limestone-dim); margin:0; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace !important; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--limestone-faint); text-decoration:none; margin-bottom:28px;
}
.back-link:hover{ color:var(--gold-leaf); }
.back-link svg{ width:12px; height:12px; }

/* ---------- buttons ---------- */
.btn{
  font-family:'JetBrains Mono', monospace !important;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; padding:14px 26px; border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:10px; border:none; cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{ background:var(--gold-leaf); color:var(--stone-black); border:1px solid var(--gold-leaf); }
.btn-primary:hover{ transform:translateY(-1px); background:#c29a5c; color:var(--stone-black); }
.btn-ghost{ color:var(--limestone-dim); border:1px solid var(--line); background:none; }
.btn-ghost:hover{ border-color:var(--limestone-faint); color:var(--limestone); }

/* ---------- section shell ---------- */
section.block{ padding:90px 0; }
.section-head{ margin-bottom:56px; max-width:60ch; }
.section-head .eyebrow{ margin-bottom:16px; }
.section-head h2{
  font-family:'Fraunces', serif !important; font-weight:500;
  font-size:clamp(28px, 3.4vw, 38px); margin:0 0 18px; color:var(--limestone);
}
.section-head p{ color:var(--limestone-dim); font-size:17px; margin:0; }

/* ---------- universe pillars ---------- */
.universe{ background:var(--stone-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pillars{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
@media (max-width:700px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ background:var(--stone-black); padding:36px; }
.pillar .eyebrow{ margin-bottom:14px; }
.pillar h3{ font-family:'Fraunces', serif !important; font-weight:500; font-size:21px; margin:0 0 12px; color:var(--limestone); }
.pillar p{ color:var(--limestone-dim); margin:0; font-size:15.5px; }

/* ---------- books list ---------- */
.books-list{ display:flex; flex-direction:column; }
.book-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:32px; align-items:start;
  padding:44px 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit; position:relative;
}
.books-list .book-row:last-child, .other-roman .book-row{ border-bottom:1px solid var(--line); }
.book-row:hover .book-title{ color:var(--gold-leaf); }
.book-row:hover .stele{ border-color:var(--gold-leaf); transform:translateY(-2px); }
.book-num{ font-family:'Fraunces', serif !important; font-style:italic; font-size:34px; color:var(--limestone-faint); line-height:1; padding-top:4px; }
.book-body .status{
  font-family:'JetBrains Mono', monospace !important; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--verdigris); margin-bottom:12px; display:block;
}
.book-title{
  font-family:'Fraunces', serif !important; font-weight:500; font-size:clamp(24px, 3vw, 32px);
  color:var(--limestone); margin:0 0 14px; transition:color .25s ease;
}
.book-desc{ color:var(--limestone-dim); font-size:16px; max-width:56ch; margin:0; }
.stele{
  width:64px; height:96px; border:1px solid var(--line); border-radius:2px;
  overflow:hidden; align-self:center; flex:none;
  transition:border-color .25s ease, transform .25s ease;
}
.stele img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:640px){
  .book-row{ grid-template-columns:40px 1fr; }
  .stele{ display:none; }
  .book-num{ font-size:26px; }
}

/* ---------- roman single ---------- */
.roman-meta{ display:flex; gap:28px; flex-wrap:wrap; margin-top:28px; }
.roman-meta .item{ font-family:'JetBrains Mono', monospace !important; font-size:11px; letter-spacing:0.06em; color:var(--limestone-faint); text-transform:uppercase; }
.roman-meta .item span{ display:block; color:var(--limestone-dim); font-family:'Literata', serif !important; font-size:14.5px; text-transform:none; letter-spacing:0; margin-top:6px; }

.roman-body{ display:grid; grid-template-columns:1fr 300px; gap:64px; }
@media (max-width:820px){ .roman-body{ grid-template-columns:1fr; } }
.roman-body .synopsis p{ color:var(--limestone-dim); margin:0 0 20px; font-size:17px; }
.roman-body .synopsis p:last-child{ margin-bottom:0; }
.roman-body .synopsis blockquote{
  border-left:2px solid var(--gold-leaf); padding:4px 0 4px 28px; margin:36px 0;
}
.roman-body .synopsis blockquote p{
  font-family:'Fraunces', serif !important; font-style:italic; font-weight:400;
  font-size:20px; line-height:1.55; color:var(--limestone); margin:0;
}

.roman-cover{
  width:100%; aspect-ratio:2/3; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--stone-panel); display:flex; align-items:center; justify-content:center;
  margin-bottom:28px; overflow:hidden;
}
.roman-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.roman-cover-placeholder{ text-align:center; padding:24px; }
.roman-side .btn{ width:100%; justify-content:center; margin-bottom:12px; }

.other-roman{ margin-top:90px; padding-top:56px; border-top:1px solid var(--line); }
.other-roman .eyebrow{ margin-bottom:20px; }

/* ---------- author ---------- */
.author-grid{ display:grid; grid-template-columns:280px 1fr; gap:64px; align-items:start; }
@media (max-width:700px){ .author-grid{ grid-template-columns:1fr; } }
.author-mark{
  width:100%; aspect-ratio:3/4; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--stone-panel);
}
.author-photo{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(15%) contrast(1.02); }
.author-text p{ color:var(--limestone-dim); margin:0 0 18px; font-size:17px; }
.author-text a{ color:var(--egyptian-blue-bright); }

.method-list{ margin-top:56px; }
.method-item{ display:grid; grid-template-columns:120px 1fr; gap:32px; padding:28px 0; border-top:1px solid var(--line); }
.method-list .method-item:last-child{ border-bottom:1px solid var(--line); }
@media (max-width:640px){ .method-item{ grid-template-columns:1fr; gap:10px; } }
.method-item p{ margin:0; color:var(--limestone-dim); }
.method-item strong{ color:var(--limestone); font-weight:500; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-block{ padding:32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--stone-panel); }
.contact-block + .contact-block{ margin-top:24px; }
.contact-block .eyebrow{ margin-bottom:14px; }
.contact-block h3{ font-family:'Fraunces', serif !important; font-weight:500; font-size:22px; margin:0 0 12px; color:var(--limestone); }
.contact-block p{ color:var(--limestone-dim); margin:0 0 18px; font-size:15.5px; }

/* ---------- cta / footer ---------- */
.cta{ background:var(--stone-panel-2); border-top:1px solid var(--line); }
.cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.cta h2{ font-family:'Fraunces', serif !important; font-weight:500; font-size:28px; margin:0 0 8px; color:var(--limestone); }
.cta p{ margin:0; color:var(--limestone-dim); }

footer.site-footer{ padding:48px 0 60px; border-top:1px solid var(--line); }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.footer-links{ display:flex; gap:24px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.footer-links a{ font-family:'JetBrains Mono', monospace !important; font-size:12px; letter-spacing:0.06em; color:var(--limestone-faint); text-decoration:none; }
.footer-links a:hover{ color:var(--limestone-dim); }
footer .copy{ font-family:'JetBrains Mono', monospace !important; font-size:11px; color:var(--limestone-faint); }

.social-links{ display:flex; gap:14px; align-items:center; }
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--line); border-radius:50%;
  color:var(--limestone-faint); text-decoration:none;
  transition:color .2s ease, border-color .2s ease;
}
.social-links a:hover{ color:var(--gold-leaf); border-color:var(--gold-leaf); }

/* ---------- basic content fallback (page.php default) ---------- */
.entry-content{ color:var(--limestone-dim); font-size:17px; }
.entry-content h1, .entry-content h2, .entry-content h3{ font-family:'Fraunces', serif !important; color:var(--limestone); font-weight:500; }
.entry-content a{ color:var(--egyptian-blue-bright); }