/* ============================================================
   williampickrel.com — house stylesheet (light)
   Palette and typefaces matched to unseentruth.org and
   unseentruthbooks.com so a reader crossing between the three
   sites is never handed to a stranger.
   ============================================================ */

:root{
  --stone:#EDE8DC;        /* warm paper background */
  --stone-2:#E3DACA;      /* banded / lifted section */
  --stone-3:#F6F2E9;      /* lightest, card face */
  --ink:#221E19;          /* body text, near-black brown */
  --ink-soft:#5C5348;     /* secondary text */
  --gold:#9C7A34;         /* deepened gold, readable on light */
  --gold-lt:#C9A567;      /* the old gold — dark ground only */
  --rose:#9B4038;         /* the crimson, deepened for light */
  --sage:#5F6D5C;
  --line:rgba(34,30,25,.14);
  --shadow:0 22px 44px -22px rgba(34,30,25,.5);
  --measure:62ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:'Crimson Pro',Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.14}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* --- grounds ---------------------------------------------- */
.shell{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.g-1{background:var(--stone-3);border-top:1px solid var(--line)}
.g-2{background:var(--stone);border-top:1px solid var(--line)}
.g-3{background:var(--stone-2);border-top:1px solid var(--line)}
.pad{padding-block:clamp(52px,7.5vw,96px)}
.pad-s{padding-block:clamp(38px,5vw,60px)}

h1{font-size:clamp(2.3rem,5.8vw,4rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.25rem,2.3vw,1.62rem)}
.lede{font-size:clamp(1.04rem,1.6vw,1.18rem);color:var(--ink-soft);max-width:var(--measure)}

/* --- buttons ---------------------------------------------- */
.btn{
  font-family:'Crimson Pro',serif;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  display:inline-block;padding:14px 26px;text-decoration:none;
  border:1.5px solid transparent;border-radius:2px;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn-buy{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-buy:hover{background:#7E6128;border-color:#7E6128}
.btn-line{background:transparent;color:var(--ink);border-color:rgba(34,30,25,.28)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* --- masthead --------------------------------------------- */
.top{background:var(--stone-3);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40}
.top .shell{display:flex;align-items:baseline;gap:clamp(14px,4vw,40px);
  padding-block:18px;flex-wrap:wrap}
.wordmark{font-family:'Cormorant Garamond',serif;font-size:1.3rem;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.wordmark span{color:var(--gold)}
.top nav{margin-left:auto;display:flex;gap:clamp(15px,3vw,28px);flex-wrap:wrap}
.top nav a{font-size:.94rem;color:var(--ink-soft);text-decoration:none;padding-block:4px}
.top nav a:hover{color:var(--rose)}
.top nav a[aria-current]{color:var(--gold)}

/* --- the spotlight ---------------------------------------- */
.spot-grid{display:grid;grid-template-columns:minmax(0,290px) 1fr;
  gap:clamp(28px,5vw,64px);align-items:center}
.spot-cover{position:relative}
.spot-cover img{width:100%;box-shadow:var(--shadow)}
.ribbon{
  position:absolute;top:0;left:0;z-index:2;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--rose);color:#fff;padding:6px 13px;
  box-shadow:0 6px 14px -7px rgba(34,30,25,.7);
}
.rank{
  display:inline-block;font-size:clamp(14px,1.5vw,17px);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.25;
  color:#fff;background:var(--rose);
  padding:10px 18px;border-radius:2px;margin-bottom:22px;
}
.spot h1{margin-bottom:14px}
.spot .hook{font-size:clamp(1.08rem,1.8vw,1.28rem);color:var(--ink-soft);max-width:52ch;margin-bottom:10px}
.spot .meta{font-size:.92rem;color:var(--ink-soft);opacity:.85;margin-bottom:26px}

/* --- praise ----------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  gap:clamp(22px,3vw,38px);margin-top:38px}
.quote{background:var(--stone-3);border:1px solid var(--line);
  border-top:3px solid var(--gold-lt);padding:26px 24px}
.g-1 .quote{background:var(--stone)}
.quote p{font-family:'Cormorant Garamond',serif;font-size:1.24rem;line-height:1.34;
  color:var(--ink);margin-bottom:12px}
.quote cite{font-style:normal;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);display:block}
.stars{color:var(--gold);font-size:.82rem;letter-spacing:.14em;margin-bottom:10px;display:block}

/* --- three panels ----------------------------------------- */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));
  gap:clamp(26px,4vw,52px);margin-top:40px}
.panel{border-top:2px solid var(--gold);padding-top:18px}
.panel h3{margin-bottom:12px}
.panel p{color:var(--ink-soft);font-size:1rem}

/* --- shelf ------------------------------------------------- */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:clamp(30px,4vw,52px);margin-top:44px;align-items:start}
.bookcard{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:start}
.bookcard img{width:100%;box-shadow:0 14px 28px -16px rgba(34,30,25,.55)}
.bookcard h3{margin-bottom:6px}
.byline{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--rose);margin-bottom:12px}
.bookcard p{color:var(--ink-soft);font-size:.98rem;margin-bottom:14px}
.buy{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.buy:hover{color:var(--rose)}

/* --- family cards ------------------------------------------ */
.people{display:grid;gap:clamp(38px,6vw,68px);margin-top:46px}
.person{display:grid;grid-template-columns:minmax(0,228px) 1fr;
  gap:clamp(24px,4vw,52px);align-items:center}
.person img{width:100%;box-shadow:var(--shadow)}
.person .who{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rose);margin-bottom:8px}
.person h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:10px}
.person .tag{font-family:'Cormorant Garamond',serif;font-size:1.24rem;line-height:1.34;
  color:var(--ink);margin-bottom:16px;max-width:46ch}
