/* ==========================================================
   STAY AWHILE / THE BLOG, THE SINGLE ENTRY
   Stay Awhile design system (see ph-index.css). Same markup as
   the Home Base build.
   ========================================================== */

/* ---------- BASE ---------- */
.phj.phj-post,.phj.phj-post *,.phj.phj-post *::before,.phj.phj-post *::after{ box-sizing:border-box; margin:0; padding:0; }
.phj.phj-post img{ display:block; max-width:100%; height:auto; }
.phj.phj-post a{ text-decoration:none; color:inherit; }
.phj.phj-post ul,.phj.phj-post ol{ list-style:none; }
.phj.phj-post h1,.phj.phj-post h2,.phj.phj-post h3,.phj.phj-post h4{ line-height:1.15 !important; font-weight:400; }

.phj.phj-post{
  --ink:#181818; --black:#111111; --charcoal:#373A3E; --slate:#54595F; --muted:#9E9E9E; --silver:#CCCCCC;
  --gold:#B89535; --champagne:#DBCA9A;
  --canvas:#F9F8F8; --paper:#FFFFFF; --line:#E5E5E0;
  --focus:0 0 0 2px var(--paper),0 0 0 4px var(--gold);
  --ease:cubic-bezier(.32,.08,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --head:80px;
  --sans:'Proxima Nova','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-family:var(--sans); color:var(--slate); background:var(--canvas);
  line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}
.phj.phj-post a:focus-visible,.phj.phj-post summary:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ==========================================================
   1. THE READING LINE
   Sits on the lower edge of the fixed site header.
   ========================================================== */
.phj-post .phj-prog{ position:fixed; left:0; right:0; top:var(--head); height:2px; z-index:1000; pointer-events:none; }
.phj-post .phj-prog i{ display:block; height:100%; background:var(--gold); transform:scaleX(0); transform-origin:0 50%; }

/* ==========================================================
   2. HERO
   The site header (80px, transparent at the top) sits over it.
   ========================================================== */
.phj-post .phj-phero{ position:relative; overflow:hidden; background:var(--black); color:var(--paper); text-align:center;
  min-height:clamp(560px,82vh,820px); display:flex; align-items:center; justify-content:center;
  padding:clamp(150px,14vw,190px) clamp(22px,5vw,48px) clamp(80px,8vw,112px); }
.phj-post .phj-phero .bg{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.phj-post .phj-phero::after{ content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 66% 56% at 50% 55%, rgba(17,17,17,.40) 0%, rgba(17,17,17,0) 100%),
    linear-gradient(to bottom, rgba(17,17,17,.66) 0%, rgba(17,17,17,.38) 40%, rgba(17,17,17,.62) 100%); }
.phj-post .phj-phero .back{ position:absolute; z-index:3; top:calc(80px + clamp(22px,2.6vw,34px)); left:clamp(22px,5.5vw,80px);
  display:inline-flex; align-items:center; gap:12px; font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:11.5px; font-weight:600; color:var(--paper); opacity:.88;
  transition:opacity .3s var(--ease-out), gap .3s var(--ease-out); }
.phj-post .phj-phero .back:hover{ opacity:1; gap:16px; }
.phj-post .phj-phero .back i{ width:7px; height:7px; flex:none; border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
.phj-post .phj-phero .inner{ position:relative; z-index:2; max-width:1040px; margin:0 auto; }
.phj-post .phj-phero .kick{ display:inline-flex; align-items:center; gap:18px; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.24em; font-size:11.5px; font-weight:600; color:var(--champagne); }
.phj-post .phj-phero .kick::before,.phj-post .phj-phero .kick::after{ content:''; width:46px; height:1px; background:rgba(219,202,154,.7); flex:none; }
.phj-post .phj-phero h1{ font-family:var(--sans); color:var(--paper); font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(36px,4.4vw,60px); line-height:1.1 !important; margin:24px auto 0; max-width:20ch; text-wrap:balance; }

@media (max-width:640px){
  .phj-post .phj-phero{ min-height:clamp(520px,86vh,640px); padding:150px 22px 64px; }
  .phj-post .phj-phero .back{ top:calc(83px + 18px); left:22px; }
  .phj-post .phj-phero .kick{ display:block; letter-spacing:.12em; font-size:10.5px; line-height:1.9; text-wrap:balance; }
  .phj-post .phj-phero .kick::before,.phj-post .phj-phero .kick::after{ display:none; }
  .phj-post .phj-phero h1{ font-size:clamp(28px,8vw,36px); margin-top:18px; }
}

/* ==========================================================
   3. THE ARTICLE
   ========================================================== */
.phj-post .phj-art{ background:var(--canvas); padding:clamp(56px,7vw,100px) clamp(22px,5vw,64px) clamp(48px,6vw,84px); }
.phj-post .phj-wrap{ display:grid; grid-template-columns:1fr minmax(0,68ch) 1fr;
  gap:clamp(28px,3.6vw,60px); align-items:start; }
.phj-post .phj-body{ grid-column:2; max-width:68ch; margin-inline:auto; font-size:18px; line-height:1.8; color:var(--slate); }
.phj-post .phj-body > *:first-child{ margin-top:0; }
.phj-post .phj-body p{ margin:0 0 1.35em; }
.phj-post .phj-body > p:first-of-type{ font-size:20px; line-height:1.72; color:var(--charcoal); }
.phj-post .phj-body h2{ position:relative; font-family:var(--sans); color:var(--ink); font-weight:400; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(25px,2.4vw,32px); line-height:1.2 !important; margin:2.2em 0 .75em; padding-top:26px;
  scroll-margin-top:calc(var(--head) + 30px); }
.phj-post .phj-body h2::before{ content:''; position:absolute; top:0; left:0; width:40px; height:2px; background:var(--gold); }
.phj-post .phj-body h3{ font-family:var(--sans); color:var(--ink); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:16.5px; line-height:1.4 !important; margin:2em 0 .6em;
  scroll-margin-top:calc(var(--head) + 30px); }
.phj-post .phj-body h4{ font-family:var(--sans); color:var(--ink); font-weight:600; font-size:18px; margin:1.6em 0 .5em; }
.phj-post .phj-body a{ color:var(--ink); border-bottom:1px solid var(--gold);
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out); }
.phj-post .phj-body a:hover{ color:var(--gold); }
.phj-post .phj-body strong,.phj-post .phj-body b{ font-weight:600; color:var(--ink); }
.phj-post .phj-body em{ font-style:italic; }
.phj-post .phj-body ul,.phj-post .phj-body ol{ margin:0 0 1.4em; padding-left:0; }
.phj-post .phj-body li{ position:relative; padding-left:26px; margin-bottom:.55em; }
.phj-post .phj-body ul li::before{ content:''; position:absolute; left:3px; top:.74em;
  width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }
.phj-post .phj-body ol{ counter-reset:phjol; }
.phj-post .phj-body ol li{ counter-increment:phjol; }
.phj-post .phj-body ol li::before{ content:counter(phjol,decimal-leading-zero); position:absolute; left:0; top:.2em;
  font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--gold); }
