/* ==========================================================
   POLO HOUSE / THE JOURNAL, THE INDEX
   Generated from stage.src.html. Do not edit.
   ========================================================== */

/* ---------- 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.16 !important; font-weight:500; }
.phj.phj-journal h2,.phj.phj-journal h3,.phj.phj-journal h4{ text-transform:none !important; }

.phj.phj-journal{
  --blue:#111D2D;
  --brass:#C9A24B;
  --bronze-ink:#8A6D2B;
  --tan:#C7A56A;
  --ivory:#F4EFE6;
  --ivory-lt:#FCFAF5;
  --text:#33302B;
  --muted:#6E675D;
  --line:rgba(19,40,58,.16);
  --gold-grad:linear-gradient(to right,#A87E2B 0%,#E8CE83 51%,#A87E2B 100%);
  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family:var(--body); color:var(--text); background:var(--ivory);
  line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; overflow-x:clip;
}

.phj.phj-journal a:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ==========================================================
   1. HERO
   ========================================================== */
.phj-journal .phj-hero{ position:relative; overflow:hidden; background:var(--blue); color:var(--ivory); text-align:center;
  min-height:clamp(470px,58vh,640px); display:flex; align-items:center; justify-content:center;
  padding:clamp(70px,8vw,104px) clamp(22px,5vw,48px) clamp(74px,8.5vw,112px); }
.phj-journal .phj-hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phj-journal .phj-hero::after{ content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 68% 66% at 50% 50%, rgba(6,13,21,.76) 0%, rgba(6,13,21,.47) 58%, rgba(6,13,21,0) 100%),
    linear-gradient(to bottom, rgba(6,13,21,.34) 0%, rgba(6,13,21,.24) 42%, rgba(6,13,21,.56) 100%); }
.phj-journal .phj-hero .inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.phj-journal .phj-hero .eyebrow{ text-transform:uppercase; letter-spacing:.34em; font-size:11.5px; font-weight:700; color:var(--ivory); }
.phj-journal .phj-hero h1{ font-family:var(--display); color:var(--ivory); font-weight:500; letter-spacing:.02em;
  font-size:clamp(38px,5.6vw,68px); line-height:1.1 !important; margin:18px auto 16px; }
.phj-journal .phj-hero .sub{ font-family:var(--display); font-style:italic; font-weight:400; color:rgba(244,239,230,.92);
  font-size:clamp(18px,2.3vw,25px); line-height:1.4; max-width:30em; margin:0 auto; }

@media (max-width:640px){
  .phj-journal .phj-hero{ min-height:0; padding:clamp(54px,11vw,74px) clamp(22px,5vw,30px); }
  .phj-journal .phj-hero::after{ background:
    radial-gradient(ellipse 96% 62% at 50% 50%, rgba(6,13,21,.76) 0%, rgba(6,13,21,.50) 62%, rgba(6,13,21,.30) 100%),
    linear-gradient(to bottom, rgba(6,13,21,.30), rgba(6,13,21,.22) 44%, rgba(6,13,21,.52)); }
}

/* ==========================================================
   2. THE CATEGORY BAR
   ========================================================== */
.phj-journal .phj-bar{ background:var(--ivory-lt); border-bottom:1px solid var(--line); }
.phj-journal .phj-bar .in{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,56px);
  flex-wrap:wrap; max-width:1180px; margin:0 auto; padding:clamp(17px,2vw,24px) clamp(22px,6vw,64px); }
.phj-journal .phj-bar nav{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap; }
.phj-journal .phj-bar nav a{ display:flex; align-items:center; gap:7px; padding-bottom:5px;
  border-bottom:1px solid transparent; text-transform:uppercase; letter-spacing:.22em;
  font-size:10.5px; font-weight:600; color:var(--muted); transition:color .3s ease, border-color .3s ease; }
