/*
Theme Name: The Sacred Imprint
Theme URI: https://thesacredimprint.com
Author: Gary Molander
Description: Custom blog theme for The Sacred Imprint — dark editorial layout with gold accents, full-bleed gold essay and subscribe bands, and a fingerprint mark. Built from the approved Direction 2b design.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sacred-imprint
*/

:root{
  --bg:#16130f; --fg:#ece3d4; --accent:#c0623a; --muted:#8d8472; --line:#332d24;
  --gold:#c0623a; --gold-dark:#9e4d2c; --gold-light:#d4825c; --essay-ink:#2a160f;
  --band:450px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:'Archivo',sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 36px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* MASTHEAD */
.masthead{padding:40px 0 22px;background:var(--bg)}
.mast-row{display:flex;align-items:center;justify-content:space-between}
.mast-row .left,.mast-row .right{flex:1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mast-row .right{text-align:right}
.logo{display:flex;align-items:center;gap:12px;justify-content:center}
.logo .mark{height:24px;width:auto;display:block}
.logo .name{font-family:'Fraunces',serif;font-weight:900;font-size:30px;letter-spacing:-.01em;text-transform:uppercase;color:var(--fg)}
.subnav{padding:14px 0 40px;background:var(--bg)}
.subnav .menu{display:flex;gap:36px;justify-content:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;list-style:none}
.subnav .menu a{color:#ffffff}
.subnav a:hover{color:var(--accent)}
/* Dropdown (Essays) */
.subnav .menu li{position:relative}
.subnav .menu li.has-sub > a::after{content:" \25BE";font-size:10px;opacity:.65}
.subnav .menu .submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--line);padding:8px 0;min-width:190px;display:none;z-index:60;list-style:none}
.subnav .menu li.has-sub:hover .submenu{display:block}
.subnav .menu .submenu li{display:block}
.subnav .menu .submenu a{display:block;padding:10px 22px;white-space:nowrap;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg);font-weight:600}
.subnav .menu .submenu a:hover{color:var(--accent)}

