/* ============================================================
   PILLAR (silo hub) - editorial luxury layout
   Loaded only on posts using template-pillar.php
   ============================================================ */

.pillar{display:block}

/* ---------- HERO ---------- */
.pillar-hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;background:var(--emerald)}
.pillar-hero::before{content:"";position:absolute;inset:0;background-image:var(--hero);
  background-size:cover;background-position:center;transform:scale(1.04);
  animation:pillarZoom 20s cubic-bezier(.22,.5,.3,1) forwards;z-index:0}
@keyframes pillarZoom{from{transform:scale(1.12)}to{transform:scale(1.0)}}
.pillar-hero-grade{position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(120% 90% at 25% 30%, rgba(10,7,4,0) 0%, rgba(10,7,4,.25) 55%, rgba(10,7,4,.62) 100%),
    linear-gradient(180deg, rgba(12,9,6,.55) 0%, rgba(12,9,6,.12) 36%, rgba(22,38,59,.92) 100%)}
.pillar-hero-inner{position:relative;z-index:2;padding-top:160px;padding-bottom:54px;color:#f6efe2}
.pillar-hero-inner > *{animation:pillarRise .9s cubic-bezier(.2,.7,.2,1) both}

@keyframes pillarRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.pillar-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:'Lustria',serif;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:#e9dccb;margin-bottom:26px}
.pillar-crumbs a{color:#e9dccb;transition:.25s;border-bottom:1px solid transparent}
.pillar-crumbs a:first-child{color:var(--butterscotch)}
.pillar-crumbs a:hover{color:#fff;border-bottom-color:currentColor}
.pillar-crumbs span{opacity:.5}
.pillar-crumbs em{font-style:normal;opacity:.7}

.pillar-script{display:block;font-family:'Monsieur La Doulaise',cursive;color:var(--butterscotch);
  font-size:clamp(44px,7vw,86px);line-height:.8;margin-bottom:6px;text-shadow:0 10px 40px rgba(0,0,0,.45)}
.pillar-hero h1{font-family:'Lustria',serif;font-weight:400;color:#fff;
  font-size:clamp(34px,5.6vw,74px);line-height:1.02;letter-spacing:-.012em;max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.4);margin:0}
.pillar-lede{font-size:clamp(17px,1.7vw,21px);line-height:1.65;color:#f1e8dc;max-width:620px;
  margin:24px 0 0;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.pillar-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.pillar-hero-cta .btn{color:#fff;border-color:#fff}
.pillar-hero-cta .btn:hover{background:#fff;color:var(--ink)}
.pillar-hero-cta .btn-accent{border-color:var(--pomegranate);background:var(--pomegranate)}
.pillar-hero-cta .btn-accent:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff}
/* ---------- INTRO (article first paragraph, under hero) ---------- */
.pillar-intro{background:var(--cream);padding:70px 0 6px}
.pillar-intro-inner{max-width:840px;margin:0 auto}
.pillar-intro .pillar-intro-inner p{font-family:'Lustria',serif;font-size:clamp(19px,1.9vw,25px);
  line-height:1.62;color:var(--ink);margin:0;letter-spacing:-.003em}
.pillar-intro .pillar-intro-inner p strong{font-weight:700;color:var(--ink)}
.pillar-intro .pillar-intro-inner p a{color:var(--accent);border-bottom:1px solid rgba(172,35,25,.35)}

/* ---------- THE COMPLETE GUIDE ---------- */
.pillar-guide{background:var(--cream);padding:96px 0 100px}
.pillar-guide-head{max-width:760px;margin:0 auto 54px;text-align:center}
.pillar-guide-head .eyebrow{display:block;margin-bottom:14px}
.pillar-guide-head h2{font-size:clamp(30px,4.4vw,54px);color:var(--ink);line-height:1.05;letter-spacing:-.012em}
.pillar-count{display:block;font-family:'Monsieur La Doulaise',cursive;color:var(--accent);
  font-size:clamp(26px,3vw,40px);line-height:1;margin-top:6px}
.pillar-guide-head p{color:var(--muted);font-size:17.5px;line-height:1.7;margin-top:16px}
.pillar-guide-head p a{color:var(--accent);border-bottom:1px solid rgba(172,35,25,.35)}

.pillar-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-soft);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .5s ease}
.pcard:hover{transform:translateY(-10px);box-shadow:var(--shadow-lift);border-color:rgba(172,35,25,.32)}
.pcard-img{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;
  filter:var(--img-grade);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard-img{transform:scale(1.07)}
.pcard-no{position:absolute;top:14px;left:16px;z-index:2;font-family:'Lustria',serif;font-size:13px;
  font-weight:700;letter-spacing:.1em;color:#fff;background:rgba(161,7,33,.92);padding:6px 11px;border-radius:var(--r-pill);
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.pcard-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.pcard-title{font-family:'Lustria',serif;font-size:20px;line-height:1.22;color:var(--ink);letter-spacing:-.005em}
.pcard-ex{font-size:14px;line-height:1.62;color:var(--muted);margin-top:10px;flex:1}
.pcard-go{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent);
  margin-top:18px;transition:.3s}
.pcard:hover .pcard-go{letter-spacing:.26em}

/* ---------- ARTICLE BODY ---------- */
.pillar-body{background:var(--cream);padding:0 0 96px}
.pillar-article{max-width:840px;margin:0 auto}
.pillar-article > h2:first-child,.pillar-article > p:first-child,.pillar-article > .pillar-inline-figure:first-child{margin-top:0}

/* full in-content image - breaks out wider than the reading column for impact */
.pillar-article .pillar-inline-figure{margin:10px 0 38px;width:114%;margin-left:-7%}
.pillar-article .pillar-inline-figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);filter:var(--img-grade)}
.pillar-article .pillar-inline-figure figcaption{margin-top:13px;text-align:center;font-size:13.5px;
  font-style:italic;color:var(--muted);letter-spacing:.01em}
@media(max-width:980px){
  .pillar-article .pillar-inline-figure{width:100%;margin-left:0}
}

/* ---------- VIDEO ---------- */
.pillar-video{background:var(--emerald);padding:90px 0;position:relative;overflow:hidden}
.pillar-video::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, #f6efe2 1px, transparent 0);background-size:26px 26px}
.pillar-video-head{text-align:center;margin-bottom:40px;position:relative}
.pillar-video-head .eyebrow{display:block;margin-bottom:12px;color:var(--butterscotch)}
.pillar-video-head h2{color:#fff;font-size:clamp(28px,3.8vw,46px);line-height:1.06}
.pillar-video-frame{position:relative;max-width:960px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(246,239,226,.16)}
.pillar-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- CTA (with staff portrait) ---------- */
.pillar-cta{position:relative;overflow:hidden;background:var(--footer)}
.pillar-cta::before{content:"";position:absolute;inset:0;background-image:var(--cta);background-size:cover;
  background-position:center;filter:var(--img-grade) brightness(.4);transform:scale(1.03)}
.pillar-cta-grade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,20,16,.74),rgba(22,38,59,.84))}
.pillar-cta-inner{position:relative;z-index:2;padding:96px 0 100px;color:#f6efe2;
  display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:64px;align-items:center}