.phj-journal .phj-bar nav a .n{ font-family:var(--display); font-size:15px; letter-spacing:0; color:var(--brass); }
.phj-journal .phj-bar nav a:hover{ color:var(--blue); }
.phj-journal .phj-bar nav a[aria-current="page"]{ color:var(--blue); border-bottom-color:var(--brass); }

/* ==========================================================
   3. THE STAGE
   ========================================================== */
.phj-journal .phj-sec{ background:var(--ivory); padding:clamp(52px,6.5vw,96px) clamp(22px,6vw,64px) clamp(40px,5vw,70px); }
.phj-journal .phj-head{ display:flex; align-items:center; gap:18px; max-width:1180px; margin:0 auto clamp(26px,3vw,40px); }
.phj-journal .phj-head .eyebrow{ text-transform:uppercase; letter-spacing:.34em; font-size:10.5px; font-weight:700;
  color:var(--bronze-ink); white-space:nowrap; }
.phj-journal .phj-head .ln{ height:1px; flex:1; background:linear-gradient(90deg,rgba(168,126,43,.5),transparent); }

.phj-journal .phj-xp{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.28fr .72fr;
  gap:clamp(28px,4vw,56px); align-items:stretch; }
.phj-journal .phj-stage{ position:relative; overflow:hidden; min-height:clamp(420px,42vw,520px); }
.phj-journal .phj-fig{ position:absolute; inset:0; margin:0; background:var(--blue); opacity:0;
  transition:opacity .7s ease; pointer-events:none; }
.phj-journal .phj-fig.active{ opacity:1; }
.phj-journal .phj-fig img{ width:100%; height:100%; object-fit:cover; }
.phj-journal .phj-fig::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.90) 0%,rgba(0,0,0,.58) 30%,rgba(0,0,0,.18) 66%,transparent 100%); }
.phj-journal .phj-fig .cap{ position:absolute; left:clamp(22px,3vw,40px); right:clamp(22px,3vw,40px);
  bottom:clamp(24px,3vw,40px); z-index:2; color:#fff; }
.phj-journal .phj-fig .cap .kick{ display:block; text-transform:uppercase; letter-spacing:.22em; font-size:10px;
  font-weight:700; color:var(--ivory); }
.phj-journal .phj-fig .cap .t{ display:block; font-family:var(--display); color:#fff; font-weight:500;
  font-size:clamp(25px,2.6vw,34px); line-height:1.1; margin:11px 0 10px; }
.phj-journal .phj-fig .cap .d{ display:block; color:rgba(255,255,255,.88); font-size:15px; line-height:1.65; max-width:46ch; }
.phj-journal .phj-fig .cap .lk{ display:none; }

.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:14px; padding:clamp(13px,1.5vw,19px) 4px;
  font-family:var(--display); font-size:clamp(18px,1.6vw,23px); line-height:1.22 !important;
  color:rgba(17,29,45,.44); transition:color .35s ease, padding-left .35s ease; }
.phj-journal .phj-index a .no{ font-family:var(--body); font-size:10px; font-weight:700; letter-spacing:.14em;
  color:var(--brass); opacity:.75; flex:none; padding-top:3px; }
.phj-journal .phj-index a:hover,.phj-journal .phj-index a:focus-visible,.phj-journal .phj-index a.active{ color:var(--blue); padding-left:12px; }
.phj-journal .phj-index li.lead a{ padding-top:clamp(15px,1.7vw,21px); padding-bottom:clamp(15px,1.7vw,21px);
  display:block; color:var(--blue); }
.phj-journal .phj-index li.lead .flag{ display:flex; align-items:center; gap:10px; margin-bottom:9px;
  text-transform:uppercase; letter-spacing:.26em; font-family:var(--body); font-size:9.5px;
  font-weight:700; color:var(--bronze-ink); }