/* HERO */
.hero{position:relative;text-align:center;padding:104px 0 92px;overflow:visible}
.hero .fp{position:absolute;top:-40%;left:50%;transform:translate(-50%,-50%);width:820px;max-width:92vw;opacity:.16;pointer-events:none}
.hero .eyebrow{position:relative;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:30px}
.hero h1{position:relative;font-family:'Fraunces',serif;font-weight:900;font-size:74px;line-height:.98;letter-spacing:-.02em;max-width:960px;margin:0 auto;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:500;color:var(--accent)}
.hero .dek{position:relative;font-size:21px;max-width:760px;margin:32px auto 0;color:#e7ddcd;text-wrap:balance}
.hero .dek em{font-style:italic;color:var(--accent)}
.hero .cta{position:relative;display:inline-block;margin-top:40px;background:var(--accent);color:#16130f;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:13px;padding:17px 40px;border:2px solid var(--accent);transition:.2s}
.hero .cta:hover{background:transparent;color:var(--accent)}
.hero .byline{position:relative;margin-top:26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ESSAY BAND — full-bleed gold, three shades, dark ink */
.grid{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
/* fingerprint motif bleeds down from the hero into the top of the gold posts */
.grid::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:820px;max-width:92vw;height:420px;background:url('assets/fingerprint.png') no-repeat center top;background-size:contain;mix-blend-mode:multiply;opacity:.18;pointer-events:none;z-index:2}
.cell{padding:40px;min-height:var(--band);display:flex;flex-direction:column;justify-content:flex-start;position:relative;z-index:1}
.cell:nth-child(1){background:var(--gold)}
.cell:nth-child(2){background:var(--gold-dark)}
.cell:nth-child(3){background:var(--gold-light)}
.cell .num{font-family:'Fraunces',serif;font-weight:900;font-size:15px;color:#f7f0e7;margin-bottom:18px}
.cell .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,240,231,.72);margin-bottom:10px}
.cell h3{font-family:'Fraunces',serif;font-weight:600;font-size:29px;line-height:1.08;margin-bottom:14px;color:#f9f3ea;min-height:2.16em}
.cell h3 a:hover{color:#2a160f}
.cell p{font-size:15.5px;color:rgba(247,240,231,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.8em}
.cell .date{margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,240,231,.66)}

/* QUOTE BELT */
.belt{background:var(--bg);color:var(--fg);text-align:center;padding:48px 36px;min-height:var(--band);display:flex;flex-direction:column;align-items:center;justify-content:center}
.belt h2{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:38px;line-height:1.3;max-width:940px;margin:0 auto;text-wrap:balance}
.belt .gm{font-family:'Fraunces',serif;font-weight:900;font-size:22px;letter-spacing:.04em;margin-top:26px;text-transform:uppercase;color:var(--accent)}

/* SUBSCRIBE — gold band */
.sub{background:var(--gold);padding:48px 36px;text-align:center;min-height:var(--band);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sub .eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,240,231,.72);font-weight:700;margin-bottom:14px}
.sub h2{font-family:'Fraunces',serif;font-weight:900;font-size:46px;line-height:1.05;margin-bottom:14px;letter-spacing:-.01em;color:#f9f3ea;max-width:760px;text-wrap:balance}
.sub p{color:rgba(247,240,231,.85);max-width:440px;margin:0 auto 28px}
.field{display:flex;max-width:460px;margin:0 auto;width:100%}
.field input{flex:1;border:2px solid #f7f0e7;border-right:0;padding:16px;font-family:inherit;font-size:16px;outline:none;background:transparent;color:#f7f0e7}
.field input::placeholder{color:rgba(247,240,231,.6)}
.field button{border:2px solid #2a160f;background:#2a160f;color:#f7f0e7;padding:0 30px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;cursor:pointer}

/* FOOTER */
.site-footer{border-top:3px solid var(--fg);text-align:center;padding:34px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--bg)}

/* POST LISTS + SINGLE (blog pages) */
.page-head{text-align:center;padding:80px 0 10px}
.page-head h1{font-family:'Fraunces',serif;font-weight:900;font-size:54px;letter-spacing:-.02em}
.post-list{padding:50px 0 70px}
.post-item{border-bottom:1px solid var(--line);padding:34px 0}
.post-item .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.post-item h2{font-family:'Fraunces',serif;font-weight:600;font-size:34px;line-height:1.1;margin-bottom:12px}
.post-item h2 a:hover{color:var(--accent)}
.post-item .meta{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.post-item p{color:#c3baa8;max-width:720px}
.post-item .more{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;font-size:14px;letter-spacing:.04em}
/* SINGLE POST — light reading page (warm white, gold + black). Scoped to article.single so it never hits body.single */
article.single{background:#fbf8f1;color:#241f17;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:74px 0 96px}
.single-inner{max-width:740px;margin:0 auto;padding:0 28px}
.single .cat{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9e4d2c;font-weight:700;margin-bottom:16px;text-align:center}
.single h1{font-family:'Fraunces',serif;font-weight:900;font-size:52px;line-height:1.04;letter-spacing:-.02em;text-align:center;color:#16130f;margin-bottom:18px}
.single .meta{text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a7f6e;margin-bottom:46px}
.single .content{font-size:20px;line-height:1.85;color:#241f17}
.single .content p{margin:0 0 24px}
.single .content a{color:#9e4d2c;text-decoration:underline}
/* de-bold inline bold in body + lists */
.single .content p strong,.single .content p b,.single .content li strong,.single .content li b{font-weight:400}
/* section titles: same Fraunces, +30% */
.single .content h2,.single .content h3{font-family:'Fraunces',serif;font-weight:600;color:#16130f;font-size:40px;line-height:1.12;margin:50px 0 16px}
/* bullets stay inside the left margin */
.single .content ul,.single .content ol{margin:20px 0;padding-left:1.25em}
.single .content li{margin:8px 0;padding-left:4px}
/* CALLOUT (pop text): body sans, larger + heavier, gold bar */
.single .content blockquote{margin:46px 0;padding:2px 0 2px 26px;border-left:5px solid var(--gold)}
.single .content blockquote h4,.single .content blockquote p,.single .content blockquote strong,.single .content blockquote em{font-family:'Archivo',sans-serif;font-style:normal;font-weight:800;font-size:26px;line-height:1.35;color:#16130f;margin:0}
/* SCRIPTURE / QUOTE: distinct serif-italic tinted block (add class "scripture" to the blockquote) */
.single .content blockquote.scripture{border-left:4px solid var(--gold);background:#f5e9df;border-radius:0 6px 6px 0;padding:24px 30px;margin:42px 0}
.single .content blockquote.scripture,.single .content blockquote.scripture *{font-family:'Fraunces',serif!important;font-style:italic!important;font-weight:400!important;font-size:22px!important;line-height:1.55!important;color:#3a3024!important}
.single .content blockquote.scripture cite,.single .content blockquote.scripture .ref{display:block!important;margin-top:12px!important;font-family:'Archivo',sans-serif!important;font-style:normal!important;font-weight:700!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#9e4d2c!important}
.pager{max-width:740px;margin:0 auto;padding:34px 28px 0;display:flex;justify-content:space-between;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#9e4d2c}

@media(max-width:820px){
  .hero h1{font-size:46px}
  .grid{grid-template-columns:1fr}
  .mast-row{flex-direction:column;gap:12px}
  .page-head h1,.single h1{font-size:36px}
}