[data-port].features { isolation: isolate; overflow: hidden; }
[data-port] .f-tab::after { transform: scaleX(0); }
[data-port] .f-tab:hover::after, [data-port] .f-tab.locked::after { transform: scaleX(1); }
[data-port] .f-tab.fill::after { transform: scaleX(1); transition: transform 4.5s linear; }
.f-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: calc(var(--p8) * 6); align-items: stretch; margin-top: calc(var(--p8) * 5); }
.f-cap { display: flex; flex-direction: column; min-width: 0; }
.f-cap .desc { margin-top: calc(var(--body-fp) * 6); min-height: calc(var(--body-fp) * 44); max-width: 460px; }
.f-cap .meta { margin-top: calc(var(--body-fp) * 6); }
.f-acts { display: flex; flex-wrap: wrap; gap: calc(var(--ui-fp) * 6); margin-top: auto; }
.f-acts [hidden] { display: none; }
.f-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border: var(--p2) solid #000; outline: var(--p2) solid #fff; }
.f-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-stage .over { opacity: 0; transition: opacity .3s ease; }
.f-stage .over.show { opacity: 1; }
@media (max-width: 760px) {
  .f-tabs { gap: calc(var(--p8) * 3); overflow-x: auto; scrollbar-width: none; }
  .f-tabs::-webkit-scrollbar { display: none; }
  .f-tab { flex: 0 0 auto; }
  .f-tab::before, .f-tab::after { width: calc(100% + var(--p8) * 3); }
  .f-body { grid-template-columns: minmax(0, 1fr); gap: calc(var(--p8) * 3); }
  .f-stage { order: -1; }
  .f-cap .desc { min-height: 0; max-width: none; }
  .f-acts { margin-top: calc(var(--p8) * 3); }
  .f-acts:has(> [data-f-view]:not([hidden])) { flex-direction: column; align-self: flex-start; }   /* with View: stacked, as wide as the wider, like the hero's */
}

.f-cat { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
         padding: calc(var(--p8) * 2); background: rgba(0, 0, 0, .88); }
.f-cat[hidden] { display: none; }
.f-cat-in { position: relative; display: flex; width: min(1180px, 100%); height: min(86vh, 900px); background: var(--panel);
            border: var(--p2) solid var(--panel-edge); border-top-color: var(--panel-lit); }
.f-rail { flex: 0 0 calc(var(--ui-fp) * 120); display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
          border-right: var(--p2) solid var(--panel-edge); }
.f-rail-head { padding: calc(var(--p8) * 3) calc(var(--p8) * 2.5) calc(var(--p8) * 2.5); border-bottom: var(--p2) solid var(--panel-edge); }
.f-rail-head .sub { margin-top: calc(var(--ui-fp) * 4); }
.f-cats { flex: 1 1 auto; padding: calc(var(--p8) * 1.5) 0; }

@media (min-width: 761px) { .f-rail { overflow: hidden; } .f-cats { min-height: 0; overflow-y: auto; scrollbar-width: thin; } }
.f-catb { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--p8) * 1.5); width: 100%;
          padding: calc(var(--ui-fp) * 5) calc(var(--p8) * 2.5) calc(var(--ui-fp) * 5) calc(var(--p8) * 2.5 - var(--p2));
          background: none; border: 0; border-left: var(--p2) solid transparent; text-align: left; cursor: pointer;
          color: var(--grey); --sh: #2a2a2a; }
.f-catb:hover, .f-catb:focus-visible, .f-catb.active { color: #fff; --sh: #3f3f3f; outline: none; }
.f-catb.active { border-left-color: #fff; background: rgba(255, 255, 255, .04); }
.f-rail > .fbtn { align-self: flex-start; min-width: 0; margin: calc(var(--p8) * 2) calc(var(--p8) * 2.5) calc(var(--p8) * 2.5); }
.f-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.f-detail { position: relative; }
.f-detail .img { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-bottom: var(--p2) solid var(--panel-edge); }
.f-detail .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-detail .img .over { opacity: 0; transition: opacity .3s ease; }   /* the vanilla shot, over the Recrafted one (View: Vanilla) */
.f-detail .img .over.show { opacity: 1; }
.f-detail .body { padding: calc(var(--p8) * 4) calc(var(--p8) * 5) calc(var(--p8) * 5); }
.f-detail .head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--p8) * 2);
                  margin-bottom: calc(var(--p8) * 3); }
.f-detail .body p + p, .f-detail .desc + .extra > p:first-child { margin-top: calc(var(--body-fp) * 6); }
@media (max-width: 760px) {
  .f-cat { padding: 0; }
  .f-cat-in { flex-direction: column; height: 100%; }
  .f-rail { flex: none; overflow: visible; border-right: 0; border-bottom: var(--p2) solid var(--panel-edge); }
  .f-rail-head { padding: calc(var(--p8) * 2) calc(var(--p8) * 14) calc(var(--p8) * 1.5) calc(var(--p8) * 2); border-bottom: 0; }
  .f-rail-head .sub { display: none; }
  .f-cats { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 0 calc(var(--p8) * 1); }
  .f-cats::-webkit-scrollbar { display: none; }
  .f-catb { width: auto; flex: 0 0 auto; border-left: 0; border-bottom: var(--p2) solid transparent; padding: calc(var(--ui-fp) * 4) calc(var(--p8) * 2); }
  .f-catb.active { border-bottom-color: #fff; }
  .f-catb .n { display: none; }
  .f-rail > .fbtn { position: absolute; right: calc(var(--p8) * 2); top: calc(var(--p8) * 1.5); margin: 0; }
  .f-detail .body { padding: calc(var(--p8) * 3) calc(var(--p8) * 2) calc(var(--p8) * 4); }
}