.phj-journal .phj-index li.lead .flag .ln{ height:1px; width:24px; background:var(--brass); flex:none; }
.phj-journal .phj-index li.lead .t{ font-size:clamp(21px,1.9vw,27px); }
.phj-journal .phj-xp:has(.phj-index a:is(:hover,:focus-visible)) .phj-index a.active{ color:rgba(17,29,45,.44); padding-left:0; }
.phj-journal .phj-xp:has(.phj-index a:is(:hover,:focus-visible)) .phj-index li.lead a.active{ color:rgba(17,29,45,.5); }
.phj-journal .phj-fig .cap .flag{ display:none; align-items:center; gap:10px; margin-bottom:11px;
  text-transform:uppercase; letter-spacing:.26em; font-size:9.5px; font-weight:700; color:var(--ivory); }
.phj-journal .phj-fig .cap .flag .ln{ height:1px; width:26px; background:var(--brass); flex:none; }
.phj-journal .phj-xp:has(.phj-index a:is(:hover,:focus-visible)) .phj-index a.active{ color:rgba(17,29,45,.44); padding-left:0; }

.phj-journal .phj-empty{ max-width:1180px; margin:0 auto; font-family:var(--display); font-style:italic;
  font-size:clamp(19px,2vw,25px); color:var(--muted); padding:clamp(30px,4vw,54px) 0; }

/* ==========================================================
   4. PAGINATION
   ========================================================== */
.phj-journal .phj-pag{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(14px,2vw,26px);
  padding:clamp(30px,4vw,54px) clamp(22px,6vw,64px) clamp(72px,9vw,120px); background:var(--ivory); }
.phj-journal .phj-pag a,.phj-journal .phj-pag span{ display:inline-block; min-width:26px; text-align:center;
  font-family:var(--display); font-size:22px; color:rgba(17,29,45,.44);
  padding:0 7px 6px; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; }
.phj-journal .phj-pag a:hover{ color:var(--blue); border-bottom-color:var(--brass); }
.phj-journal .phj-pag .cur{ color:var(--blue); border-bottom-color:var(--brass); }
.phj-journal .phj-pag .gap{ color:rgba(17,29,45,.3); border:0; min-width:0; }
.phj-journal .phj-pag .nx{ font-family:var(--body); text-transform:uppercase; letter-spacing:.22em;
  font-size:10.5px; font-weight:600; color:var(--blue); border-bottom-color:rgba(19,40,58,.3);
  transition:letter-spacing .35s ease, border-color .35s ease; }
.phj-journal .phj-pag .nx:hover{ letter-spacing:.3em; border-bottom-color:var(--brass); }

@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;
    display:flex; flex-direction:column; gap:clamp(34px,6vw,48px); }
  .phj-journal .phj-fig{ position:relative; inset:auto; opacity:1; pointer-events:auto; background:none; }
  .phj-journal .phj-fig img{ height:62vw; max-height:420px; }
  .phj-journal .phj-fig::after{ display:none; }
  .phj-journal .phj-fig .cap{ position:static; display:block; color:var(--text); padding:clamp(20px,5vw,26px) 0 0; }
  .phj-journal .phj-fig .cap .kick{ color:var(--bronze-ink); }
  .phj-journal .phj-fig .cap .t{ color:var(--blue); font-size:clamp(23px,5.4vw,29px); }
  .phj-journal .phj-fig .cap .d{ color:var(--muted); max-width:none; }
  .phj-journal .phj-fig .cap .flag{ display:flex; color:var(--bronze-ink); margin-bottom:14px; }
  .phj-journal .phj-fig .cap .lk{ display:inline-flex; align-items:center; gap:9px; margin-top:15px;
    text-transform:uppercase; letter-spacing:.2em; font-size:10.5px; font-weight:600; color:var(--blue);
    border-bottom:1px solid rgba(19,40,58,.3); padding-bottom:4px; }
  .phj-journal .phj-fig .cap .lk i{ width:6px; height:6px; background:var(--brass); transform:rotate(45deg); flex:none; }
}