.phj-post .phj-body blockquote{ margin:2em 0; padding:4px 0 4px clamp(20px,3vw,32px); border-left:2px solid var(--gold); }
.phj-post .phj-body blockquote p{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink);
  font-size:clamp(23px,2.4vw,29px); line-height:1.4; margin-bottom:.5em; }
.phj-post .phj-body blockquote cite{ display:block; font-style:normal; text-transform:uppercase;
  letter-spacing:.2em; font-size:11px; font-weight:600; color:var(--gold); }
.phj-post .phj-body img{ width:100%; }
.phj-post .phj-body figure{ margin:2.2em 0; }
.phj-post .phj-body p > img{ margin:2.2em 0; }
.phj-post .phj-body figcaption{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.phj-post .phj-body hr{ border:0; height:1px; background:var(--line); margin:2.6em 0; }
.phj-post .phj-body table{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:15.5px; }
.phj-post .phj-body th,.phj-post .phj-body td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); }
.phj-post .phj-body th{ font-weight:600; color:var(--ink); background:var(--paper); }

/* ==========================================================
   4. THE CONTENTS
   ========================================================== */
.phj-post .phj-toc{ grid-column:1; justify-self:end; width:100%; max-width:230px;
  position:sticky; top:calc(var(--head) + 36px); max-height:calc(100vh - var(--head) - 72px);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.phj-post .phj-toc .eyebrow{ display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.26em;
  font-size:11.5px; font-weight:600; color:var(--gold); padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:8px; }
.phj-post .phj-toc ol{ counter-reset:phjtoc; border-left:1px solid var(--line); }
.phj-post .phj-toc li{ counter-increment:phjtoc; }
.phj-post .phj-toc li.sub{ counter-increment:none; }
.phj-post .phj-toc a{ display:block; position:relative; margin-left:-1px;
  border-left:2px solid transparent; padding:9px 0 9px 16px;
  font-size:14px; line-height:1.45; color:var(--slate);
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out); }
.phj-post .phj-toc a::before{ content:counter(phjtoc,decimal-leading-zero) '  ';
  font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--gold); }
