/* =========================================================
   CHRONICLER 2026 GLOBAL SYSTEM (ASTRA) — CLEAN v1.2
   Purpose:
   - Single consolidated global stylesheet
   - Museum-grade parchment + bronze
   - Stable hero system (per-page hero images via CSS var)
   - One reveal animation definition (no duplicates)
   - No overlay-div blend modes (removed)
   - Compatible with Astra + WPCode JS layer
   ========================================================= */


/* -------------------------------
   0) Astra layout alignment
-------------------------------- */
.ast-container{
  max-width:1120px;
  margin-left:auto;
  margin-right:auto;
}

/* Soft parchment tone refinement */
body{
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(154,122,73,.12), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,0,0,.05), transparent 60%),
    #f6f1e8;
}


/* -------------------------------
   1) Tokens / design system
-------------------------------- */
:root{
  --ink:#1f1b16;
  --charcoal:#2a2520;
  --bronze:#8b6f47;
  --bronze2:#a8895e;
  --paper:#f7f3ea;
  --paper2:#f1eadc;
  --edge:rgba(31,27,22,.14);
  --edge2:rgba(31,27,22,.09);
  --shadow: 0 20px 60px rgba(0,0,0,.14);
  --shadow2: 0 10px 25px rgba(0,0,0,.10);
  --radius:22px;
  --radius2:16px;
  --max:1120px;
}


/* -------------------------------
   2) Astra button polish (keep)
-------------------------------- */
.ast-button,
.wp-block-button__link{
  border-radius:16px !important;
  font-weight:600;
  transition: all .22s ease;
}
.ast-button:hover,
.wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}


/* -------------------------------
   3) Legacy helper styles (kept)
-------------------------------- */
.chronicler-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(31,27,24,.12);
  border-radius: var(--radius,22px);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}
.chronicler-strip{
  border: 1px solid rgba(31,27,24,.15);
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,.50);
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
}
.chronicler-section{
  padding: 80px 0;
}


/* -------------------------------
   4) Reveal animation (single copy)
-------------------------------- */
[data-reveal]{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.revealed{
  opacity:1 !important;
  transform: translateY(0) !important;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}


/* -------------------------------
   5) CHRONICLER 2026 COMPONENTS
-------------------------------- */

/* Base wrapper */
.ch-wrap{
  background: linear-gradient(180deg, var(--paper), var(--paper2));
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
}
.ch-container{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px);
}

/* Utility */
.ch-overline{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--bronze);
}
.ch-h1{
  font-size: clamp(2.1rem, 3.2vw, 3.1rem);
  line-height:1.12;
  margin:.35rem 0 .7rem;
  font-weight:520;
}
.ch-sub{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: rgba(31,27,22,.84);
  font-size: clamp(1rem, 1.1vw, 1.08rem);
  max-width: 70ch;
}
.ch-divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(139,111,71,.55), transparent);
  margin: clamp(20px, 3vw, 34px) 0;
}

/* HERO (per-page image var)
   Set inline on hero element: --ch-hero-img: url('IMAGE_URL');
*/
.ch-hero{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid var(--edge2);
  background:
    radial-gradient(1200px 600px at 20% 15%, rgba(139,111,71,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 30%, rgba(31,27,22,.18), transparent 60%),
    var(--ch-hero-img, none);
  background-size: cover;
  background-position: center;
}
.ch-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(247,243,234,.92) 0%,
    rgba(247,243,234,.76) 42%,
    rgba(247,243,234,.18) 100%);
}
.ch-hero-inner{
  position:relative;
  z-index:2;
  padding: clamp(28px, 4vw, 56px);
  display:grid;
  gap: 18px;
}
.ch-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 10px;
}

/* Buttons (Chronicler buttons) */
.ch-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 600;
  border:1px solid rgba(139,111,71,.45);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}
.ch-btn-primary{
  background: linear-gradient(180deg, rgba(139,111,71,.95), rgba(109,84,52,.95));
  color: #fff !important;
  box-shadow: var(--shadow2);
}
.ch-btn-primary:hover{ transform: translateY(-1px); }
.ch-btn-ghost{
  background: rgba(247,243,234,.72);
  color: var(--charcoal) !important;
}
.ch-btn-ghost:hover{ transform: translateY(-1px); }


