.ph{ position:relative; overflow:hidden; padding:178px 0 clamp(56px, 5.75vw, 110px); }
.ph-decor{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.ph-glow{ position:absolute; border-radius:50%; --blur:260px;  }
.ph-glow--signal{ right:-13%; top:-420px; width:52%; height:900px; --gc:rgba(233, 80, 6, 0.3); animation:ph-breathe 9s var(--ease-in-out) infinite alternate; }
.ph-glow--slate{ left:-20%; top:520px; width:57%; height:900px; --gc:rgba(52, 81, 99, 0.55); animation:ph-breathe 11s var(--ease-in-out) infinite alternate-reverse; }
@keyframes ph-breathe{ from{ transform:scale(0.92); opacity:0.75; } to{ transform:scale(1.08); opacity:1; } }
.ph-grid, .ph-marks{ position:absolute; left:50%; transform:translateX(-50%); width:min(100% - var(--gutter) * 2, var(--container)); display:flex; justify-content:space-between; }
.ph-grid{ top:0; bottom:0; }
.ph-grid i{ width:1px; height:100%; background:rgba(187, 205, 218, 0.07); transform-origin:top; }
.ph-marks{ top:144px; height:13px; }
.ph-marks b{ position:relative; width:13px; height:13px; margin-left:-6px; }
.ph-marks b:nth-child(2){ margin-left:0; }
.ph-marks b:last-child{ margin-right:-6px; }
.ph-marks b::before, .ph-marks b::after{ content:""; position:absolute; background:rgba(187, 205, 218, 0.35); }
.ph-marks b::before{ left:0; right:0; top:6px; height:1px; }
.ph-marks b::after{ top:0; bottom:0; left:6px; width:1px; }
.ph > .container{ position:relative; z-index:1; }

.ph__h1{
  margin-top:30px; margin-left:-0.075em;
  font-size:clamp(44px, 5.42vw, 104px); font-weight:600; line-height:1; letter-spacing:-0.04em; color:var(--white);
}
.ph__h1 .line{ display:block; overflow:hidden; padding:0.1em 0 0.26em; margin:-0.1em 0 -0.26em; }
.ph__h1 .line > span{ display:inline-block; }
.ph__intro{ max-width:600px; margin-top:28px; font-size:19px; line-height:1.55; color:rgba(187, 205, 218, 0.85); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:15px; font-weight:500; line-height:20px; }
.crumbs li{ color:var(--white); }
.crumbs li + li::before{ content:"/"; margin-right:10px; color:rgba(187, 205, 218, 0.35); }
.crumbs a{ color:rgba(187, 205, 218, 0.7); transition:color var(--dur-fast) var(--ease-out); }
.crumbs a:hover{ color:var(--white); }
.live-chip{
  display:inline-flex; align-items:center; gap:10px;
  height:38px; padding:0 16px 0 14px; border-radius:var(--r-pill);
  background:rgba(255, 255, 255, 0.05); border:1px solid rgba(255, 255, 255, 0.12);
  font-family:var(--mono); font-size:14px; font-weight:500; color:var(--white); white-space:nowrap;
}
.live-chip__dot{ position:relative; width:8px; height:8px; border-radius:50%; background:#1f9d55; flex:none; }
.live-chip__dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid #1f9d55; opacity:0; animation:ph-ping 2.4s var(--ease-out) infinite; }
.live-chip.is-off .live-chip__dot{ background:var(--mist); }
.live-chip.is-off .live-chip__dot::after{ display:none; }
@keyframes ph-ping{ 0%{ transform:scale(0.6); opacity:0.9; } 70%, 100%{ transform:scale(1.8); opacity:0; } }
.nf-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:47px; }
.nf-link{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px 0 18px; border-radius:var(--r-pill);
  background:rgba(255, 255, 255, 0.06); border:1px solid rgba(255, 255, 255, 0.14);
  font-size:15px; font-weight:500; color:var(--white);
  transition:background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform 160ms var(--ease-out);
}
.nf-link svg{ width:14px; height:14px; color:var(--signal); transition:transform var(--dur-base) var(--ease-out); }
.nf-link:hover{ background:rgba(255, 255, 255, 0.12); border-color:rgba(255, 255, 255, 0.3); }
.nf-link:hover svg{ transform:translate(2px, -2px); }
.nf-link:active{ transform:var(--press); }
.nf-link--hot{ background:rgba(233, 80, 6, 0.16); border-color:rgba(233, 80, 6, 0.45); font-family:var(--mono); font-weight:400; font-size:14px; }
.nf-link--hot:hover{ background:var(--signal); border-color:var(--signal); }
.nf-link--hot:hover svg{ color:var(--white); }
html.js:not(.reduced) [data-ph-in]{ opacity:0; transform:translateY(18px); }
html.js:not(.reduced) .ph__h1[data-ph-h1] .line > span{ transform:translateY(130%); }

@media (max-width: 1024px){
  .ph{ padding:118px 0 50px; }
  .ph-grid, .ph-marks{ display:none; }
  .ph-glow--signal{ right:-30%; top:-470px; width:130%; height:450px; --blur:140px; }
  .ph-glow--slate{ left:-55%; top:580px; width:140%; height:450px; --blur:140px; }
  .ph__h1{ margin-top:16px; margin-left:-0.04em; }
  .ph__intro{ margin-top:16px; font-size:18px; }
}
@media (max-width: 400px){
  .live-chip{ font-size:13px; padding:0 12px; }
}