/* ==========================================================================
   PORTFOLIO — page-specific styles
   ========================================================================== */

.nav__links a.is-current{ color:var(--gold); }

.pf-hero{
  min-height:70svh; display:flex; flex-direction:column; justify-content:center;
  padding:160px var(--edge) 80px; overflow:hidden; position:relative;
}
.pf-hero__seal-deco{
  position:absolute; top:-18%; right:-12%; width:460px; height:460px;
  color:var(--paper-line); opacity:.9; pointer-events:none;
}
.pf-hero__grid{ max-width:var(--container); margin:0 auto; width:100%; position:relative; z-index:2; }
.pf-hero__title{
  font-family:var(--font-display); text-transform:uppercase; font-weight:400;
  font-size:clamp(38px, 7vw, 92px); line-height:.98; margin:22px 0 30px;
}

.segments{ padding:40px 0 60px; max-width:var(--container); margin:0 auto; }

.segment{
  padding:64px var(--edge); border-top:1px solid var(--paper-line);
  display:grid; grid-template-columns:.6fr 1.4fr; gap:40px; align-items:center;
}
.segment:first-child{ border-top:0; }

.segment__head{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.segment__icon{ width:76px; height:76px; color:var(--gold); }
.segment__icon svg{ width:100%; height:100%; overflow:visible; }
.segment__label{
  font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.03em;
  color:var(--muted); max-width:200px;
}

.segment__slots{
  display:flex; flex-wrap:wrap; gap:18px;
}
.slot{
  width:104px; height:104px; border-radius:50%; flex-shrink:0;
  border:1.5px dashed var(--paper-line); display:flex; align-items:center; justify-content:center;
  color:var(--paper-line); font-family:var(--font-display); font-size:22px;
  transition: border-color .35s, color .35s, transform .1s;
  transform-style:preserve-3d;
}
.slot:hover{ border-color:var(--gold); color:var(--gold); border-style:solid; }
.slot img{ width:64%; height:64%; object-fit:contain; border-radius:0; }

.slot--filled{ border-style:solid; border-color:var(--paper-line); color:var(--ink); }
.slot--filled:hover{ border-color:var(--gold); color:var(--gold); }
.slot__mark{ font-family:var(--font-display); font-size:26px; letter-spacing:.02em; }

.slot--dark{ background:var(--ink); border-color:var(--ink); }
.slot--dark:hover{ border-color:var(--gold); }
.slot--dark img{ width:74%; height:74%; }

@media (max-width:820px){
  .segment{ grid-template-columns:1fr; gap:26px; padding:48px var(--edge); }
  .slot{ width:88px; height:88px; }
}
@media (max-width:480px){
  .slot{ width:74px; height:74px; }
  .segment__slots{ gap:12px; }
}