/* Sections */
.ch-section{ padding: clamp(18px, 2.8vw, 34px) 0; }
.ch-title{
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  margin: 0 0 10px;
  font-weight: 560;
}
.ch-lede{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: rgba(31,27,22,.82);
  margin: 0;
  max-width: 78ch;
}

/* Cards */
.ch-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .ch-grid{ grid-template-columns: 1fr; }
}
.ch-card{
  border-radius: var(--radius);
  padding: 18px;
  background:
    radial-gradient(500px 220px at 30% 10%, rgba(139,111,71,.14), transparent 60%),
    rgba(247,243,234,.70);
  border: 1px solid var(--edge2);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.ch-card h3{ margin:0 0 8px; font-size: 1.18rem; }
.ch-card p{ margin:0 0 14px; color: rgba(31,27,22,.84); }
.ch-mini{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: .88rem;
  color: rgba(31,27,22,.76);
}

/* Path selector */
.ch-path{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .ch-path{ grid-template-columns: 1fr; }
}
.ch-panel{
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(247,243,234,.72);
  border: 1px solid var(--edge2);
}
.ch-path-list{ display:grid; gap: 10px; }
.ch-path-item{
  border-radius: 18px;
  padding: 14px;
  border:1px solid var(--edge2);
  background: rgba(255,255,255,.35);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ch-path-item:hover{ transform: translateY(-1px); border-color: rgba(139,111,71,.45); }
.ch-path-item[aria-selected="true"]{
  border-color: rgba(139,111,71,.72);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.ch-path-detail b{
  display:block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--charcoal);
}

/* Artifact rail */
.ch-rail{
  display:flex;
  gap: 12px;
  overflow:auto;
  padding-bottom: 6px;
  margin-top: 14px;
  -webkit-overflow-scrolling: touch;
}
.ch-art{
  min-width: 220px;
  max-width: 260px;
  border-radius: 18px;
  border:1px solid var(--edge2);
  background: rgba(247,243,234,.75);
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.ch-art img{ width:100%; height: 140px; object-fit:cover; display:block; }
.ch-art div{ padding: 12px; }

/* Accordion */
.ch-acc{
  border-radius: var(--radius);
  border:1px solid var(--edge2);
  overflow:hidden;
  margin-top: 14px;
  background: rgba(247,243,234,.75);
}
.ch-acc button{
  width:100%;
  text-align:left;
  padding: 14px;
  background: transparent;
  border:0;
  border-top:1px solid var(--edge2);
  cursor:pointer;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 700;
  color: var(--charcoal);
}
.ch-acc button:first-child{ border-top:0; }
.ch-acc .ch-acc-panel{
  display:none;
  padding: 0 14px 14px;
  color: rgba(31,27,22,.86);
}

/* Steps */
.ch-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .ch-steps{ grid-template-columns: 1fr; }
}
.ch-step{
  border-radius: 18px;
  border:1px solid var(--edge2);
  background: rgba(255,255,255,.25);
  padding: 14px;
}
.ch-step b{
  display:block;
  color: var(--bronze);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  letter-spacing:.14em;
  text-transform: uppercase;
  font-size:.76rem;
}
.ch-step h4{ margin: 6px 0 6px; font-size: 1.04rem; }
.ch-step p{ margin: 0; color: rgba(31,27,22,.84); }

/* CTA */
.ch-cta{
  border-radius: var(--radius);
  padding: 22px;
  border:1px solid rgba(139,111,71,.30);
  background:
    radial-gradient(800px 260px at 20% 10%, rgba(139,111,71,.14), transparent 60%),
    rgba(247,243,234,.78);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Focus */
.ch-btn:focus-visible,
.ch-acc button:focus-visible,
.ch-path-item:focus-visible{
  outline: 3px solid rgba(139,111,71,.35);
  outline-offset: 2px;
}

/* Chronicler Editorial Placard */

.ch-placard{
display:inline-block;
font-family: Georgia, "Times New Roman", serif;
font-size:0.9rem;
letter-spacing:.16em;
text-transform:uppercase;
color:#8a6a3e;
background:linear-gradient(
to right,
rgba(138,106,62,.12),
rgba(138,106,62,.05)
);
border-left:3px solid #8a6a3e;
padding:10px 16px;
margin-bottom:14px;
}

/* --- Hero Cinematic Depth Layer --- */

.ch-hero::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(31,27,22,.28) 0%,
rgba(31,27,22,.18) 35%,
rgba(31,27,22,.10) 60%,
rgba(31,27,22,.22) 100%
);
mix-blend-mode:multiply;
pointer-events:none;
}

/* --- Proof Tiles v2 (more realistic + prevents awkward wrap) --- */
.ch-proof{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

/* Tablet: 2 columns */
@media (max-width: 900px){
  .ch-proof{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small phones: 1 column (prevents ugly label wrapping) */
@media (max-width: 560px){
  .ch-proof{ grid-template-columns: 1fr; }
}

.ch-proof-item{
  border-radius: 18px;
  padding: 14px 14px;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(139,111,71,.12), transparent 60%),
    rgba(247,243,234,.78);
  border: 1px solid rgba(31,27,22,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
  min-height: 76px;

  /* “placard edge” */
  border-left: 3px solid rgba(139,111,71,.55);
}

.ch-proof-item::before{
  content:"";
  position:absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(139,111,71,.55);
  box-shadow: 0 0 0 4px rgba(139,111,71,.12);
}

.ch-proof-item b{
  display:block;
  color: var(--charcoal, #2a2520);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: .92rem;
  line-height: 1.1;
  margin-bottom: 6px;

  /* Keep labels clean; they can wrap if truly needed, but won’t “stutter” */
  word-break: normal;
  overflow-wrap: normal;
}

.ch-proof-item span{
  display:block;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: .90rem;
  color: rgba(31,27,22,.78);
  line-height: 1.25;
}

/* =========================   CHRONICLER 2026 SYSTEM (SCOPED)   ========================= */.chronicler-2026 {  font-family: Georgia, serif;  background: #f5f1e6;  color: #2b2b2b;}.chronicler-2026 .hero-bg {  position: relative;  height: 70vh;  overflow: hidden;}.chronicler-2026 .hero-bg img {  width: 100%;  height: 100%;  object-fit: cover;  filter: brightness(0.6);}.chronicler-2026 .overlay {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  text-align: center;  color: #fff;}.chronicler-2026 .overlay h1 {  font-size: 2.6rem;}.chronicler-2026 .overlay p {  color: #d4af37;}.chronicler-2026 .seal-divider {  text-align: center;  margin: 40px 0;}.chronicler-2026 .seal-divider img {  width: 120px;}.chronicler-2026 .article-body,.chronicler-2026 .content {  max-width: 900px;  margin: auto;  padding: 20px;}.chronicler-2026 .section {  margin: 40px 0;}.chronicler-2026 .pull-quote {  border-left: 4px solid #c9a55c;  padding-left: 15px;  font-weight: bold;}.chronicler-2026 .artifact-panel {  background: #fff8e1;  padding: 25px;  margin: 40px 0;  border-left: 6px solid #c9a55c;}.chronicler-2026 .artifact-panel.gold {  background: #fdf6e3;}.chronicler-2026 .grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));  gap: 20px;}.chronicler-2026 .card {  background: #fff;  padding: 20px;  border-radius: 8px;}.chronicler-2026 .cta-block {  text-align: center;  padding: 60px 20px;}.chronicler-2026 .cta-block a {  background: #c9a55c;  color: #fff;  padding: 14px 24px;  text-decoration: none;  border-radius: 6px;}

.parlor-system {  max-width: 1200px;  margin: auto;  padding: 60px 20px;}.parlor-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  gap: 30px;}.parlor-card {  background: #fff;  border-radius: 10px;  overflow: hidden;}.parlor-card img {  width: 100%;}.reveal {  opacity: 0;  transform: translateY(40px);}.reveal.active {  opacity: 1;  transform: translateY(0);  transition: 0.6s;}