.phj-post .phj-toc li.sub a{ padding-left:30px; font-size:13px; }
.phj-post .phj-toc li.sub a::before{ content:''; position:absolute; left:17px; top:1.1em;
  width:4px; height:4px; background:var(--silver); transform:rotate(45deg); }
.phj-post .phj-toc a:hover{ color:var(--ink); }
.phj-post .phj-toc a.active{ color:var(--ink); font-weight:600; border-left-color:var(--gold); }
.phj-post .phj-toc li.sub a.active::before{ background:var(--gold); }

.phj-post .phj-toc-s{ display:none; grid-column:1; margin:0 0 clamp(32px,4vw,46px);
  background:var(--paper); border:1px solid var(--line); padding:0 20px; }
.phj-post .phj-toc-s summary{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  cursor:pointer; list-style:none; padding:17px 0;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.24em; font-size:11.5px; font-weight:600; color:var(--ink); }
.phj-post .phj-toc-s summary::-webkit-details-marker{ display:none; }
.phj-post .phj-toc-s summary i{ width:8px; height:8px; flex:none; border-right:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold); transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease-out); }
.phj-post .phj-toc-s[open] summary i{ transform:rotate(225deg) translateY(2px); }
.phj-post .phj-toc-s ol{ counter-reset:phjtoc; padding:6px 0 16px; border-top:1px solid var(--line); }
.phj-post .phj-toc-s li{ counter-increment:phjtoc; }
.phj-post .phj-toc-s li.sub{ counter-increment:none; }
.phj-post .phj-toc-s a{ display:block; padding:9px 0 9px 2px; font-size:15px; line-height:1.45; color:var(--slate); }
.phj-post .phj-toc-s a::before{ content:counter(phjtoc,decimal-leading-zero) '  ';
  font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--gold); }
.phj-post .phj-toc-s li.sub a{ padding-left:26px; font-size:14px; }
.phj-post .phj-toc-s li.sub a::before{ content:'\00B7  '; color:var(--gold); }

@media (max-width:640px){
  .phj-post .phj-body{ font-size:16.5px; line-height:1.78; }
  .phj-post .phj-body > p:first-of-type{ font-size:18px; line-height:1.7; }
  .phj-post .phj-body h2{ font-size:23px; }
  .phj-post .phj-body h3{ font-size:15px; }
  .phj-post .phj-body blockquote{ margin:1.6em 0; }
  .phj-post .phj-toc-s a{ font-size:14.5px; }
  .phj-post .phj-toc-s li.sub a{ font-size:13.5px; }
}

