/* ==========================================================
   STAY AWHILE / THE BLOG, THE INDEX
   Stay Awhile design system, taken from the live site: Proxima
   Nova uppercase headings at weight 400 with open tracking, the
   accent gold #B89535 for labels and rules, champagne #DBCA9A on
   dark, ink #181818, slate #54595F text, canvas #F9F8F8, square
   corners. Same markup as the Home Base build.
   ========================================================== */

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

.phj.phj-journal{
  --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);
  --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.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}

.phj.phj-journal a:focus-visible{ outline:none; box-shadow:var(--focus); }

/* ==========================================================
   1. HERO
   The site header (80px, transparent at the top) sits over it.
   ========================================================== */
.phj-journal .phj-hero{ position:relative; overflow:hidden; background:var(--black); color:var(--paper); text-align:center;
  min-height:clamp(540px,72vh,760px); display:flex; align-items:center; justify-content:center;
  padding:clamp(140px,13vw,176px) clamp(22px,5vw,48px) clamp(70px,8vw,108px); }
.phj-journal .phj-hero .bg{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.phj-journal .phj-hero::after{ content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(17,17,17,.42) 0%, rgba(17,17,17,0) 100%),
    linear-gradient(to bottom, rgba(17,17,17,.66) 0%, rgba(17,17,17,.40) 42%, rgba(17,17,17,.70) 100%); }
.phj-journal .phj-hero .inner{ position:relative; z-index:2; max-width:960px; margin:0 auto; }
.phj-journal .phj-hero .eyebrow{ display:inline-flex; align-items:center; gap:18px; font-family:var(--sans); text-transform:uppercase;
  letter-spacing:.3em; font-size:12px; font-weight:600; color:var(--champagne); }
.phj-journal .phj-hero .eyebrow::before,.phj-journal .phj-hero .eyebrow::after{ content:''; width:46px; height:1px; background:rgba(219,202,154,.7); }
.phj-journal .phj-hero h1{ font-family:var(--sans); color:var(--paper); font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(36px,4.6vw,64px); line-height:1.1 !important; margin:24px auto 22px; max-width:18em; text-wrap:balance; }
/* Same subtitle style as the previous /blog hero: 15px, 0.3px tracking,
   1.5 line height, silver #CCCCCC, about 692px wide. */
.phj-journal .phj-hero .sub{ font-family:var(--sans); font-weight:400; color:var(--silver);
  font-size:15px; letter-spacing:.3px; line-height:1.5; max-width:46em; margin:0 auto; }

@media (max-width:640px){
  .phj-journal .phj-hero{ min-height:0; padding:clamp(136px,36vw,150px) 22px 64px; }
  .phj-journal .phj-hero .eyebrow{ gap:12px; letter-spacing:.24em; font-size:11px; }
  .phj-journal .phj-hero .eyebrow::before,.phj-journal .phj-hero .eyebrow::after{ width:26px; }
  .phj-journal .phj-hero h1{ font-size:clamp(29px,8.2vw,38px); margin:20px auto 18px; }
}

/* ==========================================================
   2. THE CATEGORY BAR
   ========================================================== */
.phj-journal .phj-bar{ background:var(--paper); border-bottom:1px solid var(--line); }
.phj-journal .phj-bar .in{ max-width:1280px; margin:0 auto; padding:0 clamp(22px,5vw,64px);
  overflow-x:auto; scrollbar-width:none; }
.phj-journal .phj-bar .in::-webkit-scrollbar{ display:none; }
.phj-journal .phj-bar nav{ display:flex; align-items:center; gap:clamp(24px,3.6vw,52px); width:max-content; margin:0 auto; }
.phj-journal .phj-bar nav a{ display:flex; align-items:center; gap:9px; padding:22px 0 20px; white-space:nowrap;
  border-bottom:2px solid transparent; font-family:var(--sans); text-transform:uppercase; letter-spacing:.2em;
  font-size:12px; font-weight:600; color:var(--slate); transition:color .25s var(--ease-out), border-color .25s var(--ease-out); }
.phj-journal .phj-bar nav a .n{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--gold); }
.phj-journal .phj-bar nav a:hover{ color:var(--ink); }
.phj-journal .phj-bar nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--gold); }
@media (max-width:640px){
  .phj-journal .phj-bar .in{ overflow:visible; padding:6px 22px; }
  .phj-journal .phj-bar nav{ width:auto; flex-wrap:wrap; justify-content:center; column-gap:24px; row-gap:0; }
  .phj-journal .phj-bar nav a{ padding:12px 0 10px; letter-spacing:.16em; font-size:11px; }
}

/* ==========================================================
   3. THE STAGE
   ========================================================== */