/* framed, arched staff portrait - tighter crop onto the subject so the
   busy office background recedes and the portrait sits well in the arch */
.pillar-cta-photo{position:relative;justify-self:center;max-width:330px;width:100%}
.pillar-cta-frame{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:165px 165px var(--r-lg) var(--r-lg);border:1px solid rgba(246,239,226,.28);
  box-shadow:0 34px 80px rgba(0,0,0,.55)}
.pillar-cta-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 14%;transform:scale(1.32);transform-origin:50% 16%}
/* vignette: fade the bright office background into the dark CTA so the
   portrait blends into the arch and the wall/ceiling lines disappear */
.pillar-cta-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg, rgba(14,16,20,.66) 0%, rgba(14,16,20,.22) 20%, rgba(14,16,20,0) 40%, rgba(14,16,20,0) 78%, rgba(14,16,20,.34) 100%);
  box-shadow:inset 0 0 70px 14px rgba(14,16,20,.4)}
/* slim gold halo tracing the full arch (symmetric, not a stray edge line) */
.pillar-cta-photo::before{content:"";position:absolute;inset:-12px;z-index:-1;
  border:1px solid var(--butterscotch);opacity:.42;border-radius:177px 177px calc(var(--r-lg) + 12px) calc(var(--r-lg) + 12px)}
.pillar-cta-badge{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);white-space:nowrap;
  display:inline-flex;align-items:center;gap:9px;background:var(--paper);color:var(--ink);
  font-family:'Lustria',serif;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  padding:11px 21px;border-radius:var(--r-pill);box-shadow:var(--shadow-lift)}
.pillar-cta-badge i{width:8px;height:8px;border-radius:50%;background:#1faf5a;animation:ctaPulse 2.2s infinite}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(31,175,90,.55)}70%{box-shadow:0 0 0 9px rgba(31,175,90,0)}100%{box-shadow:0 0 0 0 rgba(31,175,90,0)}}

.pillar-cta-text{text-align:left;max-width:600px}
.pillar-cta-text .script{display:block;color:var(--butterscotch);margin-bottom:4px}
.pillar-cta-text h2{color:#fff;font-size:clamp(30px,4.2vw,56px);line-height:1.04;letter-spacing:-.014em;margin-bottom:18px}
.pillar-cta-text p{font-size:clamp(16px,1.6vw,19px);line-height:1.7;color:#f1e8dc;margin:0}
.pillar-cta-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.pillar-cta-btns .btn-accent{border-color:var(--pomegranate);background:var(--pomegranate);color:#fff}
.pillar-cta-btns .btn-accent:hover{background:var(--terracotta);border-color:var(--terracotta)}
.pillar-cta-ghost{color:#fff;border-color:rgba(246,239,226,.6)}
.pillar-cta-ghost:hover{background:#fff;color:var(--ink)}
.pillar-cta-back{margin-top:26px!important;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:#e2d6c6!important}
.pillar-cta-back a{color:var(--butterscotch);border-bottom:1px solid currentColor}

/* ---------- reveal (uses .in from main.js IntersectionObserver) ---------- */
.pillar .reveal{opacity:0;transform:translateY(30px);transition:.9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.pillar .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .pillar-hero{min-height:78vh}
  .pillar-cta-inner{grid-template-columns:1fr;gap:54px;text-align:center}
  .pillar-cta-photo{max-width:300px}
  .pillar-cta-text{text-align:center;margin:0 auto}
  .pillar-cta-btns{justify-content:center}
  .pillar-cta-back{text-align:center}
}
@media(max-width:600px){
  .pillar-hero-inner{padding-top:120px}
  .pillar-intro{padding:48px 0 4px}
  .pillar-guide{padding:64px 0 70px}
  .pillar-video{padding:60px 0}
  .pillar-cta-inner{padding:72px 0 78px;gap:48px}
  .pillar-cta-photo{max-width:260px}
  .pillar-cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .pillar-hero::before{animation:none}
  .pillar .reveal{opacity:1;transform:none}
}