/* ============================================================
   Phantomexposure — product pages, blade style
   The static, indexable twin of the overlay. Same palette,
   same proportions, same furniture — just a page instead of a
   dialog, so Google and no-JS visitors get the real thing.
   Depends on the tokens in pe-blades.css.
   ============================================================ */

body.pex-page{
  margin:0;
  min-height:100vh;
  color:var(--pex-ink);
  font-family:var(--pex-text);
  background:
    radial-gradient(circle at 18% -8%,rgba(179,166,193,.14),transparent 31rem),
    radial-gradient(circle at 84% 0%,rgba(201,138,62,.10),transparent 35rem),
    linear-gradient(180deg,#0d0c0f 0%,#100e12 45%,#070609 100%);
  background-attachment:fixed;
}

/* The overlay keeps .pex-shell at opacity:0 until its scrim goes live.
   There is no scrim on a page, so put it back on screen. */
.pex-page .pex-shell{
  opacity:1;
  transform:none;
  perspective:none;
}

.pex-wrap{
  width:min(680px,calc(100% - 32px));
  margin:0 auto;
  padding:26px 0 56px;
}

/* ---------- top strip ---------- */
.pex-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 2px 22px;
}
.pex-home{
  font-family:var(--pex-mono); font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--pex-dim); text-decoration:none;
  transition:color .16s ease;
}
.pex-home:hover{ color:var(--pex-ink); }
.pex-home::before{ content:"\2190\00a0\00a0"; color:var(--pex-faint); }
.pex-where{
  font-family:var(--pex-mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pex-faint);
}

/* ---------- blade tabs, as real links ---------- */
.pex-page .pex-blades a{
  flex:1 1 0; min-width:0;
  display:block; text-align:left; text-decoration:none;
  font-family:var(--pex-mono); font-size:9px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--pex-faint);
  background:var(--pex-sink);
  border:1px solid var(--pex-line-soft); border-bottom:0;
  border-radius:3px 3px 0 0;
  padding:9px 8px 8px;
  position:relative; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  transition:color .18s ease, background .18s ease, transform .18s ease;
}
.pex-page .pex-blades a::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--tint,var(--pex-faint)); opacity:.28;
  transition:opacity .18s ease;
}
.pex-page .pex-blades a:hover{ color:var(--pex-dim); background:var(--pex-shell); }
.pex-page .pex-blades a:hover::before{ opacity:.6; }
.pex-page .pex-blades a[aria-current="page"]{
  color:var(--pex-ink); background:var(--pex-shell);
  border-color:var(--pex-line);
  transform:translateY(-3px); padding-bottom:11px;
}
.pex-page .pex-blades a[aria-current="page"]::before{ opacity:1; height:3px; }
.pex-page .pex-blades a:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:2px; }

/* ---------- panel ---------- */
.pex-page .pex-panel{ border-radius:0 3px 4px 4px; }
.pex-page .pex-body{ padding:18px 16px 17px; }
.pex-page .pex-name{ font-size:26px; margin-bottom:7px; }

/* ---------- gallery ---------- */
.pex-shots{ margin:0 0 12px; }
.pex-thumbs{
  display:flex; gap:5px; margin:7px 0 0; padding:0; list-style:none;
  flex-wrap:wrap;
}
.pex-thumbs button{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  width:52px; height:34px; padding:0; overflow:hidden;
  background:var(--pex-base);
  border:1px solid var(--pex-line-soft); border-radius:2px;
  opacity:.5; transition:opacity .16s ease, border-color .16s ease;
}
.pex-thumbs button img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.pex-thumbs button:hover{ opacity:.85; }
.pex-thumbs button[aria-current="true"]{ opacity:1; border-color:var(--tint,var(--pex-signal)); }
.pex-thumbs button:focus-visible{ outline:2px solid var(--pex-signal); outline-offset:2px; }

/* no-JS: the stepper is useless, the thumbs are not */
.pex-page .pex-frame .pex-step{ display:none; }

/* ---------- prose ---------- */
.pex-about{
  margin:16px 0 0; padding-top:15px;
  border-top:1px dashed var(--pex-line);
  font-size:13.5px; line-height:1.6; color:var(--pex-dim);
  max-width:60ch;
}
.pex-about p{ margin:0 0 10px; }
.pex-about p:last-child{ margin-bottom:0; }

.pex-page .pex-actions{ margin-top:16px; }

/* ---------- foot ---------- */
.pex-foot{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:20px; padding:0 2px;
  font-family:var(--pex-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pex-faint);
}
.pex-foot a{ color:var(--pex-faint); text-decoration:none; }
.pex-foot a:hover{ color:var(--pex-dim); }

@media (max-width:560px){
  .pex-wrap{ width:calc(100% - 20px); padding:18px 0 40px; }
  /* Matches the overlay: scroll rather than truncate at five tabs. */
  .pex-page .pex-blades{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:8px;
  }
  .pex-page .pex-blades::-webkit-scrollbar{ display:none; }
  .pex-page .pex-blades a{
    flex:0 0 auto;
    font-size:8px; letter-spacing:.1em; padding:8px 9px 7px;
  }
  .pex-page .pex-name{ font-size:22px; }
  .pex-page .pex-body{ padding:15px 13px; }
}