/* ==========================================================================
   Shared theme layer — unifies all secondary pages with the main site.
   Loaded AFTER each page's own <style>, so these rules win on source order.
   ========================================================================== */

/* Unified palette (matches Alesia Dundiak.dc.html) */
:root{
  --paper:#F1ECE3;
  --forest:#667056;
  --forest-deep:#4A5240;
  --clay:#C08A3E;
  --ink:#2B2B28;
  --tan:#E7E1D5;
  --line:rgba(58,74,63,0.18);
}

/* Unified type */
body{font-family:'Archivo',sans-serif;}
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:300;letter-spacing:-0.01em;color:var(--ink);}
section.technique h2,section.article h2{font-weight:400;}

/* Eyebrow accent → forest, to match the main site */
.eyebrow{color:var(--forest);}
.eyebrow::before,.eyebrow::after{background:var(--forest);}

/* ---- Identity lockup header ---- */
header{background:var(--paper);}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:400;}
.logo .logo-mark{width:34px;height:34px;flex:0 0 auto;}
.logo .logo-divider{width:1px;height:26px;background:var(--line);flex:0 0 auto;display:block;}
.logo .logo-textwrap{display:flex;flex-direction:column;line-height:1.15;}
.logo .logo-name{font-family:'Fraunces',serif;font-weight:500;font-size:1.15rem;letter-spacing:.02em;color:var(--ink);}
.logo .logo-cred{font-size:8px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#8a8577;margin-top:3px;white-space:nowrap;}
.back-link{color:var(--forest);font-weight:500;}
.back-link:hover{color:var(--forest-deep);}
@media(max-width:600px){.logo .logo-cred{display:none;}}

/* ---- Unified dark footer (tonal match to the main site) ---- */
footer{background:var(--ink);border-top:none;color:#a8a49b;}
footer p{color:#8c9a87;}
footer a{color:#aebaa9;}
footer a:hover{color:var(--paper);}
footer a.cta{background:var(--clay);color:var(--paper);}
footer a.cta:hover{background:#a9772f;color:var(--paper);}

/* ---- Calm scroll reveals (only once JS adds .reveal-ready) ---- */
body.reveal-ready [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
body.reveal-ready [data-reveal].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){body.reveal-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}}