.phj-journal .phj-sec{ background:var(--canvas); padding:clamp(56px,7vw,100px) clamp(22px,5vw,64px) clamp(36px,4vw,60px); }
.phj-journal .phj-head{ display:flex; align-items:center; gap:20px; max-width:1280px; margin:0 auto clamp(28px,3.2vw,44px); }
.phj-journal .phj-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-journal .phj-head .ln{ height:1px; flex:1; background:var(--line); }

.phj-journal .phj-xp{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.3fr .7fr;
  gap:clamp(32px,4.4vw,64px); align-items:stretch; }
.phj-journal .phj-stage{ position:relative; overflow:hidden; min-height:clamp(460px,44vw,600px);
  background:var(--black); isolation:isolate; }
.phj-journal .phj-fig{ position:absolute; inset:0; margin:0; background:var(--black); opacity:0;
  transition:opacity .7s var(--ease); pointer-events:none; }
.phj-journal .phj-fig.active{ opacity:1; pointer-events:auto; }
.phj-journal .phj-fig img{ width:100%; height:100%; max-width:none; object-fit:cover; transition:transform 1.2s var(--ease); }
.phj-journal .phj-fig.active:hover img{ transform:scale(1.03); }
.phj-journal .phj-fig::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(17,17,17,.92) 0%,rgba(17,17,17,.74) 38%,rgba(17,17,17,.3) 68%,rgba(17,17,17,.06) 100%); }
.phj-journal .phj-fig .cap{ position:absolute; left:clamp(24px,3.2vw,44px); right:clamp(24px,3.2vw,44px);
  bottom:clamp(26px,3.2vw,44px); z-index:2; color:var(--paper); }
.phj-journal .phj-fig .cap .kick{ display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em;
  font-size:11px; font-weight:600; color:var(--champagne); }
.phj-journal .phj-fig .cap .t{ display:block; font-family:var(--sans); color:var(--paper); font-weight:400; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(26px,2.5vw,36px); line-height:1.14; margin:14px 0 12px; max-width:22ch; text-wrap:balance; }
.phj-journal .phj-fig .cap .d{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
  color:rgba(255,255,255,.82); font-size:15.5px; line-height:1.65; max-width:54ch; }
.phj-journal .phj-fig .cap .lk{ display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600; color:var(--champagne);
  transition:gap .3s var(--ease-out); }
.phj-journal .phj-fig .cap .lk i{ width:7px; height:7px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); flex:none; }
.phj-journal .phj-fig.active:hover .cap .lk{ gap:14px; }

.phj-journal .phj-index{ border-top:1px solid var(--line); align-self:start; }
.phj-journal .phj-index li{ border-bottom:1px solid var(--line); }
.phj-journal .phj-index a{ display:flex; align-items:baseline; gap:16px; padding:clamp(14px,1.45vw,18px) 0 clamp(14px,1.45vw,18px) 2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-weight:400; text-transform:uppercase; letter-spacing:.05em;
  font-size:clamp(14px,1.12vw,15.5px); line-height:1.45 !important;
  color:var(--slate); transition:color .3s var(--ease-out), padding-left .3s var(--ease-out), border-color .3s var(--ease-out); }
.phj-journal .phj-index a .no{ font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--gold); flex:none;
  min-width:2.1em; font-variant-numeric:tabular-nums; }
.phj-journal .phj-index a:hover,.phj-journal .phj-index a:focus-visible,.phj-journal .phj-index a.active{ color:var(--ink); padding-left:14px; border-left-color:var(--gold); }
/* The latest story keeps its number: the flag sits on its own row above,
   the number and title share the row below, like every other item. */
.phj-journal .phj-index li.lead a{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:baseline;
  padding-top:clamp(16px,1.7vw,22px); padding-bottom:clamp(16px,1.7vw,22px); }
.phj-journal .phj-index li.lead .flag{ grid-column:1 / -1; display:flex; align-items:center; gap:12px; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.26em; font-size:11px; font-weight:600; color:var(--gold); }
.phj-journal .phj-index li.lead .flag .ln{ height:1px; width:26px; background:var(--gold); flex:none; }
.phj-journal .phj-index li.lead .t{ font-size:clamp(17px,1.5vw,21px); line-height:1.3; }
.phj-journal .phj-xp:has(.phj-index a:is(:hover,:focus-visible)) .phj-index a.active{ color:var(--slate); padding-left:2px; border-left-color:transparent; }
.phj-journal .phj-fig .cap .flag{ display:none; align-items:center; gap:12px; margin-bottom:12px;
  text-transform:uppercase; letter-spacing:.26em; font-size:11px; font-weight:600; color:var(--champagne); }