@media (max-width:1180px){
  .phj-post .phj-wrap{ grid-template-columns:minmax(0,1fr); }
  .phj-post .phj-toc{ display:none; }
  .phj-post .phj-toc-s{ display:block; font-size:18px; max-width:68ch; width:100%; justify-self:center; }
  .phj-post .phj-body{ grid-column:1; }
}

/* ==========================================================
   5. THE FOOT
   ========================================================== */
.phj-post .phj-foot{ background:var(--canvas); padding:0 clamp(22px,5vw,64px) clamp(80px,9vw,124px); }
.phj-post .phj-foot .rule{ display:flex; align-items:center; justify-content:center; gap:18px;
  max-width:1280px; margin:0 auto clamp(40px,4.6vw,64px); }
.phj-post .phj-foot .rule .ln{ height:1px; flex:1; background:var(--line); }
.phj-post .phj-foot .rule .dia{ width:8px; height:8px; flex:none; background:var(--gold); transform:rotate(45deg); }
.phj-post .phj-foot .head{ display:flex; align-items:center; gap:20px; max-width:1280px; margin:0 auto clamp(24px,2.8vw,38px); }
.phj-post .phj-foot .head .eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.3em; font-size:12px;
  font-weight:600; color:var(--gold); white-space:nowrap; }
.phj-post .phj-foot .head .ln{ height:1px; flex:1; background:var(--line); }

.phj-post .phj-more{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px);
  max-width:1280px; margin:0 auto; }
.phj-post .phj-more a{ display:block; }
.phj-post .phj-more .ph{ overflow:hidden; background:var(--line); }
.phj-post .phj-more .ph img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .8s var(--ease); }
.phj-post .phj-more a:hover .ph img{ transform:scale(1.04); }
.phj-post .phj-more .cat{ display:block; margin-top:20px; text-transform:uppercase; letter-spacing:.24em;
  font-size:11px; font-weight:600; color:var(--gold); }
.phj-post .phj-more h3{ font-family:var(--sans); color:var(--ink); font-weight:400; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(17px,1.5vw,20px); line-height:1.3 !important; margin:10px 0 0; transition:color .25s var(--ease-out); }
.phj-post .phj-more a:hover h3{ color:var(--gold); }
.phj-post .phj-more .meta{ display:block; margin-top:10px; text-transform:uppercase; letter-spacing:.16em;
  font-size:11px; font-weight:600; color:var(--muted); }
@media (max-width:820px){ .phj-post .phj-more{ grid-template-columns:1fr 1fr; } .phj-post .phj-more a:nth-child(3){ display:none; } }
@media (max-width:560px){ .phj-post .phj-more{ grid-template-columns:1fr; gap:40px; } .phj-post .phj-more a:nth-child(3){ display:block; } }

.phj-post .phj-back{ display:flex; justify-content:center; max-width:1280px; margin:clamp(48px,5.4vw,72px) auto 0; }
.phj-post .phj-back a{ display:inline-flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.22em;
  font-size:12px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:5px;
  transition:gap .3s var(--ease-out), color .25s var(--ease-out); }
.phj-post .phj-back a i{ width:7px; height:7px; flex:none; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); }
.phj-post .phj-back a:hover{ gap:16px; color:var(--gold); }

/* ==========================================================
   6. THE HOST
   Lets the shortcode run edge to edge inside an Elementor single
   template (container padding and width reset).
   ========================================================== */
.e-con:has(.phj-post){ --content-width:100%;
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; }
.elementor-location-single:has(.phj-post) > .e-con:not(:has(.elementor-widget)){ display:none; }
.elementor-widget:has(.phj-post),.elementor-widget:has(.phj-post) > .elementor-widget-container,.elementor-shortcode:has(.phj-post){ width:100%; }
:root:has(.phj-post){ scroll-behavior:smooth; }

@media (prefers-reduced-motion:reduce){
  :root:has(.phj-post){ scroll-behavior:auto; }
  .phj.phj-post *{ transition:none !important; animation:none !important; }
}