.person p{color:var(--ink-soft)}
.person:nth-child(even){direction:rtl}
.person:nth-child(even) > *{direction:ltr}

/* --- the series block -------------------------------------- */
.series{display:grid;grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(28px,5vw,60px);align-items:center;margin-top:40px}
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.stack img{box-shadow:0 14px 26px -14px rgba(34,30,25,.55)}
.stack img:nth-child(1),.stack img:nth-child(3){transform:translateY(14px)}
.seal-row{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.seal-row img{width:64px;flex:0 0 auto}
.seal-row div{font-size:.9rem;line-height:1.5;color:var(--ink-soft)}

/* --- join --------------------------------------------------- */
.join{text-align:center}
.join .lede{margin-left:auto;margin-right:auto}
.join form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.join input{font-size:1rem;font-family:inherit;padding:14px 16px;min-width:248px;
  background:#fff;border:1px solid var(--line);border-radius:2px;color:var(--ink)}
.join input:focus{outline:none;border-color:var(--gold)}
.micro{font-size:.82rem;color:var(--ink-soft);opacity:.8;margin-top:16px}
.thanks{font-style:italic;color:var(--rose)}

/* --- footer -------------------------------------------------- */
footer{background:var(--ink);color:var(--stone);padding-block:44px}
footer .shell{display:grid;gap:14px}
footer a{color:rgba(237,232,220,.8);text-decoration:none}
footer a:hover{color:var(--gold-lt)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:.94rem}
.fine{font-size:.84rem;line-height:1.62;color:rgba(237,232,220,.55)}

.divider{border:0;border-top:1px solid var(--line);margin:0}

/* --- narrow --------------------------------------------------- */
@media(max-width:820px){
  .spot-grid{grid-template-columns:1fr;justify-items:start}
  .spot-cover{max-width:228px}
  .series{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .person img{max-width:208px}
  .person:nth-child(even){direction:ltr}
}
@media(max-width:560px){
  .bookcard{grid-template-columns:94px 1fr;gap:16px}
  .top{position:static}
  .top .shell{gap:10px}
  .top nav{gap:15px;width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- exit-intent gift box (matches the .org) ----------------- */
.gift-ov{position:fixed;inset:0;z-index:90;background:rgba(34,30,25,.62);
  display:none;align-items:center;justify-content:center;padding:20px}
.gift-ov.on{display:flex}
.gift{position:relative;max-width:840px;width:100%;display:grid;grid-template-columns:.8fr 1.2fr;
  background:var(--stone-3);border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(34,30,25,.6)}
.gift-art{background:var(--stone-2);display:flex;align-items:center;justify-content:center;padding:32px}
.gift-art img{width:100%;max-width:196px;box-shadow:0 22px 44px -18px rgba(34,30,25,.6)}
.gift-body{padding:clamp(28px,4vw,44px)}
.gift-body h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;margin-bottom:14px}
.gift-body h2 em{font-style:italic;color:var(--rose)}
.gift-body p{color:var(--ink-soft);font-size:1rem;margin-bottom:19px}
.gift-body form{display:flex;flex-direction:column;gap:11px}
.gift-body input{background:#fff;border:1px solid var(--line);color:var(--ink);
  font-family:inherit;font-size:16px;padding:15px 17px;border-radius:2px}
.gift-body input:focus{outline:none;border-color:var(--gold)}
.gift-close{position:absolute;top:9px;right:12px;background:none;border:0;
  color:var(--ink-soft);font-size:30px;line-height:1;cursor:pointer;padding:4px 8px}
.gift-close:hover{color:var(--rose)}
.gift-micro{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin-top:13px}
@media(max-width:700px){.gift{grid-template-columns:1fr}.gift-art{display:none}}