.phj-journal .phj-fig .cap .flag .ln{ height:1px; width:26px; background:var(--champagne); flex:none; }

.phj-journal .phj-empty{ max-width:1280px; margin:0 auto; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(22px,2.3vw,28px); color:var(--slate); padding:clamp(30px,4vw,54px) 0; }

/* ==========================================================
   4. PAGINATION
   ========================================================== */
.phj-journal .phj-pag{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  padding:clamp(34px,4.4vw,60px) clamp(22px,5vw,64px) clamp(80px,9vw,124px); background:var(--canvas); }
.phj-journal .phj-pag a,.phj-journal .phj-pag span{ display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 8px; border:1px solid transparent;
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--slate);
  transition:color .25s var(--ease-out), background-color .25s var(--ease-out), border-color .25s var(--ease-out); }
.phj-journal .phj-pag a:hover{ color:var(--ink); background:var(--paper); border-color:var(--silver); }
.phj-journal .phj-pag .cur{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.phj-journal .phj-pag .gap{ color:var(--muted); border:0; min-width:0; padding:0 2px; }
.phj-journal .phj-pag .nx{ height:auto; min-width:0; margin-left:16px; padding:0 0 4px; border:0;
  border-bottom:1px solid var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:12px;
  color:var(--ink); background:none; }
.phj-journal .phj-pag .nx:hover{ color:var(--gold); background:none; border-color:var(--gold); }

@media (prefers-reduced-motion:reduce){ .phj.phj-journal *{ transition:none !important; animation:none !important; } }

/* ---------- THE SWAP ---------- */
.phj-journal .phj-xp:has(.phj-index a:is(:hover,:focus-visible)) .phj-fig.active{ opacity:0; }
.phj-journal .phj-xp:has(li[data-i="0"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(1),.phj-journal .phj-xp:has(li[data-i="1"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(2),.phj-journal .phj-xp:has(li[data-i="2"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(3),.phj-journal .phj-xp:has(li[data-i="3"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(4),.phj-journal .phj-xp:has(li[data-i="4"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(5),.phj-journal .phj-xp:has(li[data-i="5"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(6),.phj-journal .phj-xp:has(li[data-i="6"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(7),.phj-journal .phj-xp:has(li[data-i="7"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(8),.phj-journal .phj-xp:has(li[data-i="8"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(9),.phj-journal .phj-xp:has(li[data-i="9"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(10),.phj-journal .phj-xp:has(li[data-i="10"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(11),.phj-journal .phj-xp:has(li[data-i="11"] a:is(:hover,:focus-visible)) .phj-stage .phj-fig:nth-child(12){ opacity:1; }

/* ---------- NARROW ---------- */
@media (max-width:860px){
  .phj-journal .phj-xp{ grid-template-columns:1fr; gap:0; }
  .phj-journal .phj-index{ display:none; }
  .phj-journal .phj-stage{ position:static; overflow:visible; min-height:0; height:auto; background:none;
    display:flex; flex-direction:column; gap:clamp(44px,9vw,60px); }
  .phj-journal .phj-fig{ position:relative; inset:auto; opacity:1; pointer-events:auto; background:none; }
  .phj-journal .phj-fig img{ height:64vw; max-height:440px; }
  .phj-journal .phj-fig.active:hover img{ transform:none; }
  .phj-journal .phj-fig::after{ display:none; }
  .phj-journal .phj-fig .cap{ position:static; display:block; color:var(--slate); padding:clamp(20px,5vw,26px) 0 0; }
  .phj-journal .phj-fig .cap .kick{ color:var(--gold); letter-spacing:.12em; font-size:10.5px; }
  .phj-journal .phj-fig .cap .t{ color:var(--ink); font-size:clamp(21px,5.6vw,27px); margin:12px 0 10px; }
  .phj-journal .phj-fig .cap .d{ color:var(--slate); max-width:none; font-size:15px; }
  .phj-journal .phj-fig .cap .flag{ display:flex; color:var(--gold); }
  .phj-journal .phj-fig .cap .flag .ln{ background:var(--gold); }
  .phj-journal .phj-fig .cap .lk{ margin-top:16px; color:var(--ink); border-bottom:1px solid var(--gold); padding-bottom:4px; }
}

/* ==========================================================
   5. THE HOST
   Lets the shortcode run edge to edge inside an Elementor page
   (container padding and width reset).
   ========================================================== */
.e-con:has(.phj-journal){ --content-width:100%;
  --padding-top:0px; --padding-bottom:0px; --padding-left:0px; --padding-right:0px; }
.elementor-widget:has(.phj-journal),.elementor-widget:has(.phj-journal) > .elementor-widget-container,.elementor-shortcode:has(.phj-journal){